uniapp使用wgt热更新

最近项目要使用强制更新或者非强制的非应用市场更新

使用官方的热更新实现可行度不太高，公司样式比较复杂

然后自己研究了一下

步骤1

        先写一个页面，自己定义哈

<view class="" v-if="!show" style="position: fixed;top: 0;left: 0;background-color: rgba(130, 130, 130, 0.7);width: 750rpx;height: 100vh;">
			<view class="u-mask" >
				<view class="warp">
					<view class="" style="text-align: center;">
						<image src="../../static/LOGO-PNG.png" mode="widthFix" style="width: 120rpx;margin-top: 30rpx;border-radius: 50%;"></image>
					</view>
					<view class="title">
						发现新版本
					</view>
					<view class="content">
						<scroll-view scroll-y="true" class="scroll">
							<view class="content-title">
								{{updateData.version_name}}
								<!-- 版本的文字 -->
							</view>
							<view class="u-update-content">
								<rich-text :nodes="updateData.desc"></rich-text>
							</view>
						</scroll-view>
					</view>
					<view class="btn">
						<view class="btns" @click="confirmWgt">
							立即更新
						</view>
					</view>
                       <!-- 删除图片 -->
					<view class="" style="margin-top: 60rpx;" v-if="force==0">
						<u-icon name="close-circle-fill" @click="closetos" color="#4D4D4D" style="margin-left: 300rpx;" size="50rpx" ></u-icon>
					</view>
				</view>
			</view>
			
		</view>

步骤2 

        搞一个下载中的小提示框，我用的是uview的

<uni-popup ref="center" :mask-click="false">
			<view class="loding">
				<image src="../../static/LOGO-PNG.png" mode=""></image>
				<!-- uview组件 -->
				<u-line-progress style="margin-top: 40rpx;" :percentage="percentSize" activeColor="#00D38F"></u-line-progress>
				
				<!-- uniapp组件 -->
				<!-- <progress activeColor="#EB344A" :percent="percentSize"></progress> -->
				<view class="" style="margin-top: 40rpx;">
					<text >正在下载安装中</text>
				</view>
				
			</view>
		</uni-popup>

步骤3

        配置点击按钮

confirmWgt() {
				this.show = false
				// this.closeModal();
				this.downloadWgt();
				this.$refs.center.open('center')
				// this.closeModal();
			},

步骤4

配置处理事件

downloadWgt() {
                // 预先配置wgt文件后缀名因为保存的时候没有后缀名
				var name = 'test.wgt'
				// plus.nativeUI.showWaiting("下载wgt文件...");  
                // this.updateData.href 是下载路径，可以从后端获取
                // filename是文件名称自定义不然会出现文件名称重复而找不到对应的文件报错
				let dark = plus.downloader.createDownload(this.updateData.href, {
					 filename: "_doc/update/" + (new Date()).valueOf() + name, retry: 1 
				}, (d, status) => {
					console.log(d);
					if (status == 200) {
						console.log("下载wgt成功：" + JSON.stringify(d.filename));
						// plus.nativeUI.alert("下载wgt成功1");
						if (d.filename) {
							this.installWgt(d.filename); // 安装wgt包
						}
					} else {
						// console.log("下载wgt失败！");  
						plus.nativeUI.alert("下载wgt失败！");
					}
					// plus.nativeUI.closeWaiting();  
				});

				dark.start();
				dark.addEventListener("statechanged", (download, status) => {
					if (download.downloadedSize > 0) {
						this.percentSize = parseInt(download.downloadedSize / download.totalSize * 100);
						console.log(this.percentSize, "百分比")
					}
					if (download.state == 4) {
						this.isShowLoading = false;
						this.$emit("finshUpdate", true)
					}
				}, false);
			},

步骤5

        安装wgt

       

installWgt(path) {
				console.log(path);
				
				// path = '_doc/update/1690452492061/1690452492259.wgt'
				// plus.nativeUI.showWaiting("安装2"+path);  
				plus.runtime.install(path, {}, function() {
					plus.nativeUI.closeWaiting();
					// plus.runtime.restart();  
					plus.nativeUI.alert("应用更新完成！", function() {
						plus.runtime.restart();
					});
					// uni.preloadPage({
					// 	url: "../home/home"
					// });
					this.timer = setTimeout(() => {
						this.goHome()
					}, 2000)

				}, function(e) {
					plus.nativeUI.closeWaiting();
					console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
					plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
				});
			},

完事啦