uni-app整包更新与热更新方案(安卓和IOS)

原文链接：uni-app整包更新与热更新方案(安卓和IOS)

效果预览

大致效果：

打开App，进入首页（首次），检测线上是否存在新版本，如果存在，弹窗提示用户是否进行版本更新。Android 有热更新和整包更新，若为热更新，更新完会自动重启；若为整包更新，则进入浏览器（如果上架了应用市场，对应逻辑可以写成跳转到应用市场）进行下载。ios 则只能跳转到App Store进行更新。

如果用户点了取消按钮，在使用 App 的过程中不会再进行弹窗提示，等到用户下次进入 App 才会重新提示。

步骤

客户端版本管理

字段	解释
更新包名称	更新包名称，例如：HK-IOS-1.0.0
更新包文件	上传的 apk、ipa、wgt 文件
更新包版本号	更新包版本号，必须大于上一次更新的版本号
客户群体	1 普通用户、 2 会员
更新包类型	ANDROID 、 IOS
更新类型	否、整包更新、热更新
发行地区	港澳台、印尼、大陆
更新包描述	zh(中文) 、 en(英文) 、 in(印尼语)

这里的字段可根据自己的需求进行设计。

APP

version 组件

<template><view class="tzy-version"><u-modal :value="updateVsb":title="$t('version.versionUpdateTips')":show-cancel-button="isShowCancelBtn":cancel-text="$t('btn.cancel')":confirm-text="$t('version.update')"@cancel="cancelUpdate"@confirm="updateConfirm"><view class="version-online">V {{ updateObj.version }}</view><view class="model-version" slot-name="content"><scroll-view scroll-y="true" class="content-text"><view class="content-text"><u-input  v-model="targetDesc" type="textarea" :border="false":disabled="true" :auto-height="true":customStyle="{ 'font-size': '14px', color: '#96a0b5','word-break': 'break-word !important' }"/></view></scroll-view></view></u-modal></view>
</template>
<script>
import config from '@/common/js/config.js';
import phoneInfo from '@/common/js/phone-info.js';
export default {props: {// 页面来源pageFrom: {type: String,default: 'Home'},// 是否显示弹窗updateVsb: {type: Boolean,default: false},// 是否显示取消按钮isShowCancelBtn: {type: Boolean,default: true},updateObj: {type: Object,default: () => {}},targetDesc: {type: String,default: ''}},methods: {cancelUpdate() {if (this.pageFrom == 'Home') {uni.setStorageSync('cancelUpdate', 'true');}this.$emit('cancelClickEvent');},updateConfirm() {// 下载更新包const platform = phoneInfo.systemInfo.platform.toLowerCase();const url = config.uploadUrl + this.updateObj.url;const type = this.updateObj.type;// type仅为我司定义if (type == 1) {this.$emit('cancelClickEvent');uni.setStorageSync('cancelUpdate', 'true');uni.setStorageSync('widgetInfo', {});// 整包if (platform == 'android') {// 安卓打开网页下载plus.runtime.openURL(url);} else {// ios打开应用商店 https://appstoreconnect.apple.com/// apple id  在 app conection 上传的位置可以看到  const appleId = 'xxxxxx'; // 这里替换成你的 apple idplus.runtime.launchApplication({action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`},function(e) {console.log('Open system default browser failed: ' + e.message);});}} else if (type == 2) {//热更新console.log('热更新。。。。。。。。', url);plus.nativeUI.showWaiting(this.$t('dataDesc.updating'));uni.downloadFile({url: url,success: downloadResult => {if (downloadResult.statusCode === 200) {plus.runtime.install(downloadResult.tempFilePath, {force: false},function() {console.log('install success...');plus.nativeUI.closeWaiting();// 更新版本信息uni.setStorageSync('widgetInfo', {});plus.runtime.restart();},function(e) {console.error('install fail...');plus.nativeUI.closeWaiting();});}},fail: error => {console.log(error);}});}}}
};
</script>
<style lang="scss" scoped>.version-online {text-align: center;font-size: 14px;font-weight: 600;margin-top: 10px;}.content-text {max-height: 280px;}.model-version {padding: 12px 24px 30px;font-size: 14px;color: $cat_text_normal;}.desc-font {font-size: 14px !important;color: #96a0b5 !important;word-break: break-all !important;}
</style>

首页中引用 version 组件

<template><view><!-- 热更新组件 仅APP显示--><!-- #ifdef APP-PLUS --><versionUpdate pageFrom="Home" :updateVsb="updateVsb" :updateObj="updateObj" :targetDesc="targetDesc"@cancelClickEvent="cancelClickEvent"></versionUpdate><!-- #endif --></view>
</template>
<script>import { clientVersionQuery } from '@/api/client.js';import versionUpdate from '@/components/muudah-version/index.vue';export default {name: 'Home',components: {versionUpdate},data() {return {updateObj: {url: '',type: '',version: ''},updateVsb: false,targetDesc: '', // 版本更新描述};},methods: {getUpdate() {//当前版本号 转化为数字const tar_version = versionToNum(phoneInfo.manifestInfo.version);// android || iosconst platform = phoneInfo.systemInfo.platform.toLowerCase() == 'ios' ? 'IOS' : 'ANDROID';const version_to = this.versionTo; // 发行地区// 这里调接口 是否检测到版本更新clientVersion({client_type: platform,client_area: version_to}).then(res => {const {Code,data,sdk_path} = res;if (Code == 0 && sdk_path != '' && data.client_version != '') {// 线上的版本 转化为数字const versin_online = versionToNum(data.client_version);if (versin_online > tar_version && data.update_status > 0) {this.updateObj.url = sdk_path;this.updateObj.type = data.update_status;this.updateObj.version = data.client_version;// "update_status": 更新类型. 0: 否, 1: 整包更新, 2: 热更新const desc_str = eval('(' + data.desc + ')');// 这里根据语言包显示语言this.targetDesc = desc_str[this.language]; this.updateVsb = true;}}});},cancelClickEvent() {this.updateVsb = false;}}}
</script>

APP.vue

<script>import phoneInfo from '@/common/js/phone-info.js'; // 这里面保存了 设备的基本信息export default {onLaunch: function() {// 获取设备基本信息uni.getSystemInfo({success: res => {phoneInfo.systemInfo = res;}});// #ifdef APP-PLUSplus.screen.lockOrientation('portrait-primary'); //锁定屏幕方向uni.setStorageSync('cancelUpdate', 'false'); // 进来APP 重置更新弹窗// 获取App 当前版本号if (Object.keys(uni.getStorageSync('widgetInfo')).length == 0) {plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {phoneInfo.manifestInfo = widgetInfo;uni.setStorageSync('widgetInfo', widgetInfo);});}//#endif}};
</script>

最后，你还可以尝试了解 App升级中心 uni-upgrade-center 。

uni-app整包更新与热更新方案(安卓和IOS)相关推荐

mui，uniapp实现APP整包更新,并展示更新进度条
整包更新与热更新不同,整包更新比对的版本号是应用版本名称 //检测当前版本号dqbanben:function(){var that=this;//在页面中初始化plus插件mui.init();m ...
unity python热更新_Unity热更新介绍和测试方法
最近项目中增加了热更新了功能,程序也完成了相应的开发,接下来就需要对这个模块进行相应的测试工作了,在测试开始之前,了解下其原理总是很有好处的. 1:什么是热更新简单的理解就是:用户重启客户端就能实现 ...
bugly的全量更新与热更新
bugly开发文档地址:https://bugly.qq.com/docs/introduction/app-upgrade-introduction/?v=20180709165613: 我们在使用 ...
less webpack 热更新_webpack---less+热更新使用
最近尝试用less写界面,webpack进行打包,然后发现每次修改less时都需要重新执行webpack打包一下,于是就想到了webpack热更新这个功能. 一.使用less less是一门css预处 ...
uniapp自定义整包更新与热更新
// updateType: 用于判断是热更新还是整包更新,由后端返回 // updateAddress: 下载安装包的地址,由后端返回 if(updateType){// 整包更新var dtask ...
war包热更新_热更新实践：Bugly热更新打包及修复
上一篇[热更新:使用Bugly集成的Tinker]主要是说的配置,配置Tinker确实很麻烦,当然好处也是很大的.不仅支持各种类,so,资源的替换,体积也较小,是一款很强大的热修复工具.妈妈再也不用担 ...
热更新_热更新必懂3件事
今天我们来一起来说说热更新,谈起热更新,大家都觉得很难,都去找官方的热更新的解决方案,然后对着一步一步搞,原理还是不懂, 今天小编就带你来完整的讲解一下热更新的原理,搞懂原理,做热更新可以自己做,也可 ...
Android中的全量更新、增量更新以及热更新
在客户端开发过程中,我们可能会遇到这样一种需求:点击某个按钮弹出一个弹窗,提示我们可以更新到apk的某个版本,或者我们可以通过服务端接口进行强制更新.在这种需求中,我们是不需要通过应用商店来更新我们的 ...
修改html时webpack热更新,webpack热更新(HMR)
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 一.HMR介绍在我们开发react应用的时候,在配置了webpack-dev-server的前提下每一次的组件内容修改 ...