前言：

為什么我對(duì)這個(gè)突然感興趣呢，是因?yàn)樽罱谧鲂枨蟮臅r(shí)候存在H5收銀臺(tái)喚起vx/jfb app的場(chǎng)景，但在調(diào)試時(shí)總會(huì)有bug（某一個(gè)版本的應(yīng)用無法吊起支付的app），于是有了本篇的了解。

我們平時(shí)最常見的場(chǎng)景就是，在瀏覽器里看見廣告，點(diǎn)擊了廣告，他判斷你你手機(jī)裝了對(duì)應(yīng)APP，那他就會(huì)打開那個(gè)APP，如果沒安裝，他會(huì)幫你跳轉(zhuǎn)到應(yīng)用商店去下載。（沒有人性化的會(huì)直接默默在后臺(tái)給你下載，你完全沒有感知）。

讓我們一起看看是如何從H5跳轉(zhuǎn)到APP的吧~

喚端

喚端技術(shù)我們也稱之為deep link技術(shù)。當(dāng)然，不同平臺(tái)的實(shí)現(xiàn)方式有些不同，一般常見的有這幾種：

分別是：

• url schema(通用)
• universal link(ios)
• App link,chrome intents(android)

url schema

這是一種比較通用的技術(shù)，各平臺(tái)的兼容性也很好，他一般由協(xié)議名、路徑、參數(shù)組成。這個(gè)一般是由native開發(fā)的同學(xué)提供，我們前端同學(xué)拿到這個(gè)schema就可以來打開app或app內(nèi)的某個(gè)頁(yè)面了。

打開方式：

常用的由以下幾種方式：

• 直接通過window.location.href跳轉(zhuǎn)

window.location.href="zhihu://" rel="external nofollow" 

• 通過iframe跳轉(zhuǎn)

const iframe = document.createElement('iframe')
ifram.src = 'zhihu://'
dozument.body.appendChild(iframe)

• 直接使用a標(biāo)簽進(jìn)行跳轉(zhuǎn)
• 通過js brige來打開

jsb.openWebView = {
 url:'zhihu://'
}

判斷是否成功喚起：

當(dāng)用戶喚起app失敗時(shí)，我們希望可以引導(dǎo)用戶去下載，那么我們?cè)趺床拍苤喇?dāng)前app是否喚起成功呢？

我們可以監(jiān)聽當(dāng)前頁(yè)面的visibilitychange事件，如果頁(yè)面隱藏，則表示喚端成功，否則喚端失敗，跳轉(zhuǎn)到應(yīng)用商店。

ok，來嘗試一下：

首先我手機(jī)上并沒有安裝騰訊微博，所以也就無法喚起，我們讓他跳到應(yīng)用商店對(duì)應(yīng)的應(yīng)用下載頁(yè)，這里就用淘寶的下載頁(yè)代替一下：

<template>  
  <div class="open_app">  
      <div class="open_app_title">喚端測(cè)試Demo</div>  
      <div class="open_btn" @click="open">打開騰訊微博</div>  
  </div>  
</template>  
<script>  
let timer  
export default {  
    name: 'openApp',  
    methods: {  
        watchVisibility() {  
            window.addEventListener('visibilitychange', () => {  
                // 監(jiān)聽頁(yè)面visibility  
                if(document.hidden) {  
                    // 如果頁(yè)面隱藏了，則表示喚起成功，這時(shí)候需要清除下載定時(shí)器  
                    clearTimeout(timer)  
                }  
            })  
        },  
        open() {  
            timer = setTimeout(() => {  
              // 沒找到騰訊微博的下載頁(yè)，這里暫時(shí)以淘寶下載頁(yè)代替  
                window.location.href = '![]()http://apps.apple.com/cn/app/id387682726'  
            }, 3000)  
            window.location.href = 'TencentWeibo://'  
        }  
    }  
}  
</script>  
<style lang="less">  
.open_app_title {  
    font-size: (20/@rem);  
}  
.open_btn{  
    margin-top:(20/@rem);  
    padding:(10/@rem) 0;  
    border-radius: (8/@rem);  
    background: salmon;  
    color: #fff;  
    font-size: (16/@rem);  
}  
</style>

適用性：

url scheme這種方式兼容性好，無論安卓或者ios都能支持，是目前最常用的方式。但從代碼中可以看到明顯的缺點(diǎn)：

• 無法準(zhǔn)確判斷是否成功喚起，因?yàn)檫@本質(zhì)上就是打開一個(gè)鏈接，但不是普通的http鏈接，所以如果用戶沒有安裝對(duì)應(yīng)的app，那么嘗試跳轉(zhuǎn)后在瀏覽器中會(huì)沒有反應(yīng)，通過定時(shí)器來引導(dǎo)用戶跳轉(zhuǎn)到對(duì)應(yīng)應(yīng)用商店，但這個(gè)定時(shí)器的事件又沒有準(zhǔn)確值，不同的手機(jī)喚端時(shí)間也不同，我們只能大概的估計(jì)一下他的時(shí)間來實(shí)現(xiàn)....
• 容易被屏蔽，app很容易就可以攔截掉通過url schema發(fā)起的跳轉(zhuǎn)，比如微信內(nèi)經(jīng)常能看到一些屏蔽現(xiàn)象...

以上就是H5如何實(shí)現(xiàn)喚起APP的詳細(xì)內(nèi)容，更多關(guān)于H5如何實(shí)現(xiàn)喚起APP的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！