H5頁面中喚起native app
阿新 • • 發佈:2019-02-20
需求:如果本地安裝了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; }
另附詳細教程: