场景描述

在 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按钮，如下：

<a href="yc://ycbjie:8888/from?type=yangchong">打开叮咚app</a>

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

<activity
    android:name=".ui.main.ui.activity.SchemeFirstActivity"
    android:screenOrientation="portrait">
    <!--Android 接收外部跳转过滤器-->
    <!--要想在别的App上能成功调起App，必须添加intent过滤器-->
    <intent-filter>
        <!-- 协议部分配置 ,注意需要跟web配置相同-->
        <!--协议部分，随便设置 yc://ycbjie:8888/from?type=yangchong  -->
        <data android:scheme="yc"
            android:host="ycbjie"
            android:path="/from"
            android:port="8888"/>


        <!--下面这几行也必须得设置-->
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <action android:name="android.intent.action.VIEW" />
    </intent-filter>
</activity>

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

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