在H5中唤起APP唤起失败进入APP下载页

在 H5 中唤起 APP 原理：通过 Scheme 协议打开 APP

Scheme 的组成：scheme:path[#fragment]

一、直接使用协议打开 APP，打开失败进入下载页

<div class="btn" onClick="openApp"> 打开 App</div>

function openApp() {
    // 通过 iframe 的方式试图打开 APP，如果能正常打开，会直接切换到 APP
    // 每个 APP 有自己 scheme 协议名称，例如微信是 weixin:// 
    // 否则跳转 APP 下载页
    var ifr = document.createElement('iframe');
    ifr.src = 'APP 协议:// 打开页面路径';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    window.setTimeout(function(){downloadAPP()
        document.body.removeChild(ifr);
    },2000)
}

function downloadAPP() {
    // 判断是 Android 还是 iOS
    const u = navigator.userAgent;
    let system = '';
    if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {system = 'Android';} else if (!!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/)) {system = 'iOS';} else {system = 'unknown';}
    // 根据系统不同，跳转不同的下载 APP 地址
    if(system === 'Android') {
        // TODO：这里还可以根据手机厂商的不同跳转各自厂商的应用商店
        window.location = "安卓下载地址"
    } else if(system === 'iOS') {window.location = "iOS 商店地址"}
}

二、使用第三方插件，原理还是一样的

https://github.com/suanmei/ca…，具体使用见 github

import CallApp from 'callapp-lib';

  

  

function openApp(){     

    const option = {

      scheme: {protocol: 'matchu',},

      appstore: 'appstore 的应用地址',

      yingyongbao: '应用宝地址',

      fallback: '打开失败后的页面',

      timeout: 3000,

    };

    const lib = new CallApp(option);

    lib.open({path: '打开 APP 的指定页面',});  

}