在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/callapp-lib，具体使用见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的指定页面',
    });  
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5823