Introducing the implementation of uni-app online upgrade and hot update

uniapp development tutorial Column analysis business of APP upgrade

##Recommended (free): uniapp development tutorial

First, analyze the business of APP upgrade

1. When opening the APP for the first time, you need to detect the request background interface in the global App.vue

2. Compare the version number to verify whether it is upgraded

3. Identify whether it is a hot update or an online upgrade, and handle different services. The hot update download package uses the official api to upgrade (judged according to the actual interface return field)

4. Identify whether it is a forced upgrade or a non-forced upgrade. A pop-up box reminds the user

5. Identify whether it is an IOS or Android upgrade. The user clicks to jump to upgrade

Second, write the code

1. Enter APP.vue onLaunch

2. Write the upgrade code according to the business analysis

//#ifdef APP-PLUS
			// APP检测更新 具体打包流程可以参考：https://ask.dcloud.net.cn/article/35667
			plus.screen.lockOrientation('portrait-primary'); //竖屏正方向锁定
            //获取是否热更新过
			const updated = uni.getStorageSync('updated'); // 尝试读取storage

			if (updated.completed === true) {
				// 如果上次刚更新过
				// 删除安装包及安装记录
				console.log('安装记录被删除，更新成功');
				uni.removeSavedFile({
					filePath: updated.packgePath,
					success: res => {
						uni.removeStorageSync('updated');
					}
				});
			} else if (updated.completed === false) {
				uni.removeStorageSync('updated');
				plus.runtime.install(updated.packgePath, {
					force: true
				});
				uni.setStorage({
					key: 'updated',
					data: {
						completed: true,
						packgePath: updated.packgePath
					},
					success: res => {
						console.log('成功安装上次的更新，应用需要重启才能继续完成');
					}
				});
				uni.showModal({
					title: '提示',
					content: '应用将重启以完成更新',
					showCancel: false,
					complete: () => {
						plus.runtime.restart();
					}
				});
			} else {
				//获取当前系统版本信息
				plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
					//请求后台接口 解析数据 对比版本
					this.$Request.getT('/appinfo/').then(res => {
						res = res.data[0];
						if (res.wgtUrl && widgetInfo.version < res.version) {
							let downloadLink = &#39;&#39;;
							let androidLink = res.androidWgtUrl;
							let iosLink = res.iosWgtUrl;
							let ready = false;
							//校验是是不是热更新
							if (res.wgtUrl.match(RegExp(/.wgt/))) {
								// 判断系统类型
								if (plus.os.name.toLowerCase() === &#39;android&#39;) {
									console.log(&#39;安卓系统&#39;);
									if (androidLink && androidLink !== &#39;#&#39;) {
										// 我这里默认#也是没有地址，请根据业务自行修改
										console.log(&#39;发现下载地址&#39;);
										// 安卓：创建下载任务
										if (androidLink.match(RegExp(/.wgt/))) {
											console.log(&#39;确认wgt热更新包&#39;);
											downloadLink = androidLink;
											ready = true;
										} else {
											console.log(&#39;安卓推荐.wgt强制更新，.apk的强制更新请您自行修改程序&#39;);
										}
									} else {
										console.log(&#39;下载地址是空的，无法继续&#39;);
									}
								} else {
									console.log(&#39;苹果系统&#39;);
									if (iosLink && iosLink !== &#39;#&#39;) {
										// 我这里默认#也是没有地址，请根据业务自行修改
										console.log(&#39;发现下载地址&#39;);
										// 苹果(A)：进行热更新（如果iosLink是wgt更新包的下载地址）判断文件名中是否含有.wgt
										if (iosLink.match(RegExp(/.wgt/))) {
											console.log(&#39;确认wgt热更新包&#39;);
											downloadLink = iosLink;
											ready = true;
										} else {
											console.log(&#39;苹果只支持.wgt强制更新&#39;);
										}
									} else {
										console.log(&#39;下载地址是空的，无法继续&#39;);
									}
								}
								if (ready) {
									console.log(&#39;任务开始&#39;);
									let downloadTask = uni.downloadFile({
										url: downloadLink,
										success: res => {
											if (res.statusCode === 200) {
												// 保存下载的安装包
												console.log(&#39;保存安装包&#39;);
												uni.saveFile({
													tempFilePath: res.tempFilePath,
													success: res => {
														const packgePath = res.savedFilePath;
														// 保存更新记录到stroage，下次启动app时安装更新
														uni.setStorage({
															key: &#39;updated&#39;,
															data: {
																completed: false,
																packgePath: packgePath
															},
															success: () => {
																console.log(&#39;成功保存记录&#39;);
															}
														});
														// 任务完成，关闭下载任务
														console.log(&#39;任务完成，关闭下载任务，下一次启动应用时将安装更新&#39;);
														downloadTask.abort();
														downloadTask = null;
													}
												});
											}
										}
									});
								} else {
									console.log(&#39;下载地址未准备，无法开启下载任务&#39;);
								}
							} else {
								//不是热更新是在线更新 校验是否强制升级
								if (res.method == &#39;true&#39;) {
									uni.showModal({
										showCancel: false,
										confirmText: &#39;立即更新&#39;,
										title: &#39;发现新版本&#39;,
										content: res.des,
										success: res => {
											if (res.confirm) {
												this.$queue.showLoading(&#39;下载中...&#39;);
												if (uni.getSystemInfoSync().platform == &#39;android&#39;) {
													uni.downloadFile({
														url: androidLink,
														success: downloadResult => {
															if (downloadResult.statusCode === 200) {
																plus.runtime.install(
																	downloadResult.tempFilePath, {
																		force: false
																	},
																	d => {
																		console.log(&#39;install success...&#39;);
																		plus.runtime.restart();
																	},
																	e => {
																		console.error(&#39;install fail...&#39;);
																	}
																);
															}
														}
													});
												}
												if (uni.getSystemInfoSync().platform == &#39;ios&#39;) {
													plus.runtime.openURL(iosLink, function(res) {});
												}
											} else if (res.cancel) {
												console.log(&#39;取消&#39;);
											}
										}
									});
								} else {
									uni.showModal({
										title: &#39;发现新版本&#39;,
										confirmText: &#39;立即更新&#39;,
										cancelText: &#39;下次更新&#39;,
										content: res.des,
										success: res => {
											if (res.confirm) {
												this.$queue.showLoading(&#39;下载中...&#39;);
												if (uni.getSystemInfoSync().platform == &#39;android&#39;) {
													uni.downloadFile({
														url: androidLink,
														success: downloadResult => {
															if (downloadResult.statusCode === 200) {
																plus.runtime.install(
																	downloadResult.tempFilePath, {
																		force: false
																	},
																	d => {
																		console.log(&#39;install success...&#39;);
																		plus.runtime.restart();
																	},
																	e => {
																		console.error(&#39;install fail...&#39;);
																	}
																);
															}
														}
													});
												}
												if (uni.getSystemInfoSync().platform == &#39;ios&#39;) {
													plus.runtime.openURL(iosLink, function(res) {});
												}
											} else if (res.cancel) {
												console.log(&#39;取消&#39;);
											}
										}
									});
								}
							}
						}
					});
				});
			}

			//#endif

The above is the detailed content of Introducing the implementation of uni-app online upgrade and hot update. For more information, please follow other related articles on the PHP Chinese website!