网页打开app

admin管理员组

文章数量:1616033

打开app

思路：通过判断安卓和iOS在各浏览器行为，决定使用universal link还是url scheme，如果没有安装app则跳转到下载页

通过下文可知，除微信内置浏览器外，ios都可通过url scheme打开app，安卓亦是如此。【排除百度浏览器，百度浏览器是可以用universal link打开，不可以用url scheme，有需要的同学可以自行判断。我也是因为听说百度浏览器行为也有差异才测了下，但懒得做判断了】

鉴于QQ内置浏览器只能使用a标签打开url scheme，所以url scheme统一使用a标签打开，只判断当前浏览器是否是微信内置浏览器即可【按理说，如果是微信内置浏览器应该使用公众号的WeixinJSBridge.invoke launchApplication方法才对，不过暂时没这个条件就没弄了，弄了再更新吧】

官方文档地址不知在哪，csdn搜到的要积分下载，只能放个我有道云的在线文档地址了
微信内 5 H5 唤起外部客户端

相关代码：

// html
 <a href="你的APP url scheme" id="js-a" style="visibility: hidden;"></a>
 <button class="btn" onclick="openApp()">测试</button>
 
<script>
// 打开app
function openApp() {
        //js判断是否ios或Android
        var u = navigator.userAgent;
        // 判断浏览器
        var ua = u.toLowerCase(),
            isWx = false,
            isQQ = false,
            isQQInstalled = false;

        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            //微信浏览器
            isWx = true;
        }

        if (isAndroid) {
            if (isWx) {
                // 微信内置浏览器
                alert('请用其他浏览器打开');
            } else {
                judgeOpen();
            }
            return;
        }
        if (isiOS) {
            if (isWx) {
                // 微信内置浏览器 打开universal link 
                /* 
                你的APP 下载地址 设为 universal link 
                // 则有APP打开APP, 无APP打开下载页
                */
                window.location.href = '你的APP 下载地址';
            } else {
                judgeOpen();
            }
        }
    }
    // 判断打开
    function judgeOpen() {
        // 点击 打开url schema
        var aaa = document.getElementById('js-a');
        aaa.click();

        setTimeout(function () {
            if (document.visibilityState == 'hidden') {
                console.log('跳转至app了，当前页面不可见');
                return;
            }
            window.location.href = '你的APP 下载地址';
        }, 3000)
    }
</script>

安卓和iOS在各浏览器行为

主要测试了QQ内置浏览器，微信内置浏览器，QQ浏览器，UC浏览器，百度浏览器，Safari，及华为默认浏览器。

测试机型：苹果 xr【ios 13.6】, 华为P9 【安卓 8.0】

以下打勾表示可使用，中括号表示浏览器类型是否可识别

---

QQ内置浏览器

iOS[可以识别]

universal link

• window.location
• a 标签

url scheme

• window.location
• a 标签

安卓[无法识别]

url scheme

• window.location
• a 标签

---

微信内置浏览器

iOS[可以识别]

universal link

• window.location
• a 标签

安卓[识别成微信和qq浏览器]

url scheme[安卓,iOS]

• window.location
• a 标签

---

QQ浏览器[iOS, 安卓可以识别]

iOS

universal link

• window.location
• a 标签

url scheme[安卓,iOS]

• window.location
• a 标签

---

UC浏览器[安卓,iOS识别为其他浏览器，且取消后无法继续打开]

iOS

universal link

• window.location
• a 标签

url scheme[安卓,iOS]

• window.location
• a 标签

---

百度浏览器[安卓,iOS 识别为其他浏览器]

iOS

universal link

• window.location
• a 标签

url scheme[安卓,iOS]

• window.location
• a 标签

---

其他浏览器[安卓,iOS 识别为其他浏览器]

iOS

universal link

• window.location
• a 标签

url scheme[安卓,iOS]

• window.location
• a 标签

---

识别代码

var u = navigator.userAgent;
// 判断浏览器
var ua = u.toLowerCase(),
    isWx = false,
    isQQ = false,
    isQQInstalled = false;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

var str = '';

if (ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0) {
    //qq内置浏览器
    isQQInstalled = true;
    // alert('这是qq内置浏览器');
    str = 'qq内置浏览器, ';
}
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    //微信浏览器
    isWx = true;
    str = str + '微信内置浏览器, ';
}
if (ua.indexOf('mqqbrowser') > -1 && ua.indexOf(" qq") < 0) {
    //qq浏览器
    isQQ = true;
    // alert('这是qq浏览器');
    str = str + 'qq浏览器, ';
}
if (!str) {
    str = '其他浏览器';
}

if (isAndroid) {
    str = str + '安卓, ';
}
if (isiOS) {
    str = str + 'IOS, ';
}

本文标签： 网页app