場(chǎng)景描述
在 h5 頁(yè)面上，用戶(hù)點(diǎn)擊打開(kāi)app按鈕火架，如果已經(jīng)安裝了App則打開(kāi)app，否則引導(dǎo)用戶(hù)前往應(yīng)用市場(chǎng)纺弊。
思路
在 h5 頁(yè)面上喚醒a(bǔ)pp 骡男，需要用到 scheme協(xié)議（由app端提供）隔盛，但是在微信瀏覽器里scheme不起作用(微信現(xiàn)在可以通過(guò)微信開(kāi)放標(biāo)簽實(shí)現(xiàn))，因此需要先判斷是否為微信瀏覽器腊脱，是微信瀏覽器的話龙亲，提示到瀏覽器打開(kāi)，不是的話杜耙，再判斷是Android端還是iOS端迎膜，然后嘗試scheme協(xié)議喚醒a(bǔ)pp，如果喚醒失敗再轉(zhuǎn)向應(yīng)用市場(chǎng)珊豹。
實(shí)現(xiàn)
var u = navigator.userAgent;
var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信內(nèi)
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
// 微信內(nèi)
if (isWeixin) {
alert('請(qǐng)?jiān)跒g覽器上打開(kāi)')
} else {
//android端
if (isAndroid) {
//安卓app的scheme協(xié)議
window.location.href = 'taobao://';
setTimeout(function () {
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//應(yīng)用寶下載地址 (emmm 找不到淘寶應(yīng)用寶的地址店茶，這里放的是 lucky coffee 地址)
window.location.;
}
}, 2000);
}
//ios端
if (isIOS) {
//ios的scheme協(xié)議
window.location.href = 'taobao://'
setTimeout(function () {
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//App store下載地址
window.location.;
}
}, 2000);
}
}
URL Scheme協(xié)議
URL Scheme是一種頁(yè)面內(nèi)跳轉(zhuǎn)協(xié)議贩幻，通過(guò)這個(gè)協(xié)議可以比較方便的跳轉(zhuǎn)到app某一個(gè)頁(yè)面。
[scheme]://[host][:port]/[path]?[query]
scheme: 協(xié)議名稱(chēng)（由開(kāi)發(fā)人員自定義）(必要族壳，其他都是可選)
host: 域名
port：端口
path: 頁(yè)面路徑
query： 請(qǐng)求參數(shù)
調(diào)用：
例如我們?cè)?h5 頁(yè)面上點(diǎn)擊一個(gè)喚醒a(bǔ)pp按鈕仿荆，如下：
<a href="yc://ycbjie:8888/from?type=yangchong">打開(kāi)叮咚app</a>
那么這個(gè)協(xié)議鏈接的來(lái)源坏平，即原生app的設(shè)置，是長(zhǎng)這樣的：
<activity
android:name=".ui.main.ui.activity.SchemeFirstActivity"
android:screenOrientation="portrait">
<!--Android 接收外部跳轉(zhuǎn)過(guò)濾器-->
<!--要想在別的App上能成功調(diào)起App令境，必須添加intent過(guò)濾器-->
<intent-filter>
<!-- 協(xié)議部分配置 ,注意需要跟web配置相同-->
<!--協(xié)議部分舔庶，隨便設(shè)置 yc://ycbjie:8888/from?type=yangchong -->
<data android:scheme="yc"
android:host="ycbjie"
android:path="/from"
android:port="8888"/>
<!--下面這幾行也必須得設(shè)置-->
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<action android:name="android.intent.action.VIEW" />
</intent-filter>
</activity>
需要原生app上先設(shè)置好了這些，h5上才能喚醒a(bǔ)pp陈醒。
作者：liwuwuzhi
鏈接：http://www.reibang.com/p/21380058d609
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有孵延。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)尘应，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處吼虎。
