HBuilder----APP热更新升级

Ta曰丿、她活

已于 2024-02-27 11:31:09 修改

阅读量1.5k

点赞数 2

分类专栏： HBuilder 文章标签： javascript

于 2020-07-21 12:41:24 首次发布

本文链接：https://blog.csdn.net/zlw_spider/article/details/107486182

版权

HBuilder 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HBuilder打包升级分两种方式：

【1】打包下载覆盖安装

【2】热更新app，制作wgt包

重点是APP如何实现热更新：

【2.1】制作wgt包

点击确定制作升级包。

【2.2】具体实现逻辑

app检测是否有新版本，有的话提示更新下载，实现热更新的代码

// 这里是热更新的逻辑
owner.downLoad = function(option = {
			        url : '',
			loadBefore : function(){},
			loading : function(){},
			install : function(){},
			installed : function(){},
			error : function(){}
		}){
			//var waiting = plus.nativeUI.showWaiting("下载升级包...",{height:"150px",width:"150px"})
           // 这里是wgt包所在的路径，我这里是测试版
			option.url = 'http://zlw.ngrok.zhoulw.cn:8080/zlw/movie/sdbigand.wgt';
			var dtask = plus.downloader.createDownload(option.url, {
				filename : "_downloads/update/"
			});
			dtask.addEventListener("statechanged", function (d, status) {
				if(d.state == 2){
					option.loadBefore()
				}
				if(d.state == 3) {
					option.loading({
						load_size : (d.downloadedSize/1024).toFixed(0),
						size : (d.totalSize/1024).toFixed(0),
						percent : (d.downloadedSize/1024).toFixed(0) /  (d.totalSize/1024).toFixed(0) *100
					})
				} else if(d.state == 4 && status == 200) {
					console.debug("下载升级包成功:" + d.filename);
					// 安装升级包
					option.install()
					plus.runtime.install(d.filename, {}, function (e) {
						// 安装成功
						if(d.filename.indexOf('apk') > -1){
							return false
						}
						option.installed()
					}, function (e) {
						option.error()
						console.log("安装wgt文件失败:"+e.message);
					});
				} else if(d.state == 4) {
					option.error()
				}
			});	
			return dtask
		}

<！-- 热更新下载时的样式 -->
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<style>
	</style>
	<body style="background: transparent;">
		<div style="background: rgba(50, 50, 50,0.5);;height: 100%;position: absolute;width: 100%;">
			<div class="mui-card" style="top: 40%;">
				<div class="mui-card-header">正在下载</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div style="height: 5px;"  id="progressbar" class="mui-progressbar"><span></span></div>
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link pause">暂停</a>
					<a class="mui-card-link cancel">取消下载</a>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app/app.js"></script>
		<script type="text/javascript">
			mui.init()
			function setTitle(e){
				document.querySelector('.mui-card .mui-card-header').innerText = e
			}
			function setProgressbar(num){
				mui('#progressbar').progressbar().setProgress(num);
			}
			mui('#progressbar').progressbar().show();
			
			var self
			mui.plusReady(function(){
				self = plus.webview.currentWebview()
				var down = app.downLoad({
					url : self.downurl,
					loadBefore : function(){
						setTitle('开始下载')
						setProgressbar(0)
					},
					loading : function(a){
						setTitle('正在下载(' + a.load_size + 'kb/' + a.size +'kb)')
						if(a.percent >= 95)
							setProgressbar(95)
						else 
							setProgressbar(a.percent)
					},
					install : function(){
						setProgressbar(95)
						setTitle('开始安装')
					},
					installed : function(){
						setTitle('安装完成')
						setProgressbar(100)
						setTimeout(function(){
							plus.runtime.restart()
						},500)
					},
					error : function(){
						self.close()
					}
				})
				//开始下载
				
				mui('.mui-card-footer').on('tap','.cancel',function(){
					console.log('取消')
					plus.downloader.clear()
					self.close()
				})
				mui('.mui-card-footer').on('tap','.pause',function(){
					down.pause()
					this.classList.add('start')
					this.classList.remove('pause')
					this.innerText = '开始'
				})
				mui('.mui-card-footer').on('tap','.start',function(){
					down.resume()
					this.classList.add('pause')
					this.classList.remove('start')
					this.innerText = '暂停'
				})
				down.start();
			})
		</script>
	</body>

</html>