首頁 web前端 uni-app 介紹 uni-app線上升級和熱更新實現

介紹 uni-app線上升級和熱更新實現

Jan 05, 2021 am 09:43 AM
uni-app 線上升級 熱更新

uniapp開發教學欄位分析APP升級的業務

介紹 uni-app線上升級和熱更新實現

##推薦(免費):uniapp開發教學

#第一、分析APP升級的業務

1、每次開啟APP需要在全域App.vue中去偵測請求後台介面

2、比較版本號校驗是否升級 

3、辨識是熱更新還是線上升級,處理不同業務,熱更新下載包使用官方api升級(按照實際介面返回欄位判斷)

4、識別是強制升級還是非強制升級彈框提醒用戶

5、識別是IOS還是Android升級用戶點擊跳轉升級

第二、寫程式碼

1、進入APP.vue  onLaunch下

2、依照業務分析編寫升級程式碼

//#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
登入後複製

以上是介紹 uni-app線上升級和熱更新實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1652
14
CakePHP 教程
1413
52
Laravel 教程
1304
25
PHP教程
1251
29
C# 教程
1224
24
VSCode中如何開發uni-app? (教學分享) VSCode中如何開發uni-app? (教學分享) May 13, 2022 pm 08:11 PM

VSCode中如何開發uni-app?以下這篇文章跟大家分享一下VSCode中開發uni-app的教學課程,這可能是最好、最詳細的教學了。快來看看!

利用uniapp開發一個簡單的地圖導航 利用uniapp開發一個簡單的地圖導航 Jun 09, 2022 pm 07:46 PM

怎麼利用uniapp開發一個簡單的地圖導航?本篇文章就來提供大家一個製作簡單地圖的思路,希望對大家有幫助!

聊聊如何利用uniapp開發一個貪吃蛇小遊戲吧! 聊聊如何利用uniapp開發一個貪吃蛇小遊戲吧! May 20, 2022 pm 07:56 PM

如何利用uniapp開發一個貪吃蛇小遊戲?以下這篇文章就手把手帶大家在uniapp中實現貪吃蛇小遊戲,希望對大家有幫助!

uni-app vue3介面請求怎麼封裝 uni-app vue3介面請求怎麼封裝 May 11, 2023 pm 07:28 PM

uni-app接口,全域方法封裝1.在根目錄建立一個api文件,在api資料夾中建立api.js,baseUrl.js和http.js檔案2.baseUrl.js檔案程式碼exportdefault"https://XXXX .test03.qcw800.com/api/"3.http.js檔案程式碼exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

手把手帶你開發一個uni-app日曆插件(並發布) 手把手帶你開發一個uni-app日曆插件(並發布) Jun 30, 2022 pm 08:13 PM

這篇文章手把手帶大家開發一個uni-app日曆插件,介紹下一個日曆插件是如何從開發到發布的,希望對大家有幫助!

實例講解uniapp實現多選框的全選功能 實例講解uniapp實現多選框的全選功能 Jun 22, 2022 am 11:57 AM

這篇文章為大家帶來了關於uniapp的相關知識,其中主要整理了實現多選框的全選功能的相關問題,無法實現全選的原因是動態修改checkbox的checked字段時,界面上的狀態能夠即時變化,但無法觸發checkbox-group的change事件,下面一起來看一下,希望對大家有幫助。

聊聊uniapp的scroll-view下拉加載 聊聊uniapp的scroll-view下拉加載 Jul 14, 2022 pm 09:07 PM

uniapp怎麼實作scroll-view下拉載入?以下這篇文章聊聊uniapp微信小程式scroll-view的下拉加載,希望對大家有幫助!

實例詳解uniapp如何實現電話錄音功能(附代碼) 實例詳解uniapp如何實現電話錄音功能(附代碼) Jan 05, 2023 pm 04:41 PM

這篇文章為大家帶來了關於uniapp的相關知識,其中主要介紹了怎麼用uniapp實現撥打電話並且還能同步錄音的功能,感興趣的朋友一起來看一下吧,希望對大家有幫助。

See all articles