uni-app跨平臺應用開發之實現資源線上升級

2022-02-28 19:01:04
本篇文章給大家帶來了關於的相關知識,主要介紹了怎麼實現資源線上升級以及熱更新的相關問題,使用uni-app開發跨終端應用,可將程式碼編譯到iOS、Android、微信小程式等平臺,升級時也需考慮多平臺同步升級,希望對大家有幫助。

推薦:《》

一、前言

使用 uni-app 開發跨終端應用,可將程式碼編譯到iOSAndroid、微信小程式等多個平臺,升級時也需考慮多平臺同步升級。其中,uni-app釋出為小程式的升級模式較簡單,只需將開發完的程式碼提交小程式後臺,待稽核通過後使用者將自動升級。

HBuilderX 1.6.5 起,uni-app 支援生成 App 資源升級包wgt

二、wgt 資源升級包升級

2.1 修改版本號

首先,更新 manifest.json 中的版本號。
比如之前是 1.0.0,那麼新版本應該是 1.0.11.1.0 這樣。
在這裡插入圖片描述

2.2 發行

然後,在 HBuilderX 中生成升級包(wgt)。

選單->發行->原生App-製作移動App資源升級包

在這裡插入圖片描述
生成結束會在控制檯告知升級包的輸出位置。
在這裡插入圖片描述

2.3 安裝資源升級包

應用的升級需要伺服器端與使用者端配合完成,下面以本地測試過程中的操作舉例說明:

存放資源
%appid%.wgt 檔案存放在伺服器的 static 目錄下,即 http://www.example.com/static/UNI832D722.wgt

伺服器端介面
約定檢測升級的介面,地址為:http://www.example.com/update/

傳入引數

  • name String ‘’ 使用者端讀取到的應用名稱,定義這個引數可以方便多個應用複用介面。
  • version String ‘’ 使用者端讀取到的版本號資訊

返回引數

  • update Boolean false 是否有更新
  • wgtUrl String wgt 包的下載地址,用於 wgt 方式更新。
  • pkgUrl String apk/ipa 包下載地址或 AppStore 地址,用於整包升級的方式。

2.3.1 程式碼範例

下面是一個簡單的伺服器端判定的範例,僅做參考,實際開發中根據自身業務需求處理。

var express = require('express');  var router = express.Router();  var db = require('./db');  // TODO 查詢組態檔或者資料庫資訊來確認是否有更新  
function checkUpdate(params, callback) {  
    db.query('一段SQL', function(error, result) {  
        // 這裡簡單判定下,不相等就是有更新。  
        var currentVersions = params.appVersion.split('.');  
        var resultVersions = result.appVersion.split('.');  

        if (currentVersions[0] < resultVersions[0]) {  
            // 說明有大版本更新  
            callback({  
                update: true,  
                wgtUrl: '',  
                pkgUrl: result.pkgUrl  
            })  
        } else {  
            // 其它情況均認為是小版本更新  
            callback({  
                update: true,  
                wgtUrl: result.wgtUrl,  
                pkgUrl: ''  
            })  
        }  
    });  }  router.get('/update/', function(req, res) {  
    var appName = req.query.name;  
    var appVersion = req.query.version;  
    checkUpdate({  
        appName: appName,  
        appVersion: appVersion  
    }, function(error, result) {  
        if (error) {  
            throw error;  
        }  
        res.json(result);  
    });  });

注意事項

  • 伺服器端的具體判定邏輯,請根據自身的業務邏輯靈活處理。
  • 應用中的路徑儘量不要包含特殊符號。

使用者端檢測升級
App.vueonLaunch 中檢測升級,程式碼如下:

// #ifdef APP-PLUS  plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
    uni.request({  
        url: 'http://www.example.com/update/',  
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {  
            var data = result.data;  
            if (data.update && data.wgtUrl) {  
                uni.downloadFile({  
                    url: data.wgtUrl,  
                    success: (downloadResult) => {  
                        if (downloadResult.statusCode === 200) {  
                            plus.runtime.install(downloadResult.tempFilePath, {  
                                force: false  
                            }, function() {  
                                console.log('install success...');  
                                plus.runtime.restart();  
                            }, function(e) {  
                                console.error('install fail...');  
                            });  
                        }  
                    }  
                });  
            }  
        }  
    });  });  // #endif

不支援資源升級包情況如下:

  • SDK 部分有調整,比如新增了 Maps 模組等,不可通過此方式升級,必須通過整包的方式升級。
  • 原生外掛的增改,同樣不能使用此方式。
  • 對於老的非自定義元件編譯模式,這種模式已經被淘汰下線。但以防萬一也需要說明下,老的非自定義元件編譯模式,如果之前工程沒有 nvue 檔案,但更新中新增了 nvue 檔案,不能使用此方式。因為非自定義元件編譯模式如果沒有nvue檔案是不會打包weex引擎進去的,原生引擎無法動態新增。自定義元件模式預設就含著weex引擎,不管工程下有沒有nvue檔案。

注意事項

  • 條件編譯,僅在 App 平臺執行此升級邏輯。
  • appid 以及版本資訊等,在 HBuilderX 真機執行開發期間,均為 HBuilder 這個應用的資訊,因此需要打包自定義基座或正式包測試升級功能。
  • plus.runtime.version 或者 uni.getSystemInfo() 讀取到的是 apk/ipa 包的版本號,而非 manifest.json 資源中的版本資訊,所以這裡用 plus.runtime.getProperty() 來獲取相關資訊。
  • 安裝 wgt 資源包成功後,必須執行 plus.runtime.restart(),否則新的內容並不會生效。
  • 如果App的原生引擎不升級,只升級wgt包時需要注意測試wgt資源和原生基座的相容性⚠️。平臺預設會對不匹配的版本進行提醒,如果自測沒問題,可以在manifestt.json中設定忽略提示。
  • 應用市場為了防止開發者不經市場稽核許可,給使用者提供違法內容,對熱更新大多持排斥態度。

但實際上熱更新使用非常普遍,不管是原生開發中還是跨平臺開發。

Apple曾經禁止過jspatch,但沒有打擊其他的熱更新方案,包括cordovar、react native、DCloud。封殺jspatch其實是因為jspatch有嚴重安全漏洞,可以被駭客利用,造成三方駭客可篡改其他App的資料。

使用熱更新需要注意:

  • 上架稽核期間不要彈出熱更新提示;
  • 熱更新內容使用https下載,避免被三方網路劫持;
  • 不要更新違法內容、不要通過熱更新破壞應用市場的利益,比如iOS的虛擬支付要老老實實給Apple分錢。

三、整包升級

介面約定
如下資料介面約定僅為範例,開發者可以自定義介面引數。

請求地址:https://www.example.com/update

請求方法:GET

請求資料:

{  
    "appid": plus.runtime.appid,  
    "version": plus.runtime.version  
}

響應資料:

{  
    "status":1,//升級標誌,1:需要升級;0:無需升級  `在這裡插入程式碼片`    "note": "修復bug1;\n修復bug2;",//release notes  
    "url": "http://www.example.com/uniapp.apk" //更新包下載地址  
}

3.1 使用者端實現

App啟動時,向伺服器端上報當前版本號,伺服器端判斷是否提示升級。

App.vueonLaunch中,發起升級檢測請求,如下:

onLaunch: function () {  
    //#ifdef APP-PLUS  
    var server = "https://www.example.com/update"; //檢查更新地址  
    var req = { //升級檢測資料  
        "appid": plus.runtime.appid,  
        "version": plus.runtime.version  
    };  
    uni.request({  
        url: server,  
        data: req,  
        success: (res) =&gt; {  
            if (res.statusCode == 200 &amp;&amp; res.data.status === 1) {  
                uni.showModal({ //提醒使用者更新  
                    title: "更新提示",  
                    content: res.data.note,  
                    success: (res) =&gt; {  
                        if (res.confirm) {  
                            plus.runtime.openURL(res.data.url);  
                        }  
                    }  
                })  
            }  
        }  
    })  
    //#endif  }

注意:App的升級檢測程式碼必須使用條件編譯,否則在微信環境由於不存在plus相關API,將會報錯。

3.2 資料表實現

需維護一張資料表,用於維護APP版本資訊,主要欄位資訊如下:

欄位名稱資料型別資料說明
AppIDvarcharmobile AppID
versionvarchar應用市場版本號
notesvarchar版本更新說明
urlvarchar應用市場下載URL。 注意:根據谷歌、App Store應用市場稽核規範,應用升級只能通過提交應用市場更新,不能通過下載apkIPA安裝方式更新應用。

3.3 伺服器端實現

根據使用者端接收的版本號,比對伺服器端最新版本號,決定是否需要升級,若需升級則返回升級資訊(rlease notes更新包地址等)

開發者可以根據伺服器端開發語言,自己實現升級檢測邏輯,如下是一個php範例程式碼:

header("Content-type:text/json");  $appid = $_GET["appid"];  $version = $_GET["version"]; //使用者端版本號  
$rsp = array("status" =&gt; 0); //預設返回值,不需要升級  
if (isset($appid) &amp;&amp; isset($version)) {  
    if ($appid === "__UNI__123456") { //校驗appid  
        if ($version !== "1.0.1") { //這裡是範例程式碼,真實業務上,最新版本號及relase notes可以儲存在資料庫或檔案中  
            $rsp["status"] = 1;  
            $rsp["note"] = "修復bug1;\n修復bug2;"; //release notes  
            $rsp["url"] = "http://www.example.com/uniapp.apk"; //應用升級包下載地址  
        }  
    }  }   echo json_encode($rsp);  exit;

注意事項:

  • plus.runtime.appidplus.runtime.versionplus.runtime.openURL() 在真機環境下才有效。
  • 版本檢測需要打包app,真機執行基座無法測試。因為真機執行的plus.runtime.version是固定值。
  • 根據谷歌應用市場的稽核規範,應用升級只能通過提交應用市場更新,不能通過下載apk安裝方式更新應用。apk安裝失敗可能是因為缺少android.permission.INSTALL_PACKAGESandroid.permission.REQUEST_INSTALL_PACKAGES許可權導致,注意:新增上面兩個許可權無法通過谷歌稽核。

四、Uni-app 版本升級中心

uni-app提供了一整套版本維護框架,包含升級中心uni-upgrade-center - Admin、前臺檢測更新uni-upgrade-center-app

4.1 升級中心 uni-upgrade-center - Admin

uni-app提供了版本維護後臺應用升級中心uni-upgrade-center - Admin,升級中心是一款uni-admin外掛,負責App版本更新業務。包含後臺管理介面、更新檢查邏輯,App內只要呼叫彈出提示即可。
在這裡插入圖片描述
在上傳安裝包介面填寫此次發版資訊,其中包地址可以選擇手動上傳一個檔案到雲端儲存,會自動將地址填入該項。

也可以手動填寫一個地址(例如:https://appgallery.huawei.com/app/C10764638),就可以不用再上傳檔案。

如果是釋出蘋果版本,包地址則為應用在AppStore的連結。
在這裡插入圖片描述
升級中心有以下功能點:

  • 雲儲存安裝包CDN加速,使安裝包下載的更快、更穩定
  • 應用管理,對App的資訊記錄和應用版本管理。
  • 版本管理,可以釋出新版,也可方便直觀的對當前App歷史版本以及線上發行版本進行檢視、編輯和刪除操作。
  • 版本釋出資訊管理,包括更新標題內容版本號,靜默更新,強制更新,靈活上線發行的設定和修改。
  • 原生App安裝包,釋出Apk更新,用於App的整包更新,可設定是否強制更新。
  • wgt資源包,釋出wgt更新,用於App的熱更新,可設定是否強制更新,靜默更新。
  • App管理列表及App版本記錄列表搜尋。
  • 只需匯入外掛,初始化資料庫即可擁有上述功能。
  • 也可以自己修改邏輯自定義資料庫欄位,和隨意客製化 UI 樣式。

4.2 前臺檢測更新 uni-upgrade-center-app

uni-upgrade-center-app 負責前臺檢查升級更新。

專案結構如下圖所示:
在這裡插入圖片描述
檢測更新檢視如下圖所示:
在這裡插入圖片描述在這裡插入圖片描述
該外掛提供如下功能:

  • 統一管理AppAppAndroidiOS平臺上App安裝包和wgt資源包的釋出升級。
  • 基於uni-upgrade-center一鍵式檢查更新,統一整包與 wgt 資源包更新。
  • 自行根據傳參完成校驗,判斷此次更新使用哪種方式。
  • 一鍵式升級。已整合彈框、下載、安裝、是否強制重新啟動等邏輯。
  • 下載完成如果取消升級自動快取安裝包,下次進入判斷是否符合安裝條件,判斷不通過則自動清除。
  • 美觀,實用,可自定義擴充套件。

注意:在手機基座上執行時獲取到的版本號appidhbuilderhbuilder的版本需要在檔案裡面手動設定。

4.3 工作原理

升級中心uni-upgrade-center - Admin負責維護版本資訊,並將版本資訊維護至資料庫中。
前臺檢測更新外掛uni-upgrade-center-app負責提供呼叫雲函數讀取資料庫維護的版本資訊一鍵式檢查更新。

推薦:《》

以上就是uni-app跨平臺應用開發之實現資源線上升級的詳細內容,更多請關注TW511.COM其它相關文章!