整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          干貨!javascript在移動端喚起應用的解決方案

          最近在做移動開發,碰到了在APP中喚醒微信、QQ、微博的需求,在順利解決以后,小小整理了一下,希望把這個體驗不錯,功能完善的喚起技術分享給大家,希望對大家的開發有幫助。

          需求

          用戶點擊下載按鈕或打開App的時候,判斷如果用戶已經安裝了App,則根據業務跳轉到相應的Native頁面;如果用戶沒有安裝,則跳轉到AppStore或者應用市場去下載我們的App。

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

          或是這樣:

          所有的業務判斷都是在“test”這個頁面里面來做,這樣有兩個好處:

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

          • 能夠重復利用universal link

          universal link

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

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

          經過長時間的實驗,總結了這張在各種情況下,喚起成功/喚起失敗的解決方案。

          微信

          微信是最重要的一種分享渠道,但是我們能夠做的卻不多。之前,ios 下的微信支持 universal link這種喚起方式,但是從2018年1月8日之后,微信把這個給屏蔽了

          不管微信基于什么原因,把 ios下這種最便捷的喚起方式屏蔽,我們能做的只能是適應。現在不管是iOS還是Andriod,我們的處理方式是一樣的:都是直接跳到應用寶。iOS的應用寶會引導找開 AppStore,Andriod的應用寶會直接打開App(前提是你已經下載)

          :微信把iTunes 鏈接也屏蔽了,所以也沒辦法直接跳轉 AppStore,只能借助應用寶來搭這個橋。

          微博

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

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

          在Android平臺下,使用 scheme這種方式是喚不起App的,但是有特例,同樣是scheme,大眾點評和網易云音樂就可以喚起,所以我們可以推斷出,安卓平臺下的微博,也有類似微信一樣的白名單,在白名單內的,就可以使用scheme
          方式喚起的。

          不管是ios還是Android,我們的方案是:直接引導用戶使用本地瀏覽器打開

          QQ

          ios平臺下,QQ目前還支持universal link喚起,要是沒有安裝,QQ下也支持直接打開itunes鏈接,比較其他應用,QQ支持是最好的。

          在android平臺上,QQ也支持scheme方式喚起,但是在一些老機型下,QQ會有一定的概率喚起失敗。

          具體的現象是:第一次打開頁面,喚起失敗,再次打開,喚起成功。根據現象,我們可以推測出,在QQ的webview中,會對scheme的喚起方式做一些加載時間上的限制,經測試,大約在500ms。

          為什么第二次打開,喚起成功的概率會大,是因為第一次加載時,已緩存了文件,第二次打開直接加載,這樣時間在限制在500ms之內。

          Safari

          Safari這種情況比較簡單,支持universal link,也支持直接打開itunes。

          以上就是在實際開發中總結出來的一些經驗了。希望能和大家一起交流學習進步。

          我是一枚程序員,熱愛生活,希望和大家一起學習進步。


          一般有做過移動端開發的前端都會遇到這種喚起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參數介紹,根據自己的需求靈活應用。


          主站蜘蛛池模板: 精品国产伦一区二区三区在线观看| 肉色超薄丝袜脚交一区二区| 精品人妻码一区二区三区| 日本一道高清一区二区三区| 亚洲欧洲精品一区二区三区| 久久99久久无码毛片一区二区| 波多野结衣AV一区二区三区中文| 中文字幕一区二区人妻性色 | 鲁丝片一区二区三区免费| 成人在线一区二区| 亚洲日韩精品无码一区二区三区| 无码日韩人妻AV一区免费l| 国产成人综合精品一区| 国产在线视频一区二区三区98| 亚洲av一综合av一区| 国产精品综合AV一区二区国产馆| 韩国女主播一区二区| 精品国产毛片一区二区无码| 久久久精品一区二区三区 | 国产精品被窝福利一区 | 中文字幕人妻AV一区二区| 无码中文字幕乱码一区 | 中文字幕一区在线观看视频| 欧美日韩精品一区二区在线观看| 老鸭窝毛片一区二区三区| 久久久久成人精品一区二区| 天天综合色一区二区三区| 国精产品一区一区三区免费视频 | 黑巨人与欧美精品一区| 一区五十路在线中出| 亚洲视频一区网站| 一区二区三区波多野结衣| 久久国产精品无码一区二区三区 | 亚洲av无码不卡一区二区三区| 精品成人乱色一区二区| 精品一区二区三区水蜜桃| 91精品一区二区| 亚洲国产精品一区二区成人片国内 | 一区二区三区观看免费中文视频在线播放 | 亚洲Av无码一区二区二三区| 精品国产亚洲一区二区在线观看|