vue项目通过HBuilder打包成apk,实现apk自动更新下载

vue 项目通过 HBuilder 打包成 apk,实现 apk 自动更新下载

1、vue 项目通过 HBuilder 打包成 apk
  • vue 项目在终端执行 npm run build 打包成 dist 文件,生成的 dist 文件在 项目根目录下
    vue项目通过HBuilder打包成apk,实现apk自动更新下载_第1张图片

  • 在 HBuilder 中 新建一个项目
    vue项目通过HBuilder打包成apk,实现apk自动更新下载_第2张图片

  • 默认选择 5+APP 的默认模板项目
    vue项目通过HBuilder打包成apk,实现apk自动更新下载_第3张图片

  • 将 vue 项目中的 dist 文件复制到 HBuilder 项目中
    vue项目通过HBuilder打包成apk,实现apk自动更新下载_第4张图片

实现 apk 自动更新下载

index.html 中添加

		<script type='text/javascript'>
			document.addEventListener('plusready', function() {
				// 版本更新下载
				// 获取当前版本
				const localVersion = plus.runtime.versionCode
				console.log('localVersion' + localVersion)
				// 获取线上版本 发送 POST 请求  
				var xhr = new XMLHttpRequest()
				xhr.open('POST', '线上http地址', true)
				xhr.onreadystatechange = function() {
					const jsonData = JSON.parse(xhr.responseText)
					var serverVersion = jsonData.versionCode
					console.log('serverVersion' + serverVersion)
				}
				xhr.send()
				// 比较版本号
				if (this.serverVersion == this.localVersion) {
					alert('当前已经是最新版本了!')
				} else {
					var confirmText = confirm('发现最新版本,是否立即更新?')
					if (confirmText) {
						console.log('下载最新版本')
						// 下载最新版本
						let url = 'https地址'
						var dtask = plus.downloader.createDownload(url, {
								method: "GET"
							},
							function(d, status) {
								// 下载完成
								if (status = 200) {
									console.log('Download success: ' + d.filename)
									// 下载完成的文件路径  
									var filePath = d.filename
									// 安装 apk
									plus.runtime.install(filePath, {
										force: true
									}, function() {
										console.log('更新成功');
										alert('安装成功,重启中...')
									}, function(e) {
										console.error('更新失败: ' + e.message);
										alert('安装失败')
									})
								} else {
									alert('下载失败,请重新下载!')
									console.log('Download failed: ' + status)
								}
							})
						// 开始下载  
						dtask.start()
					} else {
						alert('您选择了取消!')
					}
				}
			})
		</script>```

你可能感兴趣的:(11,vue.js,前端,javascript)