H5對接快應用踩坑記錄

背景

快應用文檔

2018 年 3 月份，由小米，OPPO，vivo，華為等 10 家國內主流廠商成立了快應用聯盟，從技術規范層面做了統一，並保證了開發者開發的快應用可以直接在所有的聯盟內廠商的手機設備上運行。快應用是介於網頁和原生直接的，直達用戶的應用，無需安裝app，可以在操作系統層面形成用戶需求與應用服務的無縫連接，很多只用在原生應用中才能使用的功能，在快應用中可以很方便的實現。

這是快應用文檔的介紹，看起來很不錯是不是，原生太重，網頁能調用系統層面的東西太少，技術層面來看快應用兩者的優點都有。
但是---由於各廠商表現不完全一致，甚至版本不一致，遇到問題再網上能搜到明確答案的也很少，並且有些已經過時，所以在快應用的開發和對接過程中，着實是踩了不少坑。現在是2022年2月，快應用平台的最新的版本是1100版本，記錄下遇到的一些需要注意的問題。

快應用和h5的通信

此次用到的主要是 web 組件，web 組件快應用是用來內嵌 h5 鏈接。在 h5 和快應用之間建立橋接，然后通信，使 h5 得以調用快應用的能力來進行操作。
這里的通信和iframe通信形式差不多，h5 可以使用 system.onmessage 監聽接收快應用發送的消息，system.postMessage 發消息到快應用，推送和監聽收到的消息進行處理。web 組件，快應用收到消息之后需要異步處理這些消息，執行想要的操作，調用快應用的相關能力。

H5跳快應用方式

js跳轉

加載js，用js里的方法跳轉，方法掛載到window下的，沒有window對象的，像小程序想要跳快應用可能就沒法做到了

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

deeplink 跳轉

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]  // 此種方式只支持華為

兩種跳轉方式的不同

channelReady 平台上快應用能力檢測，如支持快應用服務則返回 true 值，否則則返回 false 值，但 true 不代表一定能跳轉成功，所以一定要做好跳轉不成功的情況處理。不可全依賴 channelReady 華為都會返回true，但不是所有的都能跳轉成功

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

華為的js跳轉有限制，點擊看文檔

華為js只支持麒麟芯片的機型跳轉。。。

在調試器里表現都一樣，是直接跳快應用預覽版，但是如果說想走全流程h5跳轉到快應用的時候，某些機型 js 跳轉的方式會直接跳轉到正式的快應用，deeplink 則會在跳轉之前詢問使用什么加載器跳轉，用 deeplink 方便測試，不至於測試流程也直接跳轉正式快應用環境。
同時寫 deeplink 和 js 跳轉，個別機型可能會跳兩次。

跳轉方式兼容性

1. 各個渠道廠商支持的跳轉方式不一致
2. 各個app內表現也可能不一致（微信/支付寶/瀏覽器）
3. 參數過長可能會無法跳轉，並且廠商、機型、渠道、跳轉方式表現不一致。js跳轉方式可能會出現無法跳轉的情況，deeplink有總長度932字節的限制

deeplink拼接的url路徑需要轉碼，否則一些機型會加載不出來

比如想要在快應用里通過 webview 加載一個 h5 頁面，H5 跳轉到這個內嵌 webview 的快應用，dplink 通過 key=value 來傳參 url=xxx，在一些機型里，這個鏈接需要轉碼，否則會加載白屏。同時需要注意只有deeplink 方法跳轉的時候才需要encode url。

快應用加載在某些機型出現白屏

快應用平台版本

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

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

1. 有快應用加載器可以用來測試，其他廠商只有快應用調試器和快應用預覽版
2. js 只支持麒麟芯片的跳轉，deeplink的hap方式在微信里不能生效，http/https中轉頁實際上也是通過加載js來進行跳轉，故和js表現一致
3. 華為有些api比聯盟文檔支持的更早，例如下載 downloadtask 華為1070就已經支持，其他廠商1100才支持（快應用聯盟文檔）