H5對(duì)接快應(yīng)用踩坑記錄

背景

2018 年 3 月份，由小米，OPPO，vivo，華為等 10 家國內(nèi)主流廠商成立了快應(yīng)用聯(lián)盟，從技術(shù)規(guī)范層面做了統(tǒng)一，并保證了開發(fā)者開發(fā)的快應(yīng)用可以直接在所有的聯(lián)盟內(nèi)廠商的手機(jī)設(shè)備上運(yùn)行。快應(yīng)用是介于網(wǎng)頁和原生直接的，直達(dá)用戶的應(yīng)用，無需安裝app，可以在操作系統(tǒng)層面形成用戶需求與應(yīng)用服務(wù)的無縫連接，很多只用在原生應(yīng)用中才能使用的功能，在快應(yīng)用中可以很方便的實(shí)現(xiàn)。

這是快應(yīng)用文檔的介紹，看起來很不錯(cuò)是不是，原生太重，網(wǎng)頁能調(diào)用系統(tǒng)層面的東西太少，技術(shù)層面來看快應(yīng)用兩者的優(yōu)點(diǎn)都有。
但是---由于各廠商表現(xiàn)不完全一致，甚至版本不一致，遇到問題再網(wǎng)上能搜到明確答案的也很少，并且有些已經(jīng)過時(shí)，所以在快應(yīng)用的開發(fā)和對(duì)接過程中，著實(shí)是踩了不少坑。現(xiàn)在是2022年2月，快應(yīng)用平臺(tái)的最新的版本是1100版本，記錄下遇到的一些需要注意的問題。

快應(yīng)用和h5的通信

此次用到的主要是 web 組件，web 組件快應(yīng)用是用來內(nèi)嵌 h5 鏈接。在 h5 和快應(yīng)用之間建立橋接，然后通信，使 h5 得以調(diào)用快應(yīng)用的能力來進(jìn)行操作。
這里的通信和iframe通信形式差不多，h5 可以使用 system.onmessage 監(jiān)聽接收快應(yīng)用發(fā)送的消息，system.postMessage 發(fā)消息到快應(yīng)用，推送和監(jiān)聽收到的消息進(jìn)行處理。web 組件，快應(yīng)用收到消息之后需要異步處理這些消息，執(zhí)行想要的操作，調(diào)用快應(yīng)用的相關(guān)能力。

H5跳快應(yīng)用方式

js跳轉(zhuǎn)

加載js，用js里的方法跳轉(zhuǎn)，方法掛載到window下的，沒有window對(duì)象的，像小程序想要跳快應(yīng)用可能就沒法做到了

<script type="text/javascript" src="http://statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
appRouter(pkgName, quickappPath,{url})

deeplink 跳轉(zhuǎn)

deeplink 支持的格式

● http://hapjs.org/app/<package>/[path][?key=value]
● https://hapjs.org/app/<package>/[path][?key=value]
● hap://app/<package>/[path][?key=value]
● hwfastapp://<package>/[path][?key=value]  // 此種方式只支持華為

兩種跳轉(zhuǎn)方式的不同

channelReady 平臺(tái)上快應(yīng)用能力檢測，如支持快應(yīng)用服務(wù)則返回 true 值，否則則返回 false 值，但 true 不代表一定能跳轉(zhuǎn)成功，所以一定要做好跳轉(zhuǎn)不成功的情況處理。不可全依賴 channelReady 華為都會(huì)返回true，但不是所有的都能跳轉(zhuǎn)成功

channelReady &&
  channelReady(bAvailable => {
  // 機(jī)型是否支持快應(yīng)用
  if (bAvailable) {
    // appRouter 方法跳和deeplink同時(shí)跳轉(zhuǎn) -- 測試線里dplink會(huì)跳測試 js是直接跳正式快應(yīng)用環(huán)境
    // deeplink 跳轉(zhuǎn)
    window.location.href = `hap://app/${pkgName}/${quickappPath}?url=${encodeURIComponent(url)}`
    // js 跳轉(zhuǎn)
    appRouter(pkgName, quickappPath, {url})
  } else {
    window.location.href = 'xxxx' // 跳轉(zhuǎn)兜底網(wǎng)頁
  }
})

華為的js跳轉(zhuǎn)有限制，點(diǎn)擊看文檔

華為js只支持麒麟芯片的機(jī)型跳轉(zhuǎn)。。。

在調(diào)試器里表現(xiàn)都一樣，是直接跳快應(yīng)用預(yù)覽版，但是如果說想走全流程h5跳轉(zhuǎn)到快應(yīng)用的時(shí)候，某些機(jī)型 js 跳轉(zhuǎn)的方式會(huì)直接跳轉(zhuǎn)到正式的快應(yīng)用，deeplink 則會(huì)在跳轉(zhuǎn)之前詢問使用什么加載器跳轉(zhuǎn)，用 deeplink 方便測試，不至于測試流程也直接跳轉(zhuǎn)正式快應(yīng)用環(huán)境。
同時(shí)寫 deeplink 和 js 跳轉(zhuǎn)，個(gè)別機(jī)型可能會(huì)跳兩次。

跳轉(zhuǎn)方式兼容性

各個(gè)渠道廠商支持的跳轉(zhuǎn)方式不一致
各個(gè)app內(nèi)表現(xiàn)也可能不一致（微信/支付寶/瀏覽器）
參數(shù)過長可能會(huì)無法跳轉(zhuǎn)，并且廠商、機(jī)型、渠道、跳轉(zhuǎn)方式表現(xiàn)不一致。js跳轉(zhuǎn)方式可能會(huì)出現(xiàn)無法跳轉(zhuǎn)的情況，deeplink有總長度932字節(jié)的限制

deeplink拼接的url路徑需要轉(zhuǎn)碼，否則一些機(jī)型會(huì)加載不出來

比如想要在快應(yīng)用里通過 webview 加載一個(gè) h5 頁面，H5 跳轉(zhuǎn)到這個(gè)內(nèi)嵌 webview 的快應(yīng)用，dplink 通過 key=value 來傳參 url=xxx，在一些機(jī)型里，這個(gè)鏈接需要轉(zhuǎn)碼，否則會(huì)加載白屏。同時(shí)需要注意只有deeplink 方法跳轉(zhuǎn)的時(shí)候才需要encode url。

快應(yīng)用加載在某些機(jī)型出現(xiàn)白屏

快應(yīng)用平臺(tái)版本

上面碰到的一些問題基本都是除華為外的其他機(jī)型出現(xiàn)，華為基本都能正常流程走下來，正式版也是最新的版本。
尤其要注意的是其他廠商的快應(yīng)用平臺(tái)的版本基本都低于華為的版本，例如現(xiàn)在華為快應(yīng)用的最新版是 1100 版本，但是小米、vivo 這些的正式版基本都是1090+，還未更新到最新版，所以如果使用到 1100 版本里的特性的話一定要做降級(jí)判斷處理，不然在小米等機(jī)型下就會(huì)直接出現(xiàn)快應(yīng)用加載白屏。
開發(fā)時(shí)需要注意一些特性的版本，例如下載 downloadtask 是 1100 新增的特性，直接使用的話就會(huì)在低于該版本的快應(yīng)用加載白屏。可以根據(jù) 設(shè)備信息 device 獲取平臺(tái)版本來進(jìn)行降級(jí)兼容處理。

特別注意華為和其他廠商的不同之處

有快應(yīng)用加載器可以用來測試，其他廠商只有快應(yīng)用調(diào)試器和快應(yīng)用預(yù)覽版
js 只支持麒麟芯片的跳轉(zhuǎn)，deeplink的hap方式在微信里不能生效，http/https中轉(zhuǎn)頁實(shí)際上也是通過加載js來進(jìn)行跳轉(zhuǎn)，故和js表現(xiàn)一致
華為有些api比聯(lián)盟文檔支持的更早，例如下載 downloadtask 華為1070就已經(jīng)支持，其他廠商1100才支持（快應(yīng)用聯(lián)盟文檔）

posted @ 2022-02-11 10:41 c-137Summer 閱讀(2645) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部