1. 程式人生 > >H5頁面中喚起native app

H5頁面中喚起native app


需求:如果本地安裝了app,那麼就直接喚起本地的app,如果沒有安裝,則跳轉到下載。

相容性:在手機各大瀏覽器能喚醒。微信 QQ客戶端 新浪微部落格戶端 騰訊微部落格戶端無法喚醒,需另行處理。
<span style="color:inherit">原理:ios與android都支援一種叫做schema協議的連結。這種協議的類似於我們熟悉的http協議,我們只要跟app協商好協議頭,app通過攔截到這個協議頭的請求就可以知道有網頁要求呼叫。而對於js來說,我們這要像a標籤的href一樣來啟用這個協議的連結就行了。</span>
<span style="color:inherit">核心程式碼:</span>
$("a[href^='schema://']").on('click',function(e){
    e.preventDefault();
    if(isWeixinBrowser() || isQQBrowser()){
        $('.layer').show(); //友好的提示頁面
    }else{
        if(isAndroid){
            //android
            //此操作會調起app並阻止接下來的js執行
            $('body').append("<iframe src='schema://openapp' style='display:none' target='' ></iframe>");

            //沒有安裝應用會執行下面的語句
            setTimeout(function(){window.location = 'http://www.yourdlurl.com/download.html'},600);
        }else{
            //ios
            window.location = 'schema://openapp';
            setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/idXXXXXXX'},25);
        }
    }
})
function isWeixinBrowser() {
    return (/micromessenger/.test(ua)) ? true : false;
}
function isQQBrowser() {
    return (ua.match(/QQ/i) == "qq") ? true : false;
}

另附詳細教程: