uni-app: 如何實現增量更新功能？

時間 2019-11-07

標籤 uni app 如何實現增量更新功能简体版

原文原文鏈接

都知道，不少APP都有增量更新功能，Uni APP也是在今年初，推出了增量更新功能，今天咱們就來學習一波。固然，不少應用市場爲了防止開發者不經市場審覈許可，給用戶提供違法內容，對增量更新大多持排斥態度，特別是apple。因此擁有增量更新的app，須要注意如下幾點：javascript

一、上架審覈期間不要彈出增量更新提示vue

二、增量更新內容使用https下載，避免被三方網絡劫持java

三、不要更新違法內容、不要經過增量更新破壞應用市場的利益，好比iOS的虛擬支付要給Apple抽傭等node

經過本章節你能學到那些？

一、如何實現增量更新功能二、Uni-App 如何製做增量更新升級包三、Uni-App 增量更新功能須要注意些什麼四、Uni-App 部分相關api學習數據庫

話很少說，直接上乾貨！express

如何實現增量更新功能

這裏不是針對Uni-App開發，全部的增量更新都應如此（但代碼以Uni-App爲例）。json

一、app端，先調用服務端接口，判斷是否須要更新小程序

二、須要更新，直接下載更新升級包微信小程序

三、安裝升級包，app重啓便可完成升級api

ok，咱們以Uni-App爲例，看看代碼具體實現

客戶端實現 在根目錄 App.vue 的 onLaunch 中檢測升級，代碼以下：

// #ifdef APP-PLUS 
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
    uni.request({  
        url: 'http://www.javanx.cn/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) {
                              // 這裏的錯誤很重要，最好能記錄的服務器日誌中，方便調試或之後維護瞭解更新錯誤狀況，及時解決
                              // 如何更新到服務器？
                              // 調用一個接口，將e返回咯
                              console.error('install fail...');  
                            });  
                        }  
                    }  
                });  
            }  
        }  
    });  
});  
// #endif
複製代碼

代碼解析：一、#ifdef APP-PLUS 判斷是app端，才檢測是否須要更新

二、plus.runtime.getProperty 獲取指定APPID對應的應用信息

plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
  //appid屬性
  var wgtStr = "appid:"+wgtinfo.appid;
  //version屬性
  wgtStr += "<br/>version:"+wgtinfo.version;
  //name屬性
  wgtStr += "<br/>name:"+wgtinfo.name;
  //description屬性
  wgtStr += "<br/>description:"+wgtinfo.description;
  //author屬性
  wgtStr += "<br/>author:"+wgtinfo.author;
  //email屬性
  wgtStr += "<br/>email:"+wgtinfo.email;
  //features 屬性
  wgtStr += "<br/>features:"+wgtinfo.features;
  console.log( wgtStr );
} );
複製代碼

三、uni.request調用服務端接口，傳入當前版本，服務端返回update是否須要更新，須要更新時返回wgtUrl更新升級包路徑。

四、uni.downloadFile 下載文件資源到本地，客戶端直接發起一個 HTTP GET 請求，返回文件的本地臨時路徑tempFilePath。如何咱們須要監聽下載進度，能夠這樣：

var downloadTask = uni.downloadFile({
    url: 'https://www.javanx.cn/file/uni-app.rar',
    complete: ()=> {}
});
downloadTask.onProgressUpdate(function(res)=>{
  console.log('下載進度' + res.progress);
  console.log('已經下載的數據長度' + res.totalBytesWritten);
  console.log('預期須要下載的數據總長度' + res.totalBytesExpectedToWrite);
})
複製代碼

downloadTask 對象的還提供了一下方法：（1）、abort 中斷下載任務

（2）、onHeadersReceived` 監聽 HTTP Response Header 事件，會比請求完成事件更早,僅微信小程序平臺支持

（3）、offProgressUpdate 取消監聽下載進度變化事件，僅微信小程序平臺支持

（4）、offHeadersReceived 取消監聽 HTTP Response Header 事件，僅微信小程序平臺支持

五、plus.runtime.install(filePath, options, installSuccessCB, installErrorCB)。支持如下類型安裝包：

（1）、應用資源安裝包（wgt），擴展名爲'.wgt'；

（2）、應用資源差量升級包（wgtu），擴展名爲'.wgtu'；

（3）、系統程序安裝包（apk），要求使用當前平臺支持的安裝包格式。注意：僅支持本地地址，調用此方法前需把安裝包從網絡地址或其餘位置放置到運行時環境能夠訪問的本地目錄。

服務端實現 以nodejs爲例：

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 // apk,ipa包可下載地址
            })  
        } else if (currentVersions[currentVersions.length-1] < resultVersions[resultVersions.length-1]) {
          // 認爲是小版本更新 
            callback({  
                update: true,  
                wgtUrl: result.wgtUrl, // wgt包可下載地址
                pkgUrl: ''  
            }) 
        }  else {  
            // 其它狀況均不更新
            callback({  
                update: false
            })  
        }  
    });  
}  

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);  
    });  
});
複製代碼

ok，有了以上的功能，咱們就用HBuilderx製做升級包.wgt，放到服務器上，共升級使用。

Uni-App 如何製做增量更新升級包

一、更新 manifest.json 中的版本號。若是上一個版本的版本號是1.0.0，這裏打升級包的時候就能夠是1.0.1，反正要不前面的大，你們也可看到服務端接口實現了，就是經過版本號來判斷的。

二、菜單->發行->原生App-製做移動App資源升級包

三、等待控制檯生成升級包的輸出位置

四、將升級包上傳到服務器，接口實現並返回：wgtUrl=剛剛打的升級包

這樣，咱們的app就擁有了，增量更新功能。每次若是是小量更新，就能夠經過wgt包，來實現增量更新。

下面來看看，Uni App增量更新時，須要注意哪些問題？

Uni-App 增量更新功能須要注意些什麼

一、SDK 部分有調整，好比新增了 Maps 模塊等，不可經過此方式升級，必須經過整包的方式升級。

二、若是是老的非自定義組件編譯模式，以前沒有 nvue 文件，但更新中新增了 nvue 文件，不能使用此方式。由於非自定義組件編譯模式若是沒有 nvue 文件是不會打包weex引擎進去的，原生引擎沒法動態添加。自定義組件模式默認就含着weex引擎，無論工程下有沒有nvue文件。

三、原生插件的增改，一樣不能使用此方式。

四、#ifdef APP-PLUS 條件編譯，僅在 App 平臺執行此升級邏輯。

五、appid 以及版本信息等，在 HBuilderX 真機運行開發期間，均爲 HBuilder 這個應用的信息，所以須要打包自定義基座或正式包測試升級功能。

六、plus.runtime.version 或者uni.getSystemInfo() 讀取到的是 apk/ipa 包的版本號，而非 manifest.json 資源中的版本信息，因此這裏用 plus.runtime.getProperty() 來獲取相關信息。

七、安裝 wgt 資源包成功後，必須執行 plus.runtime.restart()，不然新的內容並不會生效。

八、若是App的原生引擎不升級，只升級wgt包時須要注意測試wgt資源和原生基座的兼容性。平臺默認會對不匹配的版本進行提醒，若是自測沒問題，能夠在manifest中配置忽略提示