uniapp分两种更新机制:

一、整包更新(这种方式比较繁琐,即每次更新之后就要打云包,更新整包,用户体验也不好)

二、资源包更新,即wgt(因第一种方法想到利用资源更新,用户体验大大提升,用户更新之后无需跳转到应用市场或者浏览器去重新更包,俗一点就是无感更新)

 

wgt热更新的注意点

一、必须要获取appid

二、配置需要的版本名称和版本号

三、判断平台,区分安卓ios获取相对应的下载连接(第一次整包需要,之后全部是wgt资源包的下载地址)

四、在本地打包时和热更新时,App版本和wgt应用资源版本将不再保持一致。此时通过plus.runtime.version可获取App版本,通过plus.runtime.getProperty获取wgt资源版本。

五、versionName在云打包App和生成wgt应用资源时会使用。如需升级App版本,先修改此处再云打包。导出wgt资源用于离线打包和热更新时也会以此版本为依据。

下面附上代码

import Vue from 'vue'
import Vuex from 'vuex'
import http from '@/static/js/http.js'
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
		downloadTask: '',
		device: '', //设备环境
		progress: {}, //下载进度
	},
	mutations: {
		downloadAPP(state, data) {
			var wgtUrl = data.android_link;
			//判断安卓ios,判断是否第一次更包,整包更新还是资源包更新,只做ios?安卓也可以,统一一个方法,如果要做安卓,在这里做判断条件即可
			// var wgtUrl = 'http://godee.cdn.dtbctech.com/_UNI_6FC15A3.wgt'
			if (state.device == 'ios') {
				console.log('ios')
				if (!wgtUrl) {
					wgtUrl = data.ios_link;
				}
			}
			plus.nativeUI.showWaiting("下载更新文件...");
			state.downloadTask = uni.downloadFile({
				url: wgtUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						store.commit('installWgt', res.tempFilePath); //安装wgt包
					}
				},
				fail: (res) => {
					plus.nativeUI.alert("下载失败!");
				}
			});
			state.downloadTask.onProgressUpdate((res) => {
				if (state.progress.progress < res.progress) {
					state.progress = res
				}
			});
		},
		installWgt(state, path) {
			plus.nativeUI.showWaiting("安装更新文件...");
			plus.runtime.install(path, {}, function() {
				plus.nativeUI.closeWaiting();
				plus.nativeUI.alert("应用资源更新完成!", function() {
					plus.runtime.restart();
				});
			}, function(e) {
				plus.nativeUI.closeWaiting();
				plus.nativeUI.alert("安装更新文件失败[" + e.code + "]:" + e.message);
				if (e.code == 10) {
					alert('请清除临时目录');
				}
			});
		},
	},
	actions: {
		updateApp({
			commit,
			state
		}, is_force) {
			// is_force在点击事件的时候传,0或1,分辨是否弹出提示信息
			// let the_date = new Date().toDateString();//利用时间戳更新缓存,看实际项目需要
			// console.log('时间',the_date)
			let device = uni.getSystemInfoSync().platform; //判断设备
			let json_path = '';
			if (device.toLowerCase() == 'android') {
				console.log('安卓?')
				json_path = 'android'
			} else {
				console.log('ios?')
				json_path = 'ios'
				// return;//如果不需要上ios
			}
			state.device = json_path;
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				uni.request({
					url: '', //检查更新的服务器地址
					data: {
						// appid: plus.runtime.appid,
						// version: plus.runtime.version,
						// imei: plus.device.imei
						//这里只要是针对大后台,多个app管理配置传参
					},
					success: (result) => {
						var data = result.data.data;
						let cur_v = '1';
						let pass_v = '0';
						try {
							cur_v = parseInt(data.version_ios.split('.').join('')); //转换为number类型进行比较,后台返回的最新版本号
							if (isNaN(cur_v)) {
								cur_v = 1;
							}
							pass_v = parseInt(widgetInfo.version.split('.').join('')); //app本地版本号
							if (isNaN(pass_v)) {
								pass_v = 0;
							}
						} catch (e) {}
						if (cur_v > pass_v && data.ios_link) {
							uni.showModal({
								title: '更新提示',
								content: data.msg || '检测到有数据包更新,是否进行更新?', //可后台配置更新文字返回显示:data.msg
								confirmText: '立即进行',
								success: function(res) {
									if (res.confirm) {
										commit('downloadAPP', data)
									} else if (res.cancel) {}
								}
							});

						} else {
							if (is_force) {
								uni.showToast({
									title: '当前已是最新版本',
									icon: 'none'
								})
							}
						}
					},
					fail(e) {
						console.error(e);
						if (e) {
							uni.showToast({
								title: '更新失败,请联系客服!',
								icon: 'none',
							})
						}
					}
				});

			});
		},
	}
})
export default store

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐