fxxqq / 6fedcom.github.io

frank的前端养成记(hexo博客)
https://6fed.com
22 stars 5 forks source link

微信网页唤醒app的方法 #37

Open fxxqq opened 6 years ago

fxxqq commented 6 years ago

安卓手机实现方案

若该app已上架应用宝 腾讯还有个产品叫应用宝,你可以上架应用宝,在微信浏览器内点击“立即下载”, 可以在微信内跳转到应用宝,然后应用宝跟APP store有合作,自动点击并且跳转至下载详情页, 安装了用户点击【打开】按钮,就可以唤醒app了 安卓手机测试链接

没有上架应用宝的解决方案 微信右上角有个“更多”,点击后选择在浏览器中打开,带着参数跳转到浏览器中,就可以判定是否安装、是否登录等动作了

苹果手机实现方案

因为iOS9和之前的iOS系统有区别,所以这里我们也要区别对待。 ios9以上可以直接在微信里打开app,检测到用户没有下载app(浏览器在一定时间没有唤醒app)的话,则打开下载页面,参考一下代码

//拿到ios系统的版本号
function getIosVersion() {
    var str = navigator.userAgent.toLowerCase();
    var version = str.match(/cpu iphone os (.*?) like mac os/);
    if (version) {
        return version[1].replace(/_/g, ".")
    }
}
var iosVersion = getIosVersion();
//唤醒app
function startApp(appUrl, downloadurl) {
    var loadDateTime = new Date();
    window.setTimeout(function() {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
            window.location = downloadurl; //ios下载地址 
        } else {
            window.close();
        }
    }, 25);
    window.location = appUrl; //iosapp配置地址
}
if (iosVersion && iosVersion >= 9) {
    startApp("iosapp配置地址", "ios下载地址")
} else {
    // 引导用户在safari浏览器打开页面,
    // 再执行startApp的操作
}
整理:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>微信唤醒app的方法</title>
    <style>
        #app {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            line-height: 30px;
            background: green;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">唤醒app</div>
</body>
<script type="text/javascript">
    var btn = document.getElementById('app')
    btn.onclick = function() {
        openApp()
    };
    //拿到ios系统的版本号
    function getIosVersion() {
        var str = navigator.userAgent.toLowerCase();
        var version = str.match(/cpu iphone os (.*?) like mac os/);
        if (version) {
            return version[1].replace(/_/g, ".")
        }
    }
    var iosVersion = getIosVersion();
    //唤醒app
    function startApp(appUrl, downloadurl) {
        var loadDateTime = new Date();
        window.setTimeout(function() {
            var timeOutDateTime = new Date();
            if (timeOutDateTime - loadDateTime < 5000) {
                window.location = downloadurl; //ios下载地址 
            } else {
                window.close();
            }
        }, 25);
        window.location = appUrl; //iosapp配置地址
    }

    function openApp() {
        var ua = window.navigator.userAgent.toLowerCase();
        //微信 
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            window.location.href = '###';
            //微信浏览器要可以做一个引导用户打开浏览器的页面 
            //然后把url传过去再做跳转
            alert("请在浏览器里打开页面")
        } else { //非微信浏览器 
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                if (iosVersion && iosVersion >= 9) {
                    startApp("iosapp配置地址", "ios下载地址")
                } else {
                    // 引导用户在safari浏览器打开页面,
                    // 再执行startApp的操作
                }
            } else if (navigator.userAgent.match(/android/i)) {
                var state = null;
                try {
                    window.location = 'wechat://'; //安卓app配置地址 
                    setTimeout(function() {
                        window.location = "http://android.myapp.com/myapp/detail.htm?apkName=com.webi.speakhi&ADTAG=mobile"; //android下载地址 
                    }, 500);
                } catch (e) {}
            }
        }
    }
</script>

</html>