支付寶小程序擴展能力 白屏解決方案

名詞解釋

小程序白屏

顧名思義，小程序白屏就是指小程序頁面無任何內(nèi)容，完全空白。技術(shù)上說就是頁面無任何 view/dom 節(jié)點。支付寶框架會在 6s 的時候判定一下頁面的節(jié)點狀態(tài)，如果無 view/dom 節(jié)點，則判定為白屏。

接口依賴

小程序提供了 my.httpRequest、my.request 等網(wǎng)絡(luò)接口，方便開發(fā)者從服務(wù)端動態(tài)獲取數(shù)據(jù)。如果頁面在網(wǎng)絡(luò)接口未返回數(shù)據(jù)之前，頁面一直是白屏狀態(tài)，則認為頁面存在網(wǎng)絡(luò)接口依賴。同理，getAuthCode 其實也是需要經(jīng)過服務(wù)端調(diào)用才返回結(jié)果的，如果頁面依賴 getAuthCode，也可以認為是網(wǎng)絡(luò)接口依賴。再延伸一下，只要在接口結(jié)果返回之前，頁面是白屏的，則可以說頁面存在接口依賴。接口請求耗時多長，頁面則白屏多長。常見的耗時較多的接口有 my.httpRequest、my.request、my.getAuthCode、my.getLocation。

分析白屏原因

白屏產(chǎn)生的幾個原因，特別是活動期間，業(yè)務(wù)流量突增，服務(wù)端響應(yīng)較緩慢甚至無響應(yīng)，大量接口超時，資源無響應(yīng)，更容易放大白屏問題。

1. 接口 API 超時等異常。
2. getAuthCode、getCurrentLocation 等 jsapi 超時等異常。
3. jserror 異常。

接口 API 超時

如果一個頁面最開始是全白，通過 my.httpRequest、my.request 等接口 API 請求獲取數(shù)據(jù)后才開始展示內(nèi)容。這個頁面就有了網(wǎng)絡(luò)依賴，是否白屏就會受網(wǎng)絡(luò)波動影響，而網(wǎng)絡(luò)環(huán)境并不是100%穩(wěn)定的。事實上，因用戶環(huán)境、運營商、網(wǎng)絡(luò)節(jié)點等抖動，接口會有一定概率請求失敗、超時。通常這個概率會在 1% 以上，因此，追求低白屏率，就需要去除網(wǎng)絡(luò)依賴。比如啟動中加載一部分數(shù)據(jù)，或做接口緩存，優(yōu)先從緩存中讀取，異步后臺刷新。

getAuthCode、getLocation 等 jsapi 超時等異常

getAuthCode 事實上也是網(wǎng)絡(luò)接口，接口成功率受網(wǎng)絡(luò)抖動影響，白屏原理同網(wǎng)絡(luò)接口超時。getLocation 是獲取定位的接口，定位一般有三種方式：GPS、基站定位、網(wǎng)絡(luò)定位。極端情況下，定位也會較長時間才返回結(jié)果，并且這類接口還需要用戶授權(quán)才能真正執(zhí)行，這種情況下接口耗時還需加上小程序啟動到頁面授權(quán)彈窗及用戶選擇確定或取消的時間。

?

jserror 報錯

網(wǎng)絡(luò)接口返回數(shù)據(jù)后，業(yè)務(wù)要經(jīng)過一層邏輯處理，比如接口中某個字段是頁面渲染必須的，但是某些異常情況下該字段并未返回，此時頁面就可能是白屏。

接口超時白屏解決方案參考

• 頁面能提前展示的盡量提前展示，接口緩存到本地供下一次使用。
• 頁面沒內(nèi)容情況，接入如下 通用的骨架屏 來避免 loading 過程中界面白屏，且提升了用戶體驗。

Step1 安裝

npm install ant-skeleton --save

Step2 代碼中引用

在頁面 json 中文件中進行注冊

{
  "usingComponents": {
    "ant-skeleton":"ant-skeleton/components/skeleton/skeleton"
  }
}

在 axml 文件中進行調(diào)用

<view>
  <ant-skeleton a:if="{{ isLoading }}"/>
  <view a:else class="content"/> 
</view>

詳情請參見 自定義組件。

接入效果展示

?