H5通过URL Scheme协议唤起App

编程知识更新时间:2023-05-02 20:03:33

场景

在 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： 请求参数

代码示例

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/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/app/id387682726";
             }
        }, 3000);
    }
}