H5如何實現(xiàn)喚起APP及調(diào)試bug解決

更新時間：2023年05月11日 08:29:12 作者：霍格沃茨魔法師

這篇文章主要為大家介紹了H5如何實現(xiàn)喚起APP及調(diào)試bug解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言：

為什么我對這個突然感興趣呢，是因為最近在做需求的時候存在H5收銀臺喚起vx/jfb app的場景，但在調(diào)試時總會有bug（某一個版本的應用無法吊起支付的app），于是有了本篇的了解。

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

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

喚端

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

分別是：

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

url schema

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

標題
APP	微信	支付寶	淘寶
url schema	weixin://	alipay://	taobao://

打開方式：

常用的由以下幾種方式：

直接通過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標簽進行跳轉(zhuǎn)
通過js brige來打開

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

判斷是否成功喚起：

當用戶喚起app失敗時，我們希望可以引導用戶去下載，那么我們怎么才能知道當前app是否喚起成功呢？

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

ok，來嘗試一下：

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

<template>  
  <div class="open_app">  
      <div class="open_app_title">喚端測試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)聽頁面visibility  
                if(document.hidden) {  
                    // 如果頁面隱藏了，則表示喚起成功，這時候需要清除下載定時器  
                    clearTimeout(timer)  
                }  
            })  
        },  
        open() {  
            timer = setTimeout(() => {  
              // 沒找到騰訊微博的下載頁，這里暫時以淘寶下載頁代替  
                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都能支持，是目前最常用的方式。但從代碼中可以看到明顯的缺點：

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

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

您可能感興趣的文章: