uni-app跨平台应用开发之实现资源在线升级

百变鹏仔 2个月前 (11-20) #uniapp

文章标签在线升级

本篇文章给大家带来了关于uniapp的相关知识，主要介绍了怎么实现资源在线升级以及热更新的相关问题，使用uni-app开发跨终端应用，可将代码编译到ios、android、微信小程序等平台，升级时也需考虑多平台同步升级，希望对大家有帮助。

一、前言

使用 uni-app 开发跨终端应用，可将代码编译到iOS、Android、微信小程序等多个平台，升级时也需考虑多平台同步升级。其中，uni-app发布为小程序的升级模式较简单，只需将开发完的代码提交小程序后台，待审核通过后用户将自动升级。

HBuilderX 1.6.5 起，uni-app 支持生成 App 资源升级包wgt。

二、wgt 资源升级包升级

2.1 修改版本号

首先，更新 manifest.json 中的版本号。
比如之前是 1.0.0，那么新版本应该是 1.0.1 或 1.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/

传入参数

返回参数

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.vue 的 onLaunch 中检测升级，代码如下：

// #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

不支持资源升级包情况如下：

注意事项

但实际上热更新使用非常普遍，不管是原生开发中还是跨平台开发。

Apple曾经禁止过jspatch，但没有打击其他的热更新方案，包括cordovar、react native、DCloud。封杀jspatch其实是因为jspatch有严重安全漏洞，可以被黑客利用，造成三方黑客可篡改其他App的数据。

使用热更新需要注意：

三、整包升级

接口约定
如下数据接口约定仅为示例，开发者可以自定义接口参数。

请求地址：https://www.example.com/update

请求方法：GET

请求数据：

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

响应数据：

{      "status":1,//升级标志，1：需要升级；0：无需升级  `在这里插入代码片`    "note": "修复bug1；修复bug2;",//release notes      "url": "http://www.example.com/uniapp.apk" //更新包下载地址  }

3.1 客户端实现

App启动时，向服务端上报当前版本号，服务端判断是否提示升级。

在App.vue的onLaunch中，发起升级检测请求，如下：

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应用市场审核规范，应用升级只能通过提交应用市场更新，不能通过下载apk、IPA安装方式更新应用。

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；修复bug2;"; //release notes              $rsp["url"] = "http://www.example.com/uniapp.apk"; //应用升级包下载地址          }      }  }   echo json_encode($rsp);  exit;

注意事项：

四、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 负责前台检查升级更新。

项目结构如下图所示：

检测更新视图如下图所示：

该插件提供如下功能：

注意：在手机基座上运行时获取到的版本号和appid是hbuilder和hbuilder的版本需要在文件里面手动设置。

4.3 工作原理

升级中心uni-upgrade-center - Admin负责维护版本信息，并将版本信息维护至数据库中。
前台检测更新插件uni-upgrade-center-app负责提供调用云函数读取数据库维护的版本信息一键式检查更新。