H5通过URL Scheme协议唤起App_schema协议唤起企业微信

场景

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

实现思路

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

URL Scheme协议

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

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

代码示例

var userAgent = navigator.userAgent;
var isWeixin = userAgent.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
var isAndroid = /(Android)/i.test(userAgent); //android终端
var isIOS = /(iPhone|iPad|iPod|iOS|Mac|Mac)/i.test(userAgent); //ios终端

// 微信内
if (isWeixin) {
    alert('请在浏览器上打开')
} else {
    //android端
    if (isAndroid) {
        //安卓app的scheme协议
        window.location.href = 'taobao://';
        setTimeout(function () {
           //应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
           window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
        }, 1000);
    }
    //ios端
    if (isIOS) {
        // 根据时间来判断移动端是否装有app，如果有跳转到和移动端约定好的schema,如果没有装有app则跳转到App Store
        var loadDateTime = Date.now()
        // ios的scheme协议
        window.location.href = 'taobao://'
        //3秒后去App store下载
        setTimeout(function () {
             var timeOutDateTime = Date.now()
             if (timeOutDateTime - loadDateTime < 5000) {
                //App store下载地址
             	window.location.href = "http://itunes.apple.com/app/id387682726";
             }
        }, 3000);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

weixin：在浏览器输入 weixin://,会调起微信app