在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的指定頁面',

    });  

}