言

一般有做過移動端開發的前端都會遇到這種喚起App的問題，這篇總結的很齊全。今日早讀由時光網@會說話的魚 授權分享。

@會說話的魚，就職于時光網，前端負責人。推崇效率至上，對一切可提升組內工作效率技術都感興趣。Java與Nodejs愛好者，擅長前端架構，在全網性能優化、類庫研發、知識沉淀、工具應用等方面取得了豐碩成果。

正文從這開始～

背景a

最近在做微信、QQ、微博中使用js喚起App，之前也做過類似的功能，不過比較粗糙，考慮的情況不太全，而且那已經是很久之前的事情了，很多技術都已過時，現在有體驗更好，功能更加完善的喚起技術，之前的很多的方案，到了現在都已是不太必要了，現在通過這篇文章分享給大家一個全面的、最新的喚起方案，希望對大家有幫忙。

目標

用戶點擊打開App或者下載按鈕（這個按鈕可能在一個下載入口頁、各種分享頁面的吸頂或吸底的banner），如果用戶已經安裝了App，則根據業務跳轉到相應的Native頁面；如果用戶沒有安裝該應用，則跳到AppStore或者應用市場去下載我們的App。

一個完整的流程

編輯切換為居中

添加圖片注釋，不超過 140 字（可選）

首先所有的下載/喚起入口都是一個直接跳轉，應該是這樣：

<ahref="https://applink-party.mtime.cn/mtlf">下載</a>

或者這樣：

window.location.href = 'https://applink-party.mtime.cn/mtlf'

所有的業務判斷都是mtlf這個頁面里面來做，這樣有兩個好處：

• 多業務共用代碼。在一個團隊中，每個人的業務都可能有一個banner下載，沒有比location到一個url更簡單的調用方式了
• 能夠利用universal link

簡單說下universal link

在iOS9之前，喚起方式和現在安卓是一個的，都是使用scheme進行喚起，這種方式有個小問題，每次喚起，都會給個提示：是否打開xx應用，這樣從體驗上來講，又讓用戶多一步操作。universal link會直接跳轉，不會在頁面做停留，條件就是在我們項目的根目錄，增一個apple-app-site-association.json文件，里面的內容大致是這樣：

添加圖片注釋，不超過 140 字（可選）

然后iOS的App后臺再配置一下，就可以實現直接喚起了！

微信、微博、QQ、Safari在各平臺的喚起方案

添加圖片注釋，不超過 140 字（可選）

微信

微信是最重要的一種分享渠道，但是我們能夠做的，卻不多。之前，iOS下的微信支持universal link這種喚起方式，但是從2018年1月8日之后，微信把這個給屏蔽了！！！不管微信基于什么原因，把iOS下這種最便捷的喚起方式屏蔽，我們能做的只能是適應了。so，現在不管是iOS還是android，我們的處理方式是一樣的：都是直接跳到應用寶。iOS的應用寶會引導找開AppStore，android的應用寶會直接打開App（前提是你已經下載） 注：微信把itunes鏈接也屏蔽了，所以也沒辦法直接跳轉AppStore，只能借助應用寶來搭這個橋。

微博

微博目前還支持universal link喚起，我們只需要考慮未下載的情況。

• 在iOS下，微博是不支持打開應用寶的鏈接，所以我們需要引導用戶使用Safari打開，像這樣：

添加圖片注釋，不超過 140 字（可選）

• 在android平臺下，使用scheme這種方式是喚不起App的，但是有特例，同樣是scheme，大人點評和網易云音樂就可以喚起，有空大家可以自己試試，所以我們可以推斷出，安卓平臺下的微博，也有類似微信一樣的白名單，在白名單內的，就可以使用scheme喚起，就像微信之于京東，京東在微信里面就是通過scheme方式喚起的。

so，不管是iOS還是android，我們的方案是：直接引導用戶使用本地瀏覽器打開。

QQ

• iOS平臺下，QQ目前還支持universal link喚起，要是沒有安裝，QQ下也支持直接打開itunes鏈接，比較其他應用，QQ支持是最好的。
• android平臺下，QQ也支持scheme方式喚起，但是在一些老機型下，QQ會有一定的概率喚起失敗，具體的現象是：第一次打開頁面，喚起失敗，再次打開，喚起成功。根據現象，我們可以推測出，在QQ的webview中，會對scheme的喚起方式做一些加載時間上的限制，經測試，大約在500ms，超過這個時間值，就會出現喚起失敗的情況。為什么第二次打開，喚起成功的概率會大，是因為第一次加載時，已緩存了文件，第二次打開直接加載，這樣時間在限制之內。

Safari

Safari這種情況比較簡單，支持universal link，也支持直接打開itunes，so，如圖處理就可以了。

踩坑

H2M_LI_HEADER

• 在iOS9中，Safari不支持直接跳轉itunes，so，這種情況需要做兼容處理，可以直接跳到應用寶
• 之前看喚起是不是成功了，需要自己來計算時間，因為要是喚起成功了，setInterval的時間就會變慢，經我測試，已經用不到這種方法了，只需要使用document.hidden || document.webkitHidden就可以，兼容性還不錯
• 判斷是不是Safari瀏覽器時，一般判斷都是UA中有沒有這個字符串，經測試發現，安卓的UA中，也包含Safari這個字符串（如下UA展示），所以需要加上操作系統的判斷
• 關于Scheme喚起，之前有很多方案，比如：使用iframe、<a>標簽點擊、window.location…經測試，只要使用a標簽點擊，這樣兼容性最好，代碼大約長這樣：

添加圖片注釋，不超過 140 字（可選）

關于測試

兩個平臺，這么多情況，要一個一個測試嗎？當然要一個一個的驗證，但是在開發期間，沒有必要改一行，在手機上測試一下，這樣效率太低了，尤其是像一樣，選了一個安卓4.4的手機，絕對可以磨練你的耐心。為了提高效率，我把我常用到的UA分享給大家，這樣在Chrome模擬器里配置一下，就可以本地調試了，常用UA如下：

• iOS-微信

Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN

• iOS-QQ

Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1

• iOS-微博

Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)

• iOS-safari

Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1

• android-微信

Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

• android-QQ

Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080

• android-微博

Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)

配置完成之后，就可以像我一樣，在電腦上切換環境啦：

添加圖片注釋，不超過 140 字（可選）

首先明確一下目的，是要在分享出去的html頁面，通過js操作喚醒app或者打開商店，那么第一步就應該先判斷當前的環境，這里我附上詳細的判斷方法，通用的

 var browser = {

         versions: function() {
                   var u = navigator.userAgent,
                         app = navigator.appVersion;
                   return {
                              trident: u.indexOf('Trident') > -1,                         /*IE內核*/
                             presto: u.indexOf('Presto') > -1,           /*opera內核*/
                             webKit: u.indexOf('AppleWebKit') > -1, /*蘋果、谷歌內核*/

                             gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,         /*火狐內核*/

                              mobile: !!u.match(/AppleWebKit.*Mobile.*/),        /*是否為移動終端*/

                              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), /*ios終端*/

                              android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, /*android終端或者uc瀏覽器*/

                              iPhone: u.indexOf('iPhone') > -1,           /*是否為iPhone或者QQHD瀏覽器*/
                              iPad: u.indexOf('iPad') > -1,      /*是否iPad*/

                              webApp: u.indexOf('Safari') == -1,          /*是否web應該程序，沒有頭部與底部*/
                              souyue: u.indexOf('souyue') > -1,

                              superapp: u.indexOf('superapp') > -1,

                              weixin:u.toLowerCase().indexOf('micromessenger') > -1,

                              Safari:u.indexOf('Safari') > -1

                    };

           }(),

                    language: (navigator.browserLanguage || navigator.language).toLowerCase()

 };

 
這里用到兩個判斷，一個ios一個安卓
 if (browser.versions.ios) {

              //你的代碼
 }else if (browser.versions.android){
              //你的代碼
 }

代碼

(function() {
      //這個對象在喚起app的需求中是通用的，作用是判斷當前為哪個客戶端
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1, //IE內核
                    presto: u.indexOf('Presto') > -1, //opera內核
                    webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端
                    iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web應該程序，沒有頭部與底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        };

        var appInfo = {
            iosUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"],  //當前為網頁版應用鏈接，需更換成app的跳轉鏈接
            androidUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"] //當前為網頁版應用鏈接，需更換成app的跳轉鏈接
        };

        var count = 0;
        var i = appInfo.androidUrl;
        var n = appInfo.iosUrl;
        var ele = document.getElementsByTagName('body')[0];
        ele.addEventListener('touchstart',function () {
            count++;
            if (count>=3) {
                 if (browser.versions.ios) {
                     console.log("ios");
                     window.location.href  = n[0];
                    //設置定時器的目的是如果第一個app沒有安裝，則自動跳轉第二個
                     setTimeout(function(){
                        window.location.href  = n[1];
                     },3000);
                 }else if(browser.versions.android){
                     console.log("android");
                     window.location.href  = i[0];
                     setTimeout(function(){
                         window.location.href  = i[1];
                     },3000);
                 }
            }
        });
    })();

那么接下來就應該判斷當前手機上是否有安裝某款應用，但是要知道js是無法判斷手機上是否安裝了哪款app的，所以有app打開app，沒有app跳轉到商店就可以這么做，js打開ios系統app的方法是這樣的，拿淘寶為例： taobao:// 那么同理安卓的方法也是一樣的，只不過打開app的協議不同，這個對應的打開app的協議是你們ios和安卓開發的小伙伴提供給你的，接下來的原理就是嘗試發起打開app的請求，如果有提示是否在某款app中打開，那就可以直接打開了，如果打不開那么我們就要做另外一件事情了

 if (browser.versions.ios) {

           window.location.href = "taobao://";
           setTimeout(function(){
                     window.location.href = "你的app在商店中的地址";

                     window.location.href = "你的app在商店中的地址";  //為什么要加兩遍我下面會說到

           },2000)

 }else if (browser.versions.android){

           window.location.href = "taobao://**";

           setTimeout(function(){

                     window.location.href = "你的app的下載地址";

           },2000)
 }

當然為什么要加定時器，相信大家也都知道，因為打開app是需要時間的，而js代碼瞬間就執行完畢了，當然這里還有幾個坑，ios系統第一次window.location.href嘗試打開app有時候會彈一下是否在某款app中打開之后馬上跳到商店，為了解決這個問題我加了兩遍window.location.href。哈哈管他呢，反正目的是達到了。那么安卓的話就是有的瀏覽器支持不友好。這個目前我沒什么辦法。

移動應用開發過程中，拉起第三方app是極為常見的場景之一。

那么在使用YonBuilder移動開發平臺構建app的過程中，應該怎么配置才能拉起第三方app？

接下來，我們以安卓應用打開支付寶為例，講解一下具體的配置過程。。

首先在YonBuilder移動開發平臺，找到端設置界面。

點擊編輯，可以添加支付寶，包名也將默認添加。

編輯完成之后進行保存，修改通用配置后需要重新編譯一下。

通用配置中包含了常見應用；如果沒有，則需要自己查找應用的包名進行配置。

接下來，我們就可以在代碼中調用打開第三方應用的方法了，方法具體可參考YonBuilder移動開發平臺開發者文檔。

示例代碼如下：

api.openApp({
    androidPkg: 'android.intent.action.VIEW',
    mimeType: 'text/html',
    uri: 'http://www.baidu.com'
}, function(ret, err) {
    if (ret) {
     api.alert({
     msg:JSON.stringify(ret)
  });
    } else {
       api.alert({
     msg:JSON.stringify(err)
  });
    }
});

如此一來，我們就實現了通過調用api.openApp打開第三方應用。

這里提供打開支付寶首頁的示例代碼：

api.openApp({
      androidPkg: 'com.eg.android.AlipayGphone',
      uri: 'alipay://'
}, function (ret, err) {
});

配置后可實現如下效果：

通過調用api.openApp方法，點擊按鈕后，即可跳轉到支付寶。

這里值得一提的是，打開第三方應用的時候也支持傳參數，具體可以看開發者文檔的appParam參數介紹，根據自己的需求靈活應用。