首頁 > web前端 > uni-app > uni-app跨平台應用開發實現資源線上升級

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

WBOY
發布: 2022-02-28 18:00:39
轉載
3915 人瀏覽過

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

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

推薦:《uniapp影片教學

一、前言

使用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 這樣。
uni-app跨平台應用開發實現資源線上升級

2.2 發行

然後,在 HBuilderX 中產生升級套件(wgt)。

菜单->发行->原生App-制作移动App资源升级包
登入後複製

uni-app跨平台應用開發實現資源線上升級
產生結束會在控制台告知升級套件的輸出位置。
uni-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] <p>注意事項</p>
登入後複製
  • 服務端的具體判定邏輯,請依照自身的業務邏輯靈活處理。
  • 應用程式中的路徑盡量不要包含特殊符號。

客戶端偵測升級
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) => {  
            if (res.statusCode == 200 && res.data.status === 1) {  
                uni.showModal({ //提醒用户更新  
                    title: "更新提示",  
                    content: res.data.note,  
                    success: (res) => {  
                        if (res.confirm) {  
                            plus.runtime.openURL(res.data.url);  
                        }  
                    }  
                })  
            }  
        }  
    })  
    //#endif  }
登入後複製

注意:App的升级检测代码必须使用条件编译,否则在微信环境由于不存在plus相关API,将会报错。

3.2 数据表实现

需维护一张数据表,用于维护APP版本信息,主要字段信息如下:

字段名称 数据类型 数据说明
AppID varchar mobile AppID
version varchar 应用市场版本号
notes varchar 版本更新说明
url varchar 应用市场下载URL。 注意:根据谷歌、App Store应用市场审核规范,应用升级只能通过提交应用市场更新,不能通过下载apkIPA安装方式更新应用。

3.3 服务端实现

根据客户端接收的版本号,比对服务端最新版本号,决定是否需要升级,若需升级则返回升级信息(rlease notes更新包地址等)

开发者可以根据服务端开发语言,自己实现升级检测逻辑,如下是一个php示例代码:

header("Content-type:text/json");  $appid = $_GET["appid"];  $version = $_GET["version"]; //客户端版本号  
$rsp = array("status" => 0); //默认返回值,不需要升级  
if (isset($appid) && 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内只要调用弹出提示即可。
uni-app跨平台應用開發實現資源線上升級
在上传安装包界面填写此次发版信息,其中包地址可以选择手动上传一个文件到云存储,会自动将地址填入该项。

也可以手动填写一个地址(例如:https://appgallery.huawei.com/app/C10764638),就可以不用再上传文件。

如果是发布苹果版本,包地址则为应用在AppStore的链接。
uni-app跨平台應用開發實現資源線上升級
升级中心有以下功能点:

  • 云储存安装包CDN加速,使安装包下载的更快、更稳定
  • 应用管理,对App的信息记录和应用版本管理。
  • 版本管理,可以发布新版,也可方便直观的对当前App历史版本以及线上发行版本进行查看、编辑和删除操作。
  • 版本发布信息管理,包括更新标题内容版本号,静默更新,强制更新,灵活上线发行的设置和修改。
  • 原生App安装包,发布Apk更新,用于App的整包更新,可设置是否强制更新。
  • wgt资源包,发布wgt更新,用于App的热更新,可设置是否强制更新,静默更新。
  • App管理列表及App版本记录列表搜索。
  • 只需导入插件,初始化数据库即可拥有上述功能。
  • 也可以自己修改逻辑自定义数据库字段,和随意定制 UI 样式。

4.2 前台检测更新 uni-upgrade-center-app

uni-upgrade-center-app 负责前台检查升级更新。

项目结构如下图所示:
uni-app跨平台應用開發實現資源線上升級
检测更新视图如下图所示:
uni-app跨平台應用開發實現資源線上升級uni-app跨平台應用開發實現資源線上升級
该插件提供如下功能:

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

注意:在手機基座上運行時取得到的版本號appidhbuilderhbuilder的版本需要在文件裡面手動設定。

4.3 工作原理

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

推薦:《uniapp教學

以上是uni-app跨平台應用開發實現資源線上升級的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板