文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp实现app检查更新与升级-uni-upgrade-center详解

2023-10-06 22:06

关注

app检查更新与升级

参考链接：

升级中心uni-upgrade-center - App

uni-admin

h5+ api

App资源在线升级更新

uni-app使用plus注意事项

关于在线升级（WGT）的几个疑问

什么是升级中心uni-upgrade-center

uniapp官方开发的App版本更新的插件，基于unicloud的后端服务

因为是开源的，通过修改源码可以实现请求java等其他后端服务，后续的源码解析章节会介绍

升级中心分为两个部分：

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

后台管理系统：

简单来说，如果是新版的uni-admin，直接用升级中心即可

怎么使用uni-upgrade-center

使用我觉得并不难，跟着官方文档走即可

简单来说，就是你的app项目安装 uni-upgrade-center-app这个插件，同时你需要另外新建一个uni-admin项目，用来上传并管理app项目的更新包，app项目通过unicloud请求更新包

官方文档

但是如果不想使用unicloud，想换成java等其他后端服务，或者想了解app检查更新与升级的代码是如何编写的，阅读uni-upgrade-center源码是十分有必要的。

uni-upgrade-center源码阅读

十分推荐阅读uni-upgrade-center源码

通过一步步阅读uni-upgrade-center源码，基本能完全学会如何写app检查更新与升级的代码

源码前端功能实现主要分为三个文件，依次阅读

  1. utils/call-check-version.js
  2. utils/call-check-version.js
  3. pages/upgrade-popup.vue

utils/call-check-version.js

代码很简单，通过h5+ api获取应用信息，把应用信息传递给uniCloud云函数

同理，如果不使用云函数，传给java等后端服务的话，替换云函数部分代码就可以了

export default function () {  // #ifdef APP-PLUS  return new Promise((resolve, reject) => {    // 根据当前应用的appid，获取appid对应的应用信息    plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {      const data = {        action: 'checkVersion',        appid: plus.runtime.appid,        appVersion: plus.runtime.version,        wgtVersion: widgetInfo.version      }      console.log("data: ", data);      // 如果传给java等后端服务，改下方代码      uniCloud.callFunction({        name: 'uni-upgrade-center',        data,        success: (e) => {          console.log("e: ", e);          resolve(e)        },        fail: (error) => {          reject(error)        }      })    })  })  // #endif  // #ifndef APP-PLUS  return new Promise((resolve, reject) => {    reject({      message: '请在App中使用'    })  })  // #endif}

plus.runtime.appid

当前应用的APPID

String 类型 只读属性

注意，如果是在HBuilder真机运行获取的是固定值"HBuilder"，需要提交App云端打包后运行才能获取真实的APPID值

plus.runtime.getProperty

获取指定APPID对应的应用信息

参数：

示例：

// 获取应用信息function getAppInfo() {plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {//appid属性var wgtStr = "appid:"+wgtinfo.appid;//version属性wgtStr += "
version:"+wgtinfo.version;//name属性wgtStr += "
name:"+wgtinfo.name;//description属性wgtStr += "
description:"+wgtinfo.description;//author属性wgtStr += "
author:"+wgtinfo.author;//email属性wgtStr += "
email:"+wgtinfo.email;//features 属性wgtStr += "
features:"+wgtinfo.features;console.log( wgtStr );} );}

utils/call-check-version.js

官方实现了两种方式，静默更新和提示更新

import callCheckVersion from './call-check-version'// 推荐在App.vue中使用const PACKAGE_INFO_KEY = '__package_info__'export default function() {// #ifdef APP-PLUSreturn new Promise((resolve, reject) => {callCheckVersion().then(async (e) => {if (!e.result) return;const {code,message,is_silently, // 是否静默更新url, // 安装包下载地址platform, // 安装包平台type // 安装包类型} = e.result;// 此处逻辑仅为实例，可自行编写if (code > 0) {// 腾讯云和阿里云下载链接不同，需要处理一下，阿里云会原样返回const {fileList} = await uniCloud.getTempFileURL({fileList: [url]});if (fileList[0].tempFileURL)e.result.url = fileList[0].tempFileURL;resolve(e)// 静默更新，只有wgt有if (is_silently) {uni.downloadFile({url: e.result.url,success: res => {if (res.statusCode == 200) {// 下载好直接安装，下次启动生效plus.runtime.install(res.tempFilePath, {force: false});}}});return;}// return updateUseModal(e.result)uni.setStorageSync(PACKAGE_INFO_KEY, e.result)uni.navigateTo({url: `/uni_modules/uni-upgrade-center-app/pages/upgrade-popup?local_storage_key=${PACKAGE_INFO_KEY}`,fail: (err) => {console.error('更新弹框跳转失败', err)uni.removeStorageSync(PACKAGE_INFO_KEY)}})return} else if (code < 0) {// TODO 云函数报错处理console.error(message)return reject(e)}return resolve(e)}).catch(err => {// TODO 云函数报错处理console.error(err.message)reject(err)})});// #endif}function updateUseModal(packageInfo) {const {title, // 标题contents, // 升级内容is_mandatory, // 是否强制更新url, // 安装包下载地址platform, // 安装包平台type // 安装包类型} = packageInfo;let isWGT = type === 'wgt'let isiOS = !isWGT ? platform.includes('iOS') : false;let confirmText = isiOS ? '立即跳转更新' : '立即下载更新'return uni.showModal({title,content: contents,showCancel: !is_mandatory,confirmText,success: res => {if (res.cancel) return;// 安装包下载if (isiOS) {plus.runtime.openURL(url);return;}uni.showToast({title: '后台下载中……',duration: 1000});// wgt 和 安卓下载更新downloadTask = uni.downloadFile({url,success: res => {if (res.statusCode !== 200) {console.error('下载安装包失败', err);return;}// 下载好直接安装，下次启动生效plus.runtime.install(res.tempFilePath, {force: false}, () => {if (is_mandatory) {//更新完重启appplus.runtime.restart();return;}uni.showModal({title: '安装成功是否重启？',success: res => {if (res.confirm) {//更新完重启appplus.runtime.restart();}}});}, err => {uni.showModal({title: '更新失败',content: err.message,showCancel: false});});}});}});}

静默更新

可以看出静默更新分为三步：

  1. 后端提供一个下载更新包的url
  2. 前端uni.downloadFile该url地址
  3. 下载好后前端调用plus.runtime.install安装更新包
// 静默更新，只有wgt有if (is_silently) {uni.downloadFile({url: e.result.url,success: res => {if (res.statusCode == 200) {// 下载好直接安装，下次启动生效plus.runtime.install(res.tempFilePath, {force: false});}}});return;}

强制更新

首先，我们需要知道的是，plus.runtime.install成功后就已经安装完更新包了，用户下次打开app就会是最新版的app，这里强制更新的意思是是否立刻重启app，强制用户立刻使用最新版app

plus.runtime.install后有三种应用场景，这里官方写的很好，三种场景都处理了：

  1. 不征求客户意见，直接重启app，强制用户立刻使用最新版
  2. 征求客户意见，如果重启，用户使用最新版，如果不重启，等用户下次打开app显示最新版
  3. 不重启，等用户下次打开app显示最新版
    // 安装下载的安装包，下次启动生效plus.runtime.install(res.tempFilePath, {force: false}, () => {            // is_mandatory是后端返回的控制是否强制更新的变量            // 强制更新就是强制重启app，否则就是用户下次打开app才会更新            // 强制更新体验不好，还是下次打开更新会好很多if (is_mandatory) {// 更新完重启appplus.runtime.restart();return;}uni.showModal({title: '安装成功是否重启？',success: res => {if (res.confirm) {// 更新完重启appplus.runtime.restart();}}});}, err => {uni.showModal({title: '更新失败',content: err.message,showCancel: false});});

跳转应用商店

  1. 后端返回安装包平台和安装包类型
  2. 安装包类型是否是wgt，如果不是，判断安装包平台是否包含iOS，调用第三方程序打开url安装iOS更新包，iOS是跳转更新，其他是下载更新
  3. ios需要上架、通过市场安装，所以需要第三方程序打开url

plus.runtime.openURL表示调用第三方程序打开url进行安装，即跳转应用商店功能

function updateUseModal(packageInfo) {const {title, // 标题contents, // 升级内容is_mandatory, // 是否强制更新url, // 安装包下载地址platform, // 安装包平台type // 安装包类型} = packageInfo;let isWGT = type === 'wgt'let isiOS = !isWGT ? platform.includes('iOS') : false;let confirmText = isiOS ? '立即跳转更新' : '立即下载更新'return uni.showModal({title,content: contents,showCancel: !is_mandatory,confirmText,success: res => {if (res.cancel) return;// 安装包下载if (isiOS) {plus.runtime.openURL(url);return;}      ...}});}

用户取消下载

https://uniapp.dcloud.net.cn/api/request/network-file.html#downloadfile

var downloadTask = uni.downloadFile({url: 'https://www.example.com/file/test', //仅为示例，并非真实接口地址。complete: ()=> {}});downloadTask.abort();

如何打包wgt资源包

一、更改项目manifest.json中的应用版本名称与应用版本号

请添加图片描述
二、HBuilderX>发行>原生App-制作应用wgt包>确定
请添加图片描述
请添加图片描述
三、开发测试的时候，记得再改回原先的应用版本名称与应用版本号，不然版本跟线上的相同，安装更新包的时候就会出现WGT安装包中manifest.json文件的version版本不匹配，本地测试不了更新效果

如何查看wgt文件manifest.json

wgt包生成后会是.wgt后缀名，更改其后缀名为.zip，再解压，就可以查看manifest.json了

报错解决：WGT安装包中manifest.json文件的version版本不匹配

manifest.json中的版本大于等于了线上的版本，自行排查即可

通过uni-admin上传wgt资源包

请添加图片描述

uni-admin报错解决：超级管理员已存在

是因为admin账户是旧的，跟appid对不上，删除旧的admin账户，重新创建

来源地址：https://blog.csdn.net/qq_42611074/article/details/129039459

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

uniapp实现app检查更新与升级-uni-upgrade-center详解

后端开发2023-10-06
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯