uniapp的app端软件更新弹框

1:使用html PLUS实现:地址HTML5+ API Reference (html5plus.org),效果图

2:在app.vue的onLaunch生命周期中,代码如下:

javascript 复制代码
onLaunch: function() {
			
			let a = 0
			let view = new plus.nativeObj.View('maskView', {
				backgroundColor: "rgba(0,0,0,.6)",
				left: ((plus.screen.resolutionWidth / 2) - 150) + "px",
				bottom: ((plus.screen.resolutionHeight / 2) - 100) + "px",
				width: "300px",
				height: "200px",
				radius: "15px"
			})
			view.drawText('APP新版本更新', {
				top: '-80px',
				left: '0px'
			}, {
				size: '26px',
				color: '#FFFFFF'
			});
			//更新消息格式化
			var richText =
				'<font color = "#FF0000" style = "font-size:20px;"> 1:更新了11111。</font><br/><font color = "#FF0000" style = "font-size:20px;"> 2:更新了222。</font>';
			// let richText1 = richText.replace(/。/g, '。<br/>')
			view.drawRichText(richText, {
				top: '40px',
				left: '50px',
				width: '100%',
				height: 'wrap_content',
			})

			view.drawText('下载进度:0%', {
				top: '40px',
				left: '0px'
			}, {
				size: '18px',
				color: '#FFFFFF'
			}, 'xzjd');
			view.drawRect({
				color: '#6a8aff',
				radius: '10px'
			}, {
				bottom: '30px',
				width: '100%',
				height: '20px',
			});
			view.drawRect({
				radius: '10px',
				color: '#55ff00'
			}, {
				bottom: '30px',
				width: 0 + '%',
				height: '20px',
			}, 'jdt');
			view.show()
			let b = setInterval(() => {//根据自己需要,把这个定时器更换为监听下载进度的方法,以下代码介绍
				a++
				view.drawRect({
					color: '#55ff00',
					radius: '10px'
				}, {
					bottom: '30px',
					width: a + '%',
					height: '20px',
				}, 'jdt');
				view.drawText('下载进度:' + a + '%', {
					top: '40px',
					left: '0px'
				}, {
					size: '18px',
					color: '#FFFFFF'
				}, 'xzjd');
				if (a >= 100) {
					clearInterval(b)
					view.drawText('已完成', {
						top: '40px',
						left: '0px'
					}, {
						size: '20px',
						color: '#FFFFFF'
					}, 'xzjd');
				}
			}, 300)

			console.log('App Launch')
		}

3:这只是样式,需要把定时器更换为监听下载进度的方法

javascript 复制代码
var dtask = plus.downloader.createDownload(//下载事件,有一个返回值
	downUrl, {
	    filename: "_downloads/"
	},
	function(d, status) {
	// 下载完成
	if (status == 200) {
		plus.runtime.install(d.filename, {
		force: true
		}, function() {
			//进行重新启动;
		plus.runtime.restart();
	}, (e) => {
		    uni.showToast({
		        title: '安装升级包失败:' +JSON.stringify(e),icon: 'none'
		    })
		});
	} else {
			http.hint("下载升级包失败,请联系管理员,错误码: " +status)
	}
});
dtask.addEventListener("statechanged", (e) => {
	if (e && e.downloadedSize > 0) {
		let jindu = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
		///把上面定时器的代码放进来,a替换成jindu变量
	}
}, false);
dtask.start();
相关推荐
游戏开发爱好者811 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063213 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063213 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息14 小时前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”15 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
局外人LZ1 天前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
2501_915918412 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
前端呆头鹅2 天前
Websocket使用方案详解(uniapp版)
websocket·网络协议·uni-app
浮桥2 天前
uniapp+h5 公众号实现分享海报绘制
uni-app·notepad++
2501_916007472 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview