修改更新功能

src/App.vue

@@ -1,8 +1,8 @@
 <script>
 	// #ifdef APP-PLUS
 	import {
-		appUpdate
+		checkVersion
-	} from "@/common/appUpdate.js"
+	} from "@/pages/appUpdate/appUpdate.js"
 	// #endif
 
 	export default {
@@ -18,7 +18,7 @@
 			// plus.screen.lockOrientation('landscape-primary');
 			// // app 强制竖屏
 			// plus.screen.lockOrientation('portrait-primary'); 
-			// appUpdate(false);
+			// checkVersion(false);
 			// #endif
 
 		},

src/pages.json

@@ -11,6 +11,17 @@
 			}
 		},
 		{
+			"path": "pages/appUpdate/upgrade",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none",
+					"animationType": "none", //取消窗口动画
+					"background": "transparent" // 设置背景透明
+				}
+			}
+		}, {
 			"path": "pages/setter/index",
 			"style": {
 				"navigationBarTitleText": "设置",

src/pages/appUpdate/appUpdate.js

@@ -0,0 +1,70 @@
+
+export function checkVersion(isShowHint){
+	let curversionCode = 0;
+	plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
+		const data = {
+			action: 'checkVersion',
+			appid: plus.runtime.appid,
+			appVersion: plus.runtime.version,
+			wgtVersion: widgetInfo.version,
+			versionCode: widgetInfo.versionCode
+		}
+		curversionCode = data.versionCode
+		uni.request({
+			url:"http://192.168.0.105:9527/appUpdate.json",
+			method:"GET"
+		}).then(res=>{
+			console.log("当前版本提示", curversionCode)
+			var json = JSON.stringify(res)
+			console.log("获取更新数据", json)
+			if (res.data) {
+				if (res.data.versionCode > Number(curversionCode)) {
+					var downUrl = res.data.downUrl;
+					var content = res.data.content;
+					var version = res.data.versionCode;
+					var isForcedUpdate = false
+					var versionName =res.data.version
+					console.log("新版本提示"+getCurrentPageRoute())
+					if(getCurrentPageRoute()!="pages/appUpdate/upgrade"){
+						// uni.navigateTo({
+						// 	url: '/pages/index/upgrade?versionInfo='+encodeURIComponent(encodeURIComponent(JSON.stringify(res.data))),
+						// })
+						console.log("跳转")
+						uni.navigateTo({
+							url: '/pages/appUpdate/upgrade',
+							success() {
+								uni.$emit('upgrade-app', {
+									versionName,
+									content,
+									downUrl,
+									isForcedUpdate
+								})
+							}
+						})
+					}
+				} else {
+					if(isShowHint){
+						uni.showToast({
+							title: "当前是最新版本"
+						})
+					}
+					
+					console.log("没有新版本")
+				}
+			}
+		}).catch(error=>{
+			
+		})
+	})
+}
+
+//获取当前页面url
+export function getCurrentPageRoute () {
+	let currentRoute;
+	let pages = getCurrentPages() // 获取栈实例
+	if (pages&&pages.length) {
+		currentRoute = pages[pages.length - 1].route;
+
+	}
+	return currentRoute
+}

src/pages/appUpdate/upgrade.js

@@ -0,0 +1,97 @@
+/**
+ * @description H5+下载App
+ * @param downloadUrl:App下载链接
+ * @param progressCallBack:下载进度回调
+ */
+export const downloadApp = (downloadUrl, progressCallBack = () => {}, ) => {
+	return new Promise((resolve, reject) => {
+		//创建下载任务
+		const downloadTask = plus.downloader.createDownload(downloadUrl, {
+			method: "GET"
+		}, function (task, status) {
+			console.log(status,'status')
+			if (status == 200) { //下载成功
+				resolve(task.filename)
+
+			} else {
+				reject('fail')
+				uni.showToast({
+					title: '下载失败',
+					duration: 1500,
+					icon: "none"
+				});
+			}
+		})
+		//开始执行下载
+		downloadTask.start();
+		//监听下载过程
+		downloadTask.addEventListener("statechanged", function(task,
+			status) {
+				console.log("下载"+task.totalSize)
+			switch (task.state) {
+				case 1: // 开始  
+					break;
+				case 2: //已连接到服务器  
+					break;
+				case 3: // 已接收到数据  
+				console.log(task,'task')
+					let hasProgress = task.totalSize && task.totalSize > 0 //是否能获取到App大小
+					if (hasProgress) {
+						let current = parseInt(100 * task.downloadedSize / task.totalSize); //获取下载进度百分比
+						progressCallBack(current,task.downloadedSize,task.totalSize)
+					}
+					break;
+				case 4: // 下载完成       
+					break;
+			}
+		});
+	
+	})
+
+
+}
+/**
+ * @description H5+安装APP
+ * @param fileName:app文件名
+ * @param callBack:安装成功回调
+ */
+export const installApp = (fileName, callBack = () => {}) => {
+	//注册广播监听app安装情况
+	onInstallListening(callBack);
+	//开始安装
+	plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {
+		//成功跳转到安装界面
+	}, function(error) {
+		console.log("安装失败"+error)
+		uni.showToast({
+			title: '安装失败',
+			duration: 1500,
+			icon: "none"
+		});
+	})
+
+}
+/**
+ * @description 注册广播监听APP是否成功
+ * @param callBack:安装成功回调函数
+ */
+const onInstallListening = (callBack = () => {}) => {
+
+	let mainActivity = plus.android.runtimeMainActivity(); //获取activity
+	//生成广播接收器
+	let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
+		onReceive: (context, intent) => { //接收广播回调  
+			plus.android.importClass(intent);
+			mainActivity.unregisterReceiver(receiver); //取消监听
+			callBack()
+		}
+	});
+	let IntentFilter = plus.android.importClass('android.content.IntentFilter');
+	let Intent = plus.android.importClass('android.content.Intent');
+	let filter = new IntentFilter();
+	filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听apk安装     
+	filter.addDataScheme("package");
+	mainActivity.registerReceiver(receiver, filter); //注册广播
+
+
+}

src/pages/appUpdate/upgrade.vue

@@ -0,0 +1,283 @@
+<template>
+	<view class="upgrade-popup">
+		<image class="header-bg" src="./upgrade_bg.png" mode="widthFix"></image>
+		<view class="main">
+			<view class="version">发现新版本:{{versionName}}</view>
+			<view class="content">
+				<text class="title">更新内容</text>
+				<view class="desc" v-html="versionDesc"></view>
+			</view>
+			<!--下载状态-进度条显示 -->
+			<view class="footer" v-if="isStartDownload">
+				<view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
+					<!-- 进度条 -->
+					<view v-if="hasProgress" style="height: 100%;">
+						<view class="txt">{{percentText}}</view>
+						<view class="progress" :style="setProStyle"></view>
+					</view>
+					<view v-else>
+						<view class="btn upgrade force">{{ isDownloadFinish  ? '立即安装' :'下载中...'}}</view>
+					</view>
+				</view>
+			</view>
+			<!-- 强制更新 -->
+			<view class="footer" v-else-if="isForceUpdate">
+				<view class="btn upgrade force" @click="handleUpgrade">立即更新</view>
+			</view>
+			<!-- 可选择更新 -->
+			<view class="footer" v-else>
+				<view class="btn close" @click="handleClose">以后再说</view>
+				<view class="btn upgrade" @click="handleUpgrade">立即更新</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		downloadApp,
+		installApp
+	} from './upgrade.js'
+	export default {
+		data() {
+			return {
+				isForceUpdate: false, //是否强制更新
+				versionName: '', //版本名称
+				versionDesc: '', //更新说明
+				downloadUrl: '', //APP下载链接
+				isDownloadFinish: false, //是否下载完成
+				hasProgress: false, //是否能显示进度条
+				currentPercent: 0, //当前下载百分比
+				isStartDownload: false, //是否开始下载
+				fileName: '', //下载后app本地路径名称
+			}
+		},
+		computed: {
+			//设置进度条样式，实时更新进度位置
+			setProStyle() {
+				return {
+					width: (510 * this.currentPercent / 100) + 'rpx' //510：按钮进度条宽度
+				}
+			},
+			//百分比文字
+			percentText() {
+				let percent = this.currentPercent;
+				if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
+				if (percent < 100) return `下载中${percent}%`
+				return '立即安装'
+
+			}
+		},
+		
+
+		onBackPress(options) {
+			// 禁用返回
+			if(this.isForceUpdate&&options.from == 'backbutton'){
+					return true;
+			}
+			return false
+
+		},
+		created() {
+			uni.$on('upgrade-app',this.bindEmit)
+		},
+		beforeDestroy() {
+			uni.$off('upgrade-app',this.bindEmit)
+		},
+		methods: {
+			bindEmit(e){
+				let {versionName,content,downUrl,isForcedUpdate}=e
+				this.versionName=versionName
+				this.versionDesc=content
+				this.downloadUrl=downUrl	
+			},
+			//更新
+			handleUpgrade() {
+				if (this.downloadUrl) {
+					this.isStartDownload = true
+					//开始下载App
+					downloadApp(this.downloadUrl, current => {
+						//下载进度监听
+						console.log("下载中"+current)
+						this.hasProgress = true
+						this.currentPercent = current
+						
+
+					}).then(fileName => {
+						//下载完成
+						console.log("下载完成")
+						this.isDownloadFinish = true
+						this.fileName = fileName
+						if (fileName) {
+							console.log("自动安装")
+							//自动安装App
+							this.handleInstallApp()
+						}
+					}).catch(e => {
+						console.log(e, 'e')
+					})
+				} else {
+					uni.showToast({
+						title: '下载链接不存在',
+						icon: 'none'
+					})
+				}
+
+			},
+			//安装app
+			handleInstallApp() {
+				//下载完成才能安装，防止下载过程中点击
+				if (this.isDownloadFinish && this.fileName) {
+					installApp(this.fileName, () => {
+						//安装成功,关闭升级弹窗
+						uni.navigateBack()
+					})
+				}
+			},
+			//关闭返回
+			handleClose() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style>
+	page {
+		background: rgba(0, 0, 0, 0.5);/**设置窗口背景半透明*/
+	}
+</style>
+<style lang="scss" scoped>
+	.upgrade-popup {
+		width: 580rpx;
+		height: auto;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: #fff;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		border: 1px solid #eee;
+	}
+
+	.header-bg {
+		width: 100%;
+		margin-top: -112rpx;
+	}
+
+	.main {
+		padding: 10rpx 30rpx 30rpx;
+		box-sizing: border-box;
+		.version {
+			font-size: 36rpx;
+			color: #026DF7;
+			font-weight: 700;
+			width: 100%;
+			text-align: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			letter-spacing: 1px;
+		}
+
+		.content {
+			margin-top: 60rpx;
+
+			.title {
+				font-size: 28rpx;
+				font-weight: 700;
+				color: #000000;
+			}
+
+			.desc {
+				box-sizing: border-box;
+				margin-top: 20rpx;
+				font-size: 28rpx;
+				color: #6A6A6A;
+				max-height: 40vh;
+				overflow-y: auto;
+			}
+		}
+
+		.footer {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			flex-shrink: 0;
+			margin-top: 100rpx;
+
+			.btn {
+				width: 246rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				position: relative;
+				z-index: 999;
+				height: 96rpx;
+				box-sizing: border-box;
+				font-size: 32rpx;
+				border-radius: 10rpx;
+				letter-spacing: 1rpx;
+
+				&.force {
+					width: 500rpx;
+				}
+
+				&.close {
+					border: 1px solid #E0E0E0;
+					margin-right: 25rpx;
+					color: #000;
+					background-color: #fff;
+				}
+
+				&.upgrade {
+					background-color: #026DF7;
+					color: white;
+				}
+			}
+
+			.progress-view {
+				width: 510rpx;
+				height: 90rpx;
+				display: flex;
+				position: relative;
+				align-items: center;
+				border-radius: 6rpx;
+				background-color: #dcdcdc;
+				display: flex;
+				justify-content: flex-start;
+				padding: 0px;
+				box-sizing: border-box;
+				border: none;
+				overflow: hidden;
+
+				&.active {
+					background-color: #026DF7;
+				}
+
+				.progress {
+					height: 100%;
+					background-color: #026DF7;
+					padding: 0px;
+					box-sizing: border-box;
+					border: none;
+					border-top-left-radius: 10rpx;
+					border-bottom-left-radius: 10rpx;
+
+				}
+
+				.txt {
+					font-size: 28rpx;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					color: #fff;
+				}
+			}
+		}
+	}
+</style>

src/pages/login/index.vue

@@ -70,6 +70,11 @@
 </template>
 
 <script>
+	// #ifdef APP-PLUS
+	import {
+		checkVersion
+	} from "@/pages/appUpdate/appUpdate.js"
+	// #endif
 	import {
 		mapState,
 		mapMutations
@@ -122,19 +127,14 @@
 				})
 			}
 
+		},
+		onShow(){
+			
 		},
 		onLoad() {
-			// getCaptchaImage().then(res => {
+			// #ifdef APP-PLUS
-			// 	if (res) {
+			checkVersion(false)
-			// 		var code = res.data.img;
+			// #endif
-			// 		let base64 = 'data:image/jpeg;base64,' + code
-			// 		// console.log("图标", base64)
-			// 		this.imageSrc = base64.replace(/[\r\n]/g, "")
-			// 		this.uuid = res.data.uuid
-			// 	}
-			// }).catch(error => {
-			// 	this.showErrorMessage(error);
-			// })
 		},
 		methods: {
 			// ...mapMutations(['login']),

src/pages/setter/index.vue

@@ -44,8 +44,8 @@
 	
 	// #ifdef APP-PLUS
 	import {
-		appUpdate
+		checkVersion
-	} from "@/common/appUpdate.js"
+	} from "@/pages/appUpdate/appUpdate.js"
 	// #endif
 	import {
 		ref,
@@ -126,7 +126,7 @@
 
 	function update() {
 		console.log("update");
-		appUpdate(true)
+		checkVersion(true)
 	}
 	function modifiedPassWord() {
 		uni.navigateTo({

src/router/index.js

@@ -3,7 +3,8 @@
 import versionTool from '@/libs/versionUpdate.js';
 
 const whiteList = [
-	'/pages/login/index'
+	'/pages/login/index',
+	'/pages/appUpdate/upgrade'
 ]
 let apages =  getCurrentPages()
 console.log("getCurrentPages",apages)

src/router/my_router.js

@@ -2,7 +2,7 @@
 // 页面白名单，不受拦截
 const whiteList = [
 	'/pages/login/index',
-	'/pages/config/config'
+	'/pages/appUpdate/upgrade'
 ]
 
 function hasPermission(url) {