对接蒲公英优化升级体验

App.vue

@@ -27,25 +27,6 @@
 				//版本验证
 				const version = await getVersions()
 				const systemData = this.$u.sys()
-				if (systemData.appVersion != version) {
-					uni.showModal({
-						title: '发现新版本',
-						content: '版本：V ' + version,
-						cancelText: '暂不更新',
-						confirmText: '立即更新',
-						success: (res) => {
-							if (res.confirm) {
-								const urlAndorid = 'https://www.pgyer.com/9B4d'
-								if (plus) plus.runtime.openURL(urlAndorid)
-								// 更新版本
-								else window.open(urlAndorid)
-							}
-
-						}
-					})
-
-				}
-				console.log(systemData.appVersion, '当前版本', version, "最新版本")
 
 			},
 			checkLogin() {

api/pgy.js

@@ -0,0 +1,23 @@
+//蒲公英API文档地址 -> https://static.pgyer.com/doc/view/api#installApp
+
+import {
+	request
+} from '@/utils/pgyRequest.js' //导入封装好的js文件
+
+
+//获取App是否有更新
+export function getAppCheck(data) {
+	return request({
+		url: '/app/check',
+		method: 'post',
+		data: data
+	})
+}
+//获取APP详细信息
+export function getAppInfo(data) {
+	return request({
+		url: '/app/view',
+		method: 'post',
+		data: data
+	})
+}

manifest.json

@@ -2,8 +2,8 @@
     "name" : "娄东人口管理",
     "appid" : "__UNI__5B81E88",
     "description" : "太仓娄东人口管理",
-    "versionName" : "1.2.1",
-    "versionCode" : 121,
+    "versionName" : "1.2.0",
+    "versionCode" : 120,
     "transformPx" : false,
     "app-plus" : {
         "usingComponents" : true,

pages.json

@@ -93,25 +93,34 @@
 			}
 		},
 		{
-			"path" : "pages/house/addAndEdit",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/house/addAndEdit",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/house/houseGather",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		},
 		{
-			"path" : "pages/house/houseGather",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/building/map",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
 			}
 		},
 		{
-			"path" : "pages/building/map",
-			"style" : 
-			{
-				"navigationBarTitleText" : "",
-				"enablePullDownRefresh" : false
+			"path": "uview-ui/components/u-full-screen/u-full-screen",
+			"style": {
+				"navigationStyle": "custom", // 取消本页面的导航栏
+				"app-plus": {
+					"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
+					"background": "transparent", // 背景透明
+					"backgroundColor": "rgba(0,0,0,0)", // 背景透明
+					"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
+				}
 			}
 		}
 	],

pages/mine/index.vue

@@ -40,15 +40,13 @@
 				<view class="menu-item-box">
 					<view class="iconfont icon-version menu-icon"></view>
 					<view>版本更新</view>
-					<view class="version-box" v-show="showVersion">发现新版本</view>
+					<view class="version-box" v-show="localityVersion != appCheck.buildVersionNo">发现新版本</view>
 				</view>
 			</view>
 		</view>
 		<view class="outLogin">
 			<u-button type="primary" @click="handleLogout">退出登录</u-button>
 		</view>
-
-
 	</view>
 	</view>
 </template>
@@ -58,6 +56,9 @@
 	import {
 		getVersions
 	} from '@/utils/handlerColor.js'
+	import {
+		mapGetters
+	} from 'vuex'
 	export default {
 		data() {
 			return {
@@ -71,11 +72,15 @@
 		},
 		onLoad() {
 			const systemData = this.$u.sys()
-			this.localityVersion = systemData.appVersion
+			this.localityVersion = systemData.appVersionCode
 			this.boxTop = systemData.statusBarHeight
-			this.getVersion()
+			// this.getVersion()
 		},
 		computed: {
+			...mapGetters([
+				'appCheck',
+
+			]),
 			avatar() {
 				return this.$store.state.user.avatar
 			},
@@ -85,27 +90,8 @@
 		},
 		methods: {
 			updateVersion() {
-				if (this.showVersion) {
-					uni.showModal({
-						title: '发现新版本',
-						content: '版本：V ' + this.version,
-						cancelText: '暂不更新',
-						confirmText: '立即更新',
-						success: (res) => {
-							if (res.confirm) {
-								const urlAndorid = 'https://www.pgyer.com/9B4d'
-								if (plus) plus.runtime.openURL(urlAndorid)
-								// 更新版本
-								else window.open(urlAndorid)
-							}
-
-						}
-					})
-				} else {
-					uni.showToast({
-						title: '已是最新版本',
-						icon: 'none'
-					})
+				if (this.localityVersion != this.appCheck.buildVersionNo) {
+					this.$u.route(`/uview-ui/components/u-full-screen/u-full-screen`);
 				}
 			},
 			async getVersion() {

store/getters.js

@@ -7,5 +7,6 @@ const getters = {
 	dept: state => state.user.dept,
 	deptId: state => state.user.deptId,
 	userId: state => state.user.userId,
+	appCheck: state => state.user.app.check
 }
 export default getters

store/modules/user.js

@@ -1,6 +1,10 @@
 import config from '@/config'
 import storage from '@/utils/storage'
 import constant from '@/utils/constant'
+import {
+	getAppCheck,
+	getAppInfo
+} from '@/api/pgy.js'
 import {
 	login,
 	logout,
@@ -15,10 +19,12 @@ import {
 	removeToken
 } from '@/utils/auth'
 
+
 const baseUrl = config.baseUrl
 
 const user = {
 	state: {
+		app: {},
 		userId: null,
 		dept: {},
 		deptId: null,
@@ -31,6 +37,10 @@ const user = {
 
 	mutations: {
 
+		SET_APP: (state, data) => {
+			state.app.check = data
+		},
+
 		SET_DEPT_ID: (state, deptId) => {
 			state.deptId = deptId
 		},
@@ -99,13 +109,13 @@ const user = {
 					} else {
 						commit('SET_ROLES', ['ROLE_DEFAULT'])
 					}
+					const app = await AppCheck()
+					commit('SET_APP', app)
 					commit('SET_NAME', username)
 					commit('SET_USER_ID', user.userId)
 					commit('SET_DEPT_ID', user.dept.deptId)
 					commit('SET_DEPT', user.dept)
 					commit('SET_AVATAR', avatar)
-
-
 					resolve(res)
 				}).catch(error => {
 					reject(error)
@@ -149,10 +159,46 @@ const user = {
 					reject(error)
 				})
 			})
+		},
+
+		//检测是否有新版本
+		checkApp({
+			commit,
+			state
+		}) {
+			AppCheck()
 		}
 	}
 }
 
+async function AppCheck() {
+	const appKey = 'e4c51352c1a5a46cb49b44ae24edea32'
+	const res = await getAppCheck({
+		appKey: appKey
+	})
+	// uni.getSystemInfo({
+	// 	success: async function(it) {
+	// 		//有新版本
+	// 		if (it.appVersionCode != res.data.buildVersionNo) {
+	// 			// const info = await getAppInfo({
+	// 			// 	appKey: appKey,
+	// 			// 	buildKey: res.data.buildKey
+	// 			// })
+	// 			// let megabytes = info.data.buildFileSize / (1024 * 1024);
+	// 			// uni.showModal({
+	// 			// 	title: '发现新版本！',
+	// 			// 	content: `新版本号：V${info.data.buildVersion}\n软件体积：${megabytes.toFixed(1)}MB`,
+	// 			// 	cancelText: '暂不更新',
+	// 			// 	confirmText: '立即更新',
+	// 			// 	success: (res) => {
+	// 			// 		if (res.confirm) {}
+	// 			// 	}
+	// 			// })
+	// 		}
+	// 	}
+	// })
 
+	return res.data
+}
 
 export default user

utils/pgyRequest.js

@@ -0,0 +1,27 @@
+const BASE_URL = 'http://www.pgyer.com/apiv2'
+export const request = (options) => {
+	return new Promise((resolve, reject) => {
+		// 获取用户令牌
+		let token = ''
+		// 设置请求头
+		const header = {
+			'Content-Type': 'application/x-www-form-urlencoded',
+			// Authorization: `Bearer ${token}`,
+			...options.header // 可以传入额外的请求头参数
+		}
+		// ⭐在发送请求之前执行拦截操作
+		options.data._api_key = '0b9b69b071c1baa43015b841534e9001'
+		uni.request({
+			url: BASE_URL + options.url, //接收请求的API
+			method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
+			data: options.data || {}, //接收请求的data,不传默认为空
+			header: header, //接收请求的header
+			success(res) {
+				resolve(res.data) // 使用resolve将数据传递出去
+			},
+			fail: (err) => {
+				reject(err)
+			}
+		})
+	})
+}

uview-ui/components/u-full-screen/u-full-screen.vue

@@ -1,52 +1,189 @@
 <template>
-	<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
+	<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel"
+		@confirm="confirm">
 		<view class="u-update-content">
-			<rich-text :nodes="content"></rich-text>
+			<view class="row-item">
+				<text>版本号:</text>
+				<text class="iten-value">{{info.buildVersion}}</text>
+			</view>
+			<view class="row-item">
+				<text>软件体积:</text>
+				<text class="iten-value">{{info.buildFileSize}}MB</text>
+			</view>
+			<view class="row-item">
+				<text class="iten-value">{{info.buildUpdateDescription}}</text>
+			</view>
+			<view class="progress" v-show="show2">
+				<text class="progress-num">{{progressWidth}}</text>
+				<view :style="{width:progressWidth}"></view>
+			</view>
 		</view>
 	</u-modal>
 </template>
 
 <script>
+	import {
+		getAppInfo
+	} from '@/api/pgy.js'
+	import {
+		mapGetters
+	} from 'vuex'
 	export default {
 		data() {
 			return {
 				show: false,
 				content: `
-					1. 修复badge组件的size参数无效问题<br>
-					2. 新增Modal模态框组件<br>
-					3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
-					4. 修复键盘组件在微信小程序上遮罩无效的问题
 				`,
+				progressWidth: '0%',
+				show2: false,
+				info: {},
 			}
 		},
+
 		onReady() {
-			this.show = true;
+			//获取版本信息
+			this.appInfo()
+
+		},
+		computed: {
+			...mapGetters([
+				'appCheck',
+
+			])
 		},
 		methods: {
+			async appInfo() {
+				const appKey = 'e4c51352c1a5a46cb49b44ae24edea32'
+				const res = await getAppInfo({
+					appKey: appKey,
+					buildKey: this.appCheck.buildKey
+				})
+
+				const buildFileSize = res.data.buildFileSize / (1024 * 1024);
+				res.data.buildFileSize = buildFileSize.toFixed(1)
+				this.info = res.data
+
+				this.show = true;
+			},
 			cancel() {
 				this.closeModal();
 			},
 			confirm() {
-				this.closeModal();
+				// this.closeModal();
+				this.show = true
+				this.downloadAPK()
 			},
 			closeModal() {
 				uni.navigateBack();
+			},
+			downloadAPK() {
+				this.show2 = true
+				let _this = this
+				var apkUrl = this.appCheck.downloadURL // 替换为你的APK文件URL
+				var apkFileName = '_downloads/taicang-population.apk' // 目标文件路径，_downloads为H5+预定义目录
+				// 创建下载任务
+				var dtask = plus.downloader.createDownload(
+					apkUrl, {
+						filename: apkFileName,
+					},
+					function(d, status) {
+						if (status === 200) {
+							// 下载成功+ d.filename
+							_this.installAPK(d.filename)
+							uni.showToast({
+								icon: 'success',
+								title: '下载成功'
+							})
+
+						} else {
+							// 下载失败 + status
+							uni.showToast({
+								icon: 'error',
+								title: '下载失败'
+							})
+
+						}
+					}
+				)
+
+				// 监听下载任务的状态变化和进度
+				dtask.addEventListener('statechanged', function(download, status) {
+					// 下载状态变化时的处理
+					switch (download.state) {
+						case 3: // 下载中
+							// console.log('已下载大小：' + download.downloadedSize + ' bytes')
+							// console.log('总大小：' + download.totalSize + ' bytes')
+
+							_this.progressWidth = Math.round((download.downloadedSize / download.totalSize) *
+								100) + '%'
+
+							break
+					}
+				})
+
+				// 启动下载任务
+				dtask.start()
+			},
+
+			installAPK(filePath) {
+				plus.runtime.install(
+					filePath, {},
+					function() {
+						console.log('Install success')
+					},
+					function(e) {
+						console.log('Install failed: ' + e.message)
+					}
+				)
 			}
+
 		}
 	}
 </script>
 
+
 <style scoped lang="scss">
 	@import "../../libs/css/style.components.scss";
-	
+
 	.u-full-content {
 		background-color: #00C777;
+
 	}
-	
+
 	.u-update-content {
 		font-size: 26rpx;
 		color: $u-content-color;
-		line-height: 1.7;
+		line-height: 1.8;
 		padding: 30rpx;
 	}
-</style>
+
+	.row-item {
+		font-size: 29rpx;
+		font-weight: 500;
+	}
+
+	.progress {
+		position: relative;
+		background-color: #e6effb;
+		height: 40rpx;
+
+		.progress-num {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			text-align: center;
+			line-height: 40rpx;
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #fff;
+		}
+
+		&>view {
+			width: 0;
+			height: 100%;
+			background-color: #2d8cf0;
+		}
+	}
+</style>