簡介： 弱網(wǎng)拉包無障礙，深度提升用戶體驗

?

傳統(tǒng)的小程序技術容易受到網(wǎng)絡環(huán)境影響，當網(wǎng)絡質(zhì)量不佳時可能導致拉取不到小程序包的情況。通過預置小程序，即可規(guī)避該問題。本文介紹了預置小程序的原理和預置小程序的實現(xiàn)過程。

?

什么是預置小程序

預置小程序是指將小程序的渲染、邏輯、配置等靜態(tài)資源打包在一個壓縮包內(nèi)，客戶端預先下載小程序包到本地、直接從本地加載資源的過程。預置小程序可以最大程度地擺脫網(wǎng)絡環(huán)境對 mPaaS 小程序頁面的影響。使用預置包能夠為客戶端帶來以下優(yōu)勢：

?

• 提升用戶體驗
  通過預置包的方式把頁面內(nèi)靜態(tài)資源嵌入到應用中并隨應用一起發(fā)布，可以使用戶第一次開啟應用時即無需依賴網(wǎng)絡環(huán)境下載資源，可以直接開始使用。

?

• 實現(xiàn)動態(tài)更新
  在推出新版本或緊急發(fā)布的時候，可以在小程序 IDE 中進行迭代開發(fā)，通過 mPaaS 控制臺發(fā)布，客戶端中集成的小程序 SDK 會自動將小程序更新到最新的版本。這種發(fā)布無需通過應用商店審核，可以讓用戶及早接收到更新。

?

預置小程序的實現(xiàn)原理

本文從以下方面介紹了預置小程序的實現(xiàn)原理：

• 小程序預置包的結構
• 小程序預置包的使用過程

?

小程序預置包的結構

小程序預置包是一個 .amr 格式的壓縮文件，將后綴 amr 改成 zip 解壓縮后，可以看到其中包含的 HTML 資源和 JavaScript 代碼等。待小程序容器加載后，這些資源和代碼能在 UC 內(nèi)核渲染。

?

以 Android 系統(tǒng)為例，下圖顯示了一般資源包的目錄結構：

• 一級目錄：一般為資源包的 ID，如 2020121620201216_1.0.1.0.zip。
• 二級目錄及往后即為業(yè)務自定義的資源文件。并設定當前預置包默認打開的主入口文件，如 /index.html。

?

小程序預置包的使用過程

使用小程序預置包的過程可以分為以下三個步驟：

請求包信息
從服務端請求小程序包，并將小程序包信息存儲到本地數(shù)據(jù)庫的過程。包信息包含了小程序包的下載地址、小程序包版本號等。

下載小程序包
把小程序包從服務端下載到手機。

安裝小程序包
下載目錄，拷貝到手機安裝目錄。

?

前提條件

• 已接入小程序組件。更多關于小程序組件的接入信息，請參見 快速開始使用小程序。
• 已接入 H5 容器 組件。更多關于 H5 容器的接入信息，請參見 快速開始使用 H5 容器。

?

操作步驟-Android

預置小程序包。

在 mPaaS 控制臺發(fā)布小程序包并下載 AMR 文件和配置文件。

?

將下載到的 AMR 文件和配置文件放置在 mPaaS 項目的 assets 目錄下。

?

在工程中添加預置代碼，以在應用啟動時調(diào)用預置代碼安裝應用。預置代碼示例如下：

new Thread(new Runnable(){ @Override public void run(){ MPNebula.loadofflineNebula(jsonFileName: "h5_json.json", new MPNebulaOfflineInfo(offLineFileName:"2020121620201216_1.0.1.0.amr", addId:"2020121620201216", version:"1.0.1.0")); } }).start();

說明：

• 此方法為阻塞調(diào)用，請不要在主線程上調(diào)用內(nèi)置預置包方法。
• 此方法僅能調(diào)用一次。若多次調(diào)用，僅第一次調(diào)用有效。所以需要一次性傳入所有需預置預置包信息。
• 如果內(nèi)置多個 AMR 包，需要要確保文件已存在；如不存在，會造成其他內(nèi)置預置包失敗。

?

啟動小程序。啟動小程序的示例代碼如下。

/** * 啟動小程序 * * @param appId 小程序id */ public static void startApp(String appId);

更新小程序
默認情況下，每次打開應用，小程序 SDK 都會嘗試檢查是否有可更新的版本。出于服務端壓力考慮，該檢查有時間間隔限制，默認為 30 分鐘。如果想立即檢查最新可用版本，調(diào)用下方的代碼來請求更新。一般情況下，可以在應用啟動或者用戶登錄后調(diào)用。

MPNebula.updateAllApp(new MpaasNebulaUpdateCallback(){@Overridepublic void onResult(final boolean success, final boolean isLimit) {super.onResult(success, isLimit);runOnUiThread(new Runnable() {@Overridepublic void run() {AUToast.makeToast(NebulaAppActivity.this,success ? R.string.update_success : R.string.update_failure, 2000).show();}});} });

結語

mPaaS 小程序源自于支付寶小程序框架，億級線上業(yè)務體量的錘煉，安全性媲美支付寶原生能力。不僅面向自有 App 投放小程序，更可快速構建打包，覆蓋支付寶、淘寶、釘釘?shù)葢谩?/p>

?

通過使用上述預置小程序的方案，預置小程序不僅可以最大程度地擺脫網(wǎng)絡環(huán)境對 mPaaS 小程序頁面的影響，還能深度體驗用戶體驗、實現(xiàn)動態(tài)更新。

?

mPaaS 小程序（Alpha）限時免費申領中，全新內(nèi)核完全對齊支付寶標準 API，為您提供更精簡的安卓端 SDK。

?

作者：查克拉空

原文鏈接

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載

總結

以上是生活随笔為你收集整理的技术干货 | mPaaS 小程序高玩带你起飞：客户端预置小程序无视网络质量的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。