整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
最近在做移動(dòng)開(kāi)發(fā)，碰到了在APP中喚醒微信、QQ、微博的需求，在順利解決以后，小小整理了一下，希望把這個(gè)體驗(yàn)不錯(cuò)，功能完善的喚起技術(shù)分享給大家，希望對(duì)大家的開(kāi)發(fā)有幫助。
用戶點(diǎn)擊下載按鈕或打開(kāi)App的時(shí)候，判斷如果用戶已經(jīng)安裝了App，則根據(jù)業(yè)務(wù)跳轉(zhuǎn)到相應(yīng)的Native頁(yè)面；如果用戶沒(méi)有安裝，則跳轉(zhuǎn)到AppStore或者應(yīng)用市場(chǎng)去下載我們的App。
首先所有的下載/喚起入口都是一個(gè)直接跳轉(zhuǎn)，應(yīng)該是這樣：
或是這樣：
所有的業(yè)務(wù)判斷都是在“test”這個(gè)頁(yè)面里面來(lái)做，這樣有兩個(gè)好處：
多業(yè)務(wù)共用代碼。在一個(gè)團(tuán)隊(duì)中，每個(gè)人的業(yè)務(wù)都可能有一個(gè)banner下載，沒(méi)有比location到一個(gè)url更簡(jiǎn)單的調(diào)用方式了
能夠重復(fù)利用universal link
在iOS9之前，喚起方式和現(xiàn)在安卓是一個(gè)的，都是使用 scheme 進(jìn)行喚起，這種方式有個(gè)問(wèn)題：每次喚起，都會(huì)給個(gè)提示是否打開(kāi)xx應(yīng)用，這樣從體驗(yàn)上來(lái)講，又讓用戶多一步操作。universal link 會(huì)直接跳轉(zhuǎn)，不會(huì)在頁(yè)面做停留，條件就是在我們項(xiàng)目的根目錄，增一個(gè) apple-app-site-association.json 文件，里面的內(nèi)容大致是這樣：
然后iOS的App后臺(tái)再配置一下，就可以實(shí)現(xiàn)直接喚起了！
經(jīng)過(guò)長(zhǎng)時(shí)間的實(shí)驗(yàn)，總結(jié)了這張?jiān)诟鞣N情況下，喚起成功/喚起失敗的解決方案。
微信
微信是最重要的一種分享渠道，但是我們能夠做的卻不多。之前，ios 下的微信支持 universal link這種喚起方式，但是從2018年1月8日之后，微信把這個(gè)給屏蔽了！
不管微信基于什么原因，把 ios下這種最便捷的喚起方式屏蔽，我們能做的只能是適應(yīng)。現(xiàn)在不管是iOS還是Andriod，我們的處理方式是一樣的：都是直接跳到應(yīng)用寶。iOS的應(yīng)用寶會(huì)引導(dǎo)找開(kāi) AppStore，Andriod的應(yīng)用寶會(huì)直接打開(kāi)App（前提是你已經(jīng)下載）
注：微信把iTunes 鏈接也屏蔽了，所以也沒(méi)辦法直接跳轉(zhuǎn) AppStore，只能借助應(yīng)用寶來(lái)搭這個(gè)橋。
微博
微博目前還支持universal link 喚起，我們只需要考慮未下載的情況。
在ios下，微博是不支持打開(kāi)應(yīng)用寶的鏈接，所以我們需要引導(dǎo)用戶使用Safari打開(kāi)，像這樣：
在Android平臺(tái)下，使用 scheme這種方式是喚不起App的，但是有特例，同樣是scheme，大眾點(diǎn)評(píng)和網(wǎng)易云音樂(lè)就可以喚起，所以我們可以推斷出，安卓平臺(tái)下的微博，也有類似微信一樣的白名單，在白名單內(nèi)的，就可以使用scheme
方式喚起的。
不管是ios還是Android，我們的方案是：直接引導(dǎo)用戶使用本地瀏覽器打開(kāi)。
具體的現(xiàn)象是：第一次打開(kāi)頁(yè)面，喚起失敗，再次打開(kāi)，喚起成功。根據(jù)現(xiàn)象，我們可以推測(cè)出，在QQ的webview中，會(huì)對(duì)scheme的喚起方式做一些加載時(shí)間上的限制，經(jīng)測(cè)試，大約在500ms。
為什么第二次打開(kāi)，喚起成功的概率會(huì)大，是因?yàn)榈谝淮渭虞d時(shí)，已緩存了文件，第二次打開(kāi)直接加載，這樣時(shí)間在限制在500ms之內(nèi)。
Safari這種情況比較簡(jiǎn)單，支持universal link，也支持直接打開(kāi)itunes。
以上就是在實(shí)際開(kāi)發(fā)中總結(jié)出來(lái)的一些經(jīng)驗(yàn)了。希望能和大家一起交流學(xué)習(xí)進(jìn)步。
我是一枚程序員，熱愛(ài)生活，希望和大家一起學(xué)習(xí)進(jìn)步。
言
一般有做過(guò)移動(dòng)端開(kāi)發(fā)的前端都會(huì)遇到這種喚起App的問(wèn)題，這篇總結(jié)的很齊全。今日早讀由時(shí)光網(wǎng)@會(huì)說(shuō)話的魚(yú) 授權(quán)分享。
@會(huì)說(shuō)話的魚(yú)，就職于時(shí)光網(wǎng)，前端負(fù)責(zé)人。推崇效率至上，對(duì)一切可提升組內(nèi)工作效率技術(shù)都感興趣。Java與Nodejs愛(ài)好者，擅長(zhǎng)前端架構(gòu)，在全網(wǎng)性能優(yōu)化、類庫(kù)研發(fā)、知識(shí)沉淀、工具應(yīng)用等方面取得了豐碩成果。
正文從這開(kāi)始～
最近在做微信、QQ、微博中使用js喚起App，之前也做過(guò)類似的功能，不過(guò)比較粗糙，考慮的情況不太全，而且那已經(jīng)是很久之前的事情了，很多技術(shù)都已過(guò)時(shí)，現(xiàn)在有體驗(yàn)更好，功能更加完善的喚起技術(shù)，之前的很多的方案，到了現(xiàn)在都已是不太必要了，現(xiàn)在通過(guò)這篇文章分享給大家一個(gè)全面的、最新的喚起方案，希望對(duì)大家有幫忙。
用戶點(diǎn)擊打開(kāi)App或者下載按鈕（這個(gè)按鈕可能在一個(gè)下載入口頁(yè)、各種分享頁(yè)面的吸頂或吸底的banner），如果用戶已經(jīng)安裝了App，則根據(jù)業(yè)務(wù)跳轉(zhuǎn)到相應(yīng)的Native頁(yè)面；如果用戶沒(méi)有安裝該應(yīng)用，則跳到AppStore或者應(yīng)用市場(chǎng)去下載我們的App。
編輯切換為居中
添加圖片注釋，不超過(guò) 140 字（可選）
首先所有的下載/喚起入口都是一個(gè)直接跳轉(zhuǎn)，應(yīng)該是這樣：
<ahref="https://applink-party.mtime.cn/mtlf">下載</a>或者這樣：
window.location.href = 'https://applink-party.mtime.cn/mtlf'所有的業(yè)務(wù)判斷都是mtlf這個(gè)頁(yè)面里面來(lái)做，這樣有兩個(gè)好處：
在iOS9之前，喚起方式和現(xiàn)在安卓是一個(gè)的，都是使用scheme進(jìn)行喚起，這種方式有個(gè)小問(wèn)題，每次喚起，都會(huì)給個(gè)提示：是否打開(kāi)xx應(yīng)用，這樣從體驗(yàn)上來(lái)講，又讓用戶多一步操作。universal link會(huì)直接跳轉(zhuǎn)，不會(huì)在頁(yè)面做停留，條件就是在我們項(xiàng)目的根目錄，增一個(gè)apple-app-site-association.json文件，里面的內(nèi)容大致是這樣：
添加圖片注釋，不超過(guò) 140 字（可選）
然后iOS的App后臺(tái)再配置一下，就可以實(shí)現(xiàn)直接喚起了！
添加圖片注釋，不超過(guò) 140 字（可選）
微信是最重要的一種分享渠道，但是我們能夠做的，卻不多。之前，iOS下的微信支持universal link這種喚起方式，但是從2018年1月8日之后，微信把這個(gè)給屏蔽了！！！不管微信基于什么原因，把iOS下這種最便捷的喚起方式屏蔽，我們能做的只能是適應(yīng)了。so，現(xiàn)在不管是iOS還是android，我們的處理方式是一樣的：都是直接跳到應(yīng)用寶。iOS的應(yīng)用寶會(huì)引導(dǎo)找開(kāi)AppStore，android的應(yīng)用寶會(huì)直接打開(kāi)App（前提是你已經(jīng)下載） 注：微信把itunes鏈接也屏蔽了，所以也沒(méi)辦法直接跳轉(zhuǎn)AppStore，只能借助應(yīng)用寶來(lái)搭這個(gè)橋。
微博目前還支持universal link喚起，我們只需要考慮未下載的情況。
添加圖片注釋，不超過(guò) 140 字（可選）
so，不管是iOS還是android，我們的方案是：直接引導(dǎo)用戶使用本地瀏覽器打開(kāi)。
Safari這種情況比較簡(jiǎn)單，支持universal link，也支持直接打開(kāi)itunes，so，如圖處理就可以了。
H2M_LI_HEADER
添加圖片注釋，不超過(guò) 140 字（可選）
兩個(gè)平臺(tái)，這么多情況，要一個(gè)一個(gè)測(cè)試嗎？當(dāng)然要一個(gè)一個(gè)的驗(yàn)證，但是在開(kāi)發(fā)期間，沒(méi)有必要改一行，在手機(jī)上測(cè)試一下，這樣效率太低了，尤其是像一樣，選了一個(gè)安卓4.4的手機(jī)，絕對(duì)可以磨練你的耐心。為了提高效率，我把我常用到的UA分享給大家，這樣在Chrome模擬器里配置一下，就可以本地調(diào)試了，常用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_CNMozilla/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/1Mozilla/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.1Mozilla/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_CNMozilla/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/1080Mozilla/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)配置完成之后，就可以像我一樣，在電腦上切換環(huán)境啦：
添加圖片注釋，不超過(guò) 140 字（可選）
首先明確一下目的，是要在分享出去的html頁(yè)面，通過(guò)js操作喚醒a(bǔ)pp或者打開(kāi)商店，那么第一步就應(yīng)該先判斷當(dāng)前的環(huán)境，這里我附上詳細(xì)的判斷方法，通用的
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, /*IE內(nèi)核*/
presto: u.indexOf('Presto') > -1, /*opera內(nèi)核*/
webKit: u.indexOf('AppleWebKit') > -1, /*蘋(píng)果、谷歌內(nèi)核*/
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, /*火狐內(nèi)核*/
mobile: !!u.match(/AppleWebKit.*Mobile.*/), /*是否為移動(dòng)終端*/
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應(yīng)該程序，沒(méi)有頭部與底部*/
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()
};
這里用到兩個(gè)判斷，一個(gè)ios一個(gè)安卓
if (browser.versions.ios) {
//你的代碼
}else if (browser.versions.android){
//你的代碼
}(function() {
//這個(gè)對(duì)象在喚起app的需求中是通用的，作用是判斷當(dāng)前為哪個(gè)客戶端
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE內(nèi)核
presto: u.indexOf('Presto') > -1, //opera內(nèi)核
webKit: u.indexOf('AppleWebKit') > -1, //蘋(píng)果、谷歌內(nèi)核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內(nèi)核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端
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應(yīng)該程序，沒(méi)有頭部與底部
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/?"], //當(dāng)前為網(wǎng)頁(yè)版應(yīng)用鏈接，需更換成app的跳轉(zhuǎn)鏈接
androidUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"] //當(dāng)前為網(wǎng)頁(yè)版應(yīng)用鏈接，需更換成app的跳轉(zhuǎn)鏈接
};
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];
//設(shè)置定時(shí)器的目的是如果第一個(gè)app沒(méi)有安裝，則自動(dòng)跳轉(zhuǎn)第二個(gè)
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);
}
}
});
})();那么接下來(lái)就應(yīng)該判斷當(dāng)前手機(jī)上是否有安裝某款應(yīng)用，但是要知道js是無(wú)法判斷手機(jī)上是否安裝了哪款app的，所以有app打開(kāi)app，沒(méi)有app跳轉(zhuǎn)到商店就可以這么做，js打開(kāi)ios系統(tǒng)app的方法是這樣的，拿淘寶為例： taobao:// 那么同理安卓的方法也是一樣的，只不過(guò)打開(kāi)app的協(xié)議不同，這個(gè)對(duì)應(yīng)的打開(kāi)app的協(xié)議是你們ios和安卓開(kāi)發(fā)的小伙伴提供給你的，接下來(lái)的原理就是嘗試發(fā)起打開(kāi)app的請(qǐng)求，如果有提示是否在某款app中打開(kāi)，那就可以直接打開(kāi)了，如果打不開(kāi)那么我們就要做另外一件事情了
if (browser.versions.ios) {
window.location.href = "taobao://";
setTimeout(function(){
window.location.href = "你的app在商店中的地址";
window.location.href = "你的app在商店中的地址"; //為什么要加兩遍我下面會(huì)說(shuō)到
},2000)
}else if (browser.versions.android){
window.location.href = "taobao://**";
setTimeout(function(){
window.location.href = "你的app的下載地址";
},2000)
}當(dāng)然為什么要加定時(shí)器，相信大家也都知道，因?yàn)榇蜷_(kāi)app是需要時(shí)間的，而js代碼瞬間就執(zhí)行完畢了，當(dāng)然這里還有幾個(gè)坑，ios系統(tǒng)第一次window.location.href嘗試打開(kāi)app有時(shí)候會(huì)彈一下是否在某款app中打開(kāi)之后馬上跳到商店，為了解決這個(gè)問(wèn)題我加了兩遍window.location.href。哈哈管他呢，反正目的是達(dá)到了。那么安卓的話就是有的瀏覽器支持不友好。這個(gè)目前我沒(méi)什么辦法。
移動(dòng)應(yīng)用開(kāi)發(fā)過(guò)程中，拉起第三方app是極為常見(jiàn)的場(chǎng)景之一。
那么在使用YonBuilder移動(dòng)開(kāi)發(fā)平臺(tái)構(gòu)建app的過(guò)程中，應(yīng)該怎么配置才能拉起第三方app？
接下來(lái)，我們以安卓應(yīng)用打開(kāi)支付寶為例，講解一下具體的配置過(guò)程。。
首先在YonBuilder移動(dòng)開(kāi)發(fā)平臺(tái)，找到端設(shè)置界面。
點(diǎn)擊編輯，可以添加支付寶，包名也將默認(rèn)添加。
編輯完成之后進(jìn)行保存，修改通用配置后需要重新編譯一下。
通用配置中包含了常見(jiàn)應(yīng)用；如果沒(méi)有，則需要自己查找應(yīng)用的包名進(jìn)行配置。
接下來(lái)，我們就可以在代碼中調(diào)用打開(kāi)第三方應(yīng)用的方法了，方法具體可參考YonBuilder移動(dòng)開(kāi)發(fā)平臺(tái)開(kāi)發(fā)者文檔。
示例代碼如下：
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)
});
}
});如此一來(lái)，我們就實(shí)現(xiàn)了通過(guò)調(diào)用api.openApp打開(kāi)第三方應(yīng)用。
這里提供打開(kāi)支付寶首頁(yè)的示例代碼：
api.openApp({
androidPkg: 'com.eg.android.AlipayGphone',
uri: 'alipay://'
}, function (ret, err) {
});配置后可實(shí)現(xiàn)如下效果：
通過(guò)調(diào)用api.openApp方法，點(diǎn)擊按鈕后，即可跳轉(zhuǎn)到支付寶。
這里值得一提的是，打開(kāi)第三方應(yīng)用的時(shí)候也支持傳參數(shù)，具體可以看開(kāi)發(fā)者文檔的appParam參數(shù)介紹，根據(jù)自己的需求靈活應(yīng)用。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
