移动端H5页面 使用 URL Scheme 唤醒 APP

1.URL Schemes

[scheme]://[host]/[path]?[query]

2.使用

下面代码，Android使用iframe唤起，ios采用window.location.href唤起。

// 分享课程
                shareAlbum() {
                    let params = {
                    };
                    let url = 'yezx://main';//URL Scheme 安卓小伙伴提供
                    this.shareJump(url, params);
                },
                // 分享跳转
                shareJump(url, param) {
                    // 判断是否是微信
                    var is_weixin = (function () { return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 })();
                    if (is_weixin) {
                        // 微信则跳转下载页
                        window.location.href = "https://www.pgyer.com/A2fc"
                        return;
                    }
                    // 非微信拼接参数
                    let params = param
                    let urls = url;
                    let first = true;
                    if (params) {
                        for (let i in params) {
                            if (first) {
                                urls += "?"
                                first = false;
                            } else {
                                urls += "&"
                            }
                            urls += i + "=" + params[i]
                        }
                        //console.log("getUrlend", urls);
                    }
                    // 安卓端跳转
                    var iFrame;
                    var u = navigator.userAgent;
                    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                    console.log("isAndroid", isAndroid, isiOS);
                    if (isAndroid) {
                        //安卓终端使用iframe
                        iFrame = document.createElement("iframe");
                        iFrame.setAttribute("src", urls);
                        iFrame.setAttribute("style", "display:none;");
                        iFrame.setAttribute("height", "0px");
                        iFrame.setAttribute("width", "0px");
                        iFrame.setAttribute("frameborder", "0");
                        document.body.appendChild(iFrame);
                        // 发起请求后这个 iFrame 就没用了，所以把它从 dom 上移除掉
                        iFrame.parentNode.removeChild(iFrame);
                        iFrame = null;
                        // 如果用户没有安装APP，则提示用户去安装APP
                        setTimeout(() => {
                            window.location.href = "https://www.pgyer.com/A2fc"; // 这里可以自行写一个延时关闭的弹窗，也可以跳转至app下载地址
                        }, 2000);
                    } else if (isiOS) {
                        //iOS终端直接页面跳转
                        window.location.href = urls;
                        // 如果用户没有安装APP，则提示用户去安装APP
                        setTimeout(() => {
                            window.location.href = "https://www.pgyer.com/A2fc"; // 这里可以自行写一个延时关闭的弹窗，也可以跳转至app下载地址
                        }, 2000);
                    } else {
                        window.location.href = urls;
                    }
                    // window.location.href = urls;
                }

3.注意

1.微信中无法唤醒App

需要“用浏览器打开”是因为微信对所有的分享链接接做了scheme屏蔽，也就是说分享连接中所有对于scheme的调用都被微信封掉了。有些app是能在微信打开是因为微信有一个白名单(有关系就是不错)，对于在白名单中的分享链接是不会屏蔽掉scheme调用的。如微信中打开的页面需做处理。

// 判断是否是微信
                    var is_weixin = (function () { return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 })();
                    if (is_weixin) {
                        // 微信则跳转下载页
                        window.location.href = "https://www.pgyer.com/A2fc"
                        return;
                    }

2.Schema无法判断是否安装App，如果用户手机没有安装要唤醒的App，需要提示用户去下载。

目前没有好的办法去判断是否唤醒成功，如果成功就跳转页面，不执行后面setTimeout()方法，如果没有跳转成功，会执行setTimeout()，在这里提示用户去下载想唤醒的App。

4.参考链接

https://www.cnblogs.com/hcxwd/p/9235364.html

http://www.sohu.com/a/309426111_298038

https://www.cnblogs.com/simba-lkj/p/8027809.html