在移動(dòng)互聯(lián)網(wǎng)時(shí)代，h5網(wǎng)頁是一個(gè)非常重要的載體，不僅可以快速構(gòu)建出各種功能，而且可以讓用戶直接通過瀏覽器訪問，節(jié)省部分用戶下載應(yīng)用的流量和時(shí)間，但很多功能還是需要通過特定的應(yīng)用程序才能實(shí)現(xiàn)，這個(gè)時(shí)候就需要在h5網(wǎng)頁中喚醒a(bǔ)pp。本文將從原理、實(shí)現(xiàn)和適用場(chǎng)景三個(gè)方面詳細(xì)介紹。
一、原理
h5網(wǎng)頁喚醒a(bǔ)pp的原理主要是通利用h5做app過瀏覽器和app之間的url scheme來實(shí)現(xiàn)，網(wǎng)絡(luò)上很多app的喚醒就是這種方式。url scheme 是一種自定義的協(xié)議，可以在app中注冊(cè)，當(dāng)其他應(yīng)用或網(wǎng)頁發(fā)起對(duì)該scheme的請(qǐng)求時(shí)，系統(tǒng)就會(huì)調(diào)用該應(yīng)用。
比如支付寶的切換到APP支付功能，就是通過以下scheme實(shí)現(xiàn)：
“`
alipays://platformapi/startapp?appId=20000067&url=http%3A%2F%2Fwww.taobao.com%2F
“`
其中“alipays”為支付寶的scheme，后面的參數(shù)為該app需要的參數(shù)，通過encodeURI()對(duì)url進(jìn)行編碼，保證url中的參數(shù)符合規(guī)范，具體參數(shù)和編碼方式需要和app對(duì)接方案確認(rèn)。
二、實(shí)現(xiàn)
1.通過a標(biāo)簽實(shí)現(xiàn)
一般情況下，h5網(wǎng)頁中需要喚醒a(bǔ)pp的地方都會(huì)添加一個(gè)按鈕或者鏈接，這時(shí)候可以通過使用a標(biāo)簽及其特定的href屬性來實(shí)現(xiàn)。
“`
“`
通過這種方式實(shí)現(xiàn)的喚起app，當(dāng)用戶手機(jī)中沒有該app時(shí)，會(huì)進(jìn)入到網(wǎng)頁。
2.通過js實(shí)現(xiàn)
在一些應(yīng)用場(chǎng)景下，需要在用戶點(diǎn)擊特定的東西時(shí)，才喚醒a(bǔ)pp，這時(shí)候就需要通過js來實(shí)現(xiàn)。
“`
function openApp(){
var state = null;
try {
state = window.open(“alipays://”);//如果喚醒成功，會(huì)直接跳轉(zhuǎn)到支付寶
} catch (
e) {}
if (state) {
setTimeout(function() {
window.close();//關(guān)閉網(wǎng)頁，防止頁面殘留
}, 500); //喚起授權(quán)跳轉(zhuǎn)到支付界面需要0.5秒，所以這里設(shè)置了500ms的延遲
} else {
免費(fèi)h5制作app下載 window.location.href = ‘https://www.alipay.com’;//如果喚醒失敗，就跳轉(zhuǎn)到支付寶官網(wǎng)下載頁面
}
}
“`
通過這種方式實(shí)現(xiàn)，可以在喚起app失敗時(shí)，提供下載鏈接或者跳轉(zhuǎn)到指定頁面，避免用戶進(jìn)入一個(gè)無法響應(yīng)的網(wǎng)頁。
三、適用場(chǎng)景
1.需要與app交互的功能，如跳轉(zhuǎn)到特定界面、獲取app中的信息等等。
2.需要采用app特有的硬件設(shè)備，如攝像頭、傳感器等等。
3.需要提供更好的用戶體驗(yàn)，如加速頁面響應(yīng)等等。
總之，在選擇是否需要在h5頁面中喚起app時(shí)，需要根據(jù)具體的場(chǎng)景來選擇相應(yīng)的方案，同時(shí)要提供好的用戶體驗(yàn)，不影響用戶體驗(yàn)。
