最近在做移動開發,碰到了在APP中喚醒微信、QQ、微博的需求,在順利解決以后,小小整理了一下,希望把這個體驗不錯,功能完善的喚起技術分享給大家,希望對大家的開發有幫助。
用戶點擊下載按鈕或打開App的時候,判斷如果用戶已經安裝了App,則根據業務跳轉到相應的Native頁面;如果用戶沒有安裝,則跳轉到AppStore或者應用市場去下載我們的App。
首先所有的下載/喚起入口都是一個直接跳轉,應該是這樣:
或是這樣:
所有的業務判斷都是在“test”這個頁面里面來做,這樣有兩個好處:
多業務共用代碼。在一個團隊中,每個人的業務都可能有一個banner下載,沒有比location到一個url更簡單的調用方式了
能夠重復利用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的webview中,會對scheme的喚起方式做一些加載時間上的限制,經測試,大約在500ms。
為什么第二次打開,喚起成功的概率會大,是因為第一次加載時,已緩存了文件,第二次打開直接加載,這樣時間在限制在500ms之內。
Safari這種情況比較簡單,支持universal link,也支持直接打開itunes。
以上就是在實際開發中總結出來的一些經驗了。希望能和大家一起交流學習進步。
我是一枚程序員,熱愛生活,希望和大家一起學習進步。
言
一般有做過移動端開發的前端都會遇到這種喚起App的問題,這篇總結的很齊全。今日早讀由時光網@會說話的魚 授權分享。
@會說話的魚,就職于時光網,前端負責人。推崇效率至上,對一切可提升組內工作效率技術都感興趣。Java與Nodejs愛好者,擅長前端架構,在全網性能優化、類庫研發、知識沉淀、工具應用等方面取得了豐碩成果。
正文從這開始~
最近在做微信、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這個頁面里面來做,這樣有兩個好處:
在iOS9之前,喚起方式和現在安卓是一個的,都是使用scheme進行喚起,這種方式有個小問題,每次喚起,都會給個提示:是否打開xx應用,這樣從體驗上來講,又讓用戶多一步操作。universal link會直接跳轉,不會在頁面做停留,條件就是在我們項目的根目錄,增一個apple-app-site-association.json文件,里面的內容大致是這樣:
添加圖片注釋,不超過 140 字(可選)
然后iOS的App后臺再配置一下,就可以實現直接喚起了!
添加圖片注釋,不超過 140 字(可選)
微信是最重要的一種分享渠道,但是我們能夠做的,卻不多。之前,iOS下的微信支持universal link這種喚起方式,但是從2018年1月8日之后,微信把這個給屏蔽了!!!不管微信基于什么原因,把iOS下這種最便捷的喚起方式屏蔽,我們能做的只能是適應了。so,現在不管是iOS還是android,我們的處理方式是一樣的:都是直接跳到應用寶。iOS的應用寶會引導找開AppStore,android的應用寶會直接打開App(前提是你已經下載) 注:微信把itunes鏈接也屏蔽了,所以也沒辦法直接跳轉AppStore,只能借助應用寶來搭這個橋。
微博目前還支持universal link喚起,我們只需要考慮未下載的情況。
添加圖片注釋,不超過 140 字(可選)
so,不管是iOS還是android,我們的方案是:直接引導用戶使用本地瀏覽器打開。
Safari這種情況比較簡單,支持universal link,也支持直接打開itunes,so,如圖處理就可以了。
H2M_LI_HEADER
添加圖片注釋,不超過 140 字(可選)
兩個平臺,這么多情況,要一個一個測試嗎?當然要一個一個的驗證,但是在開發期間,沒有必要改一行,在手機上測試一下,這樣效率太低了,尤其是像一樣,選了一個安卓4.4的手機,絕對可以磨練你的耐心。為了提高效率,我把我常用到的UA分享給大家,這樣在Chrome模擬器里配置一下,就可以本地調試了,常用UA如下:
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
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
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)
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
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
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
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參數介紹,根據自己的需求靈活應用。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。