H5通过URL Scheme协议唤起Activity或App

场景描述

在 h5 页面上，用户点击打开app按钮，如果已经安装了App则打开app，否则引导用户前往应用市场。

思路

在 h5 页面上唤醒app ，需要用到 scheme协议（由app端提供），但是在微信浏览器里scheme不起作用(微信现在可以通过微信开放标签实现)，因此需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后尝试scheme协议唤醒app，如果唤醒失败再转向应用市场。

实现

var u = navigator.userAgent;
var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

// 微信内
if (isWeixin) {
    alert('请在浏览器上打开')
} else {
    //android端
    if (isAndroid) {
        //安卓app的scheme协议
        window.location.href = 'taobao://';
        setTimeout(function () {
            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
            if (typeof hidden == "undefined" || hidden == false) {
                //应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
                window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
            }
        }, 2000);
    }
    //ios端
    if (isIOS) {
        //ios的scheme协议
        window.location.href = 'taobao://'
        setTimeout(function () {
            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
            if (typeof hidden == "undefined" || hidden == false) {
                //App store下载地址
                window.location.href = "http://itunes.apple.com/app/id387682726";
            }
        }, 2000);
    }
}

URL Scheme协议

URL Scheme是一种页面内跳转协议，通过这个协议可以比较方便的跳转到app某一个页面。

[scheme]://[host][:port]/[path]?[query]
scheme: 协议名称（由开发人员自定义）(必要，其他都是可选)
host: 域名
port：端口
path: 页面路径
query： 请求参数

调用：
例如我们再 h5 页面上点击一个唤醒app按钮，如下：

打开叮咚app

那么这个协议链接的来源，即原生app的设置，是长这样的：

需要原生app上先设置好了这些，h5上才能唤醒app。

作者：liwuwuzhi
链接：https://www.jianshu.com/p/21380058d609
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。