uni-app如何實(shí)現(xiàn)增量更新功能
都知道,很多APP都有增量更新功能,Uni APP也是在今年初,推出了增量更新功能,今天我們就來(lái)學(xué)習(xí)一波。 當(dāng)然,很多應(yīng)用市場(chǎng)為了防止開(kāi)發(fā)者不經(jīng)市場(chǎng)審核許可,給用戶提供違法內(nèi)容,對(duì)增量更新大多持排斥態(tài)度,特別是apple。所以擁有增量更新的app,需要注意以下幾點(diǎn):
1、上架審核期間不要彈出增量更新提示
2、增量更新內(nèi)容使用https下載,避免被三方網(wǎng)絡(luò)劫持
3、不要更新違法內(nèi)容、不要通過(guò)增量更新破壞應(yīng)用市場(chǎng)的利益,比如iOS的虛擬支付要給Apple抽傭等
通過(guò)本章節(jié)你能學(xué)到那些?
1、如何實(shí)現(xiàn)增量更新功能 2、Uni-App 如何制作增量更新升級(jí)包 3、Uni-App 增量更新功能需要注意些什么 4、Uni-App 部分相關(guān)api學(xué)習(xí)
話不多說(shuō),直接上干貨!
如何實(shí)現(xiàn)增量更新功能
這里不是針對(duì)Uni-App開(kāi)發(fā),所有的增量更新都應(yīng)如此(但代碼以Uni-App為例)。
1、app端,先調(diào)用服務(wù)端接口,判斷是否需要更新
2、需要更新,直接下載更新升級(jí)包
3、安裝升級(jí)包,app重啟即可完成升級(jí)
ok,我們以Uni-App為例,看看代碼具體實(shí)現(xiàn)
客戶端實(shí)現(xiàn) 在 根目錄 App.vue 的 onLaunch 中檢測(cè)升級(jí),代碼如下:
// #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) { // 這里的錯(cuò)誤很重要,最好能記錄的服務(wù)器日志中,方便調(diào)試或以后維護(hù)了解更新錯(cuò)誤情況,及時(shí)解決 // 如何更新到服務(wù)器? // 調(diào)用一個(gè)接口,將e返回咯 console.error('install fail...'); }); } } }); } } }); }); // #endif
代碼解析: 1、#ifdef APP-PLUS 判斷是app端,才檢測(cè)是否需要更新
2、plus.runtime.getProperty 獲取指定APPID對(duì)應(yīng)的應(yīng)用信息
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 ); } );
3、uni.request調(diào)用服務(wù)端接口,傳入當(dāng)前版本,服務(wù)端返回update是否需要更新,需要更新時(shí)返回wgtUrl更新升級(jí)包路徑。
4、uni.downloadFile 下載文件資源到本地,客戶端直接發(fā)起一個(gè) HTTP GET 請(qǐng)求,返回文件的本地臨時(shí)路徑tempFilePath。如何我們需要監(jiān)聽(tīng)下載進(jìn)度,可以這樣:
var downloadTask = uni.downloadFile({ url: 'https://www.javanx.cn/file/uni-app.rar', complete: ()=> {} }); downloadTask.onProgressUpdate(function(res)=>{ console.log('下載進(jìn)度' + res.progress); console.log('已經(jīng)下載的數(shù)據(jù)長(zhǎng)度' + res.totalBytesWritten); console.log('預(yù)期需要下載的數(shù)據(jù)總長(zhǎng)度' + res.totalBytesExpectedToWrite); })
downloadTask 對(duì)象的還提供了一下方法: (1)、abort 中斷下載任務(wù)
(2)、onHeadersReceived` 監(jiān)聽(tīng) HTTP Response Header 事件,會(huì)比請(qǐng)求完成事件更早,僅微信小程序平臺(tái)支持
(3)、offProgressUpdate 取消監(jiān)聽(tīng)下載進(jìn)度變化事件,僅微信小程序平臺(tái)支持
(4)、offHeadersReceived 取消監(jiān)聽(tīng) HTTP Response Header 事件,僅微信小程序平臺(tái)支持
5、plus.runtime.install(filePath, options, installSuccessCB, installErrorCB)。 支持以下類型安裝包:
(1)、應(yīng)用資源安裝包(wgt),擴(kuò)展名為'.wgt';
(2)、應(yīng)用資源差量升級(jí)包(wgtu),擴(kuò)展名為'.wgtu';
(3)、系統(tǒng)程序安裝包(apk),要求使用當(dāng)前平臺(tái)支持的安裝包格式。 注意:僅支持本地地址,調(diào)用此方法前需把安裝包從網(wǎng)絡(luò)地址或其他位置放置到運(yùn)行時(shí)環(huán)境可以訪問(wèn)的本地目錄。
服務(wù)端實(shí)現(xiàn) 以nodejs為例:
var express = require('express'); var router = express.Router(); var db = require('./db'); // TODO 查詢配置文件或者數(shù)據(jù)庫(kù)信息來(lái)確認(rèn)是否有更新 function checkUpdate(params, callback) { db.query('一段SQL', function(error, result) { // 這里簡(jiǎn)單判定下,不相等就是有更新。 var currentVersions = params.appVersion.split('.'); var resultVersions = result.appVersion.split('.'); if (currentVersions[0] < resultVersions[0]) { // 說(shuō)明有大版本更新 callback({ update: true, wgtUrl: '', pkgUrl: result.pkgUrl // apk,ipa包可下載地址 }) } else if (currentVersions[currentVersions.length-1] < resultVersions[resultVersions.length-1]) { // 認(rèn)為是小版本更新 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制作升級(jí)包.wgt,放到服務(wù)器上,共升級(jí)使用。
Uni-App 如何制作增量更新升級(jí)包
1、更新 manifest.json 中的版本號(hào)。如果上一個(gè)版本的版本號(hào)是1.0.0,這里打升級(jí)包的時(shí)候就可以是1.0.1,反正要不前面的大,大家也可看到服務(wù)端接口實(shí)現(xiàn)了,就是通過(guò)版本號(hào)來(lái)判斷的。
2、菜單->發(fā)行->原生App-制作移動(dòng)App資源升級(jí)包
3、等待控制臺(tái)生成升級(jí)包的輸出位置
4、將升級(jí)包上傳到服務(wù)器,接口實(shí)現(xiàn)并返回:wgtUrl=剛剛打的升級(jí)包
這樣,我們的app就擁有了,增量更新功能。每次如果是小量更新,就可以通過(guò)wgt包,來(lái)實(shí)現(xiàn)增量更新。
下面來(lái)看看,Uni App增量更新時(shí),需要注意哪些問(wèn)題?
Uni-App 增量更新功能需要注意些什么
1、SDK 部分有調(diào)整,比如新增了 Maps 模塊等,不可通過(guò)此方式升級(jí),必須通過(guò)整包的方式升級(jí)。
2、如果是老的非自定義組件編譯模式,之前沒(méi)有 nvue 文件,但更新中新增了 nvue 文件,不能使用此方式。因?yàn)榉亲远x組件編譯模式如果沒(méi)有 nvue 文件是不會(huì)打包weex引擎進(jìn)去的,原生引擎無(wú)法動(dòng)態(tài)添加。自定義組件模式默認(rèn)就含著weex引擎,不管工程下有沒(méi)有nvue文件。
3、原生插件的增改,同樣不能使用此方式。
4、#ifdef APP-PLUS 條件編譯,僅在 App 平臺(tái)執(zhí)行此升級(jí)邏輯。
5、appid 以及版本信息等,在 HBuilderX 真機(jī)運(yùn)行開(kāi)發(fā)期間,均為 HBuilder 這個(gè)應(yīng)用的信息,因此需要打包自定義基座或正式包測(cè)試升級(jí)功能。
6、plus.runtime.version 或者 uni.getSystemInfo() 讀取到的是 apk/ipa 包的版本號(hào),而非 manifest.json 資源中的版本信息,所以這里用 plus.runtime.getProperty() 來(lái)獲取相關(guān)信息。
7、安裝 wgt 資源包成功后,必須執(zhí)行 plus.runtime.restart(),否則新的內(nèi)容并不會(huì)生效。
8、如果App的原生引擎不升級(jí),只升級(jí)wgt包時(shí)需要注意測(cè)試wgt資源和原生基座的兼容性。平臺(tái)默認(rèn)會(huì)對(duì)不匹配的版本進(jìn)行提醒,如果自測(cè)沒(méi)問(wèn)題,可以在manifest中配置忽略提示
總結(jié)
今天你學(xué)到了什么?Uni-App 增量更新你學(xué)會(huì)了嗎?
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
php常見(jiàn)的頁(yè)面跳轉(zhuǎn)方法匯總
Web系統(tǒng)中,從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè),是LAMP項(xiàng)目中最常用的技術(shù)之一。頁(yè)面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的,也可能是系統(tǒng)自動(dòng)產(chǎn)生的。 此處介紹PHP中常用的實(shí)現(xiàn)頁(yè)面自動(dòng)跳轉(zhuǎn)的方法。2015-04-04svg插入foreignObject無(wú)法響應(yīng)事件解決
這篇文章主要為大家介紹了svg插入foreignObject無(wú)法響應(yīng)事件解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10js中的for如何實(shí)現(xiàn)foreach中的遍歷
js中沒(méi)有foreach這個(gè)關(guān)鍵字,但是可以用var v in array來(lái)實(shí)現(xiàn)遍歷,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-05-05