APP下载页面，根据手机系统和浏览器下载对应的APP

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <link rel=icon href=favicon.png>
    <meta name=viewport
        content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name=format-detection content="telephone=no">
    <meta name=msapplication-tap-highlight content=no>
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <title>下载页</title>
    <style>
        #app {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            padding-top: 15%;
        }

        #btn {
            height: 50px;
            width: 60%;
            background-color: #409eff;
            color: whitesmoke;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id=app>
        <h3>TrendOS</h3>
        <img src=icon-1024.png height="180px" />
        <p style="font-size:12px;color:gray;margin-top:3px">请在浏览器中打开</p>
        <div id=btn>
            点击下载安装
        </div>
    </div>
    <script>
        var version = '1.6.0'
        window.onload = function () {
            document.getElementById('btn').addEventListener('click', download)
        }
        function download() {
            var type = uaType()
            if (type === 'weixin') {
                alert('请在浏览器中打开')
            } else if (type === 'ios') {
                window.location.href = 'itms-services://?action=download-manifest&url=https://xxxx.com/v' + version + '/manifest.plist'
            } else {
                window.location.href = 'https://xxx.com/v' + version + '/xxx.apk'
            }
        }

        function uaType() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return 'weixin';
            } else if (ua.match(/Android/i)) {
                return 'android'
            } else if (ua.match(/iphone|ipod|ipad/i)) {
                return 'ios'
            } else {
                return ''
            }
        }


    </script>
</body>

</html>

APP下载页面，根据手机系统和浏览器下载对应的APP

codecook

引用和评论

window.onerror 和window.addEventListener('error')的区别

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

微信抢红包插件