uniapp升级中心 uni-upgrade-center的使用步骤

一、后台管理页面
1、首先安装uni-admin作为控制应用的后台系统。

2、创建后会需要绑定云服务空间。
服务空间可以去https://unicloud.dcloud.net.cn/pages/login/login申请，阿里云还是提供了一个免费的服务空间。

3、依次点击下一步，等待部署完毕。第一次使用需要等待数据库初始化完毕，耗时较长。

二、app页面
1、新建一个uniapp普通项目，作为app的打包项目。

2、新建完成后，右键该项目，创建uniclude云开发环境。
云环境选择与上面的后台管理云环境一样即可。

3、右键创建好的unicloud文件夹，选择关联云服务空间或项目。

此时选择绑定到其他项目的服务空间，然后选择上面的后台管理页面进行关联。

三、安装uni-upgrade-center插件
升级中心分为两个部分：uni-upgrade-center Admin管理后台和 uni-upgrade-center-app前台检测更新。

其中uni-upgrade-center - Admin已经内置在uni-admin中，如果你的uni-admin没有“升级中心”，说明你的后台管理页面可能没有该插件。（下面只展示前台检测更新的导入，后台同理）

来到插件页面，选择下载插件并导入。

这个要选择app页面，因为这个是负责前台检测更新的。

四、配置app页面。
1、首先需要在pages.json里的pages加入下述代码。（注意：不要放在第一项，第一项是启动项。）

点击查看代码


{
	"pages": [ 
		{
			"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
			"style": {
				"disableScroll": true,
				"app-plus": {
					"backgroundColorTop": "transparent",
					"background": "transparent",
					"titleNView": false,
					"scrollIndicator": false,
					"popGesture": "none",
					"animationType": "fade-in",
					"animationDuration": 200
 
				}
			}
		}
	]
}

2、在需要判断更新版本的页面加入checkUpdate函数，代码如下：

点击查看代码

<template>
	<view>
	</view>
</template>
 
<script>
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	export default {
		onLoad() {
			checkUpdate()
		}
	}
</script>
 
<style>
	
</style>

我这里方便检测是否成功调用了升级中心，将index.vue改成如下格式方便检测问题。（根据uni_modules\uni-upgrade-center-app\utils下的call-check-version.ts得知判断版本更新需要appid、appVersion、widgetInfo.version）

点击查看代码

<template>
	<view>
		<view>appId:{{appId}}</view>
		<view>appVersion:{{appVersion}}</view>
		<view>widgetInfo:{{widgetInfo}}</view>
		<button @click="checkisupdate">检测是否更新</button>
		<view>{{errmsg}}</view>
	</view>
</template>
 
<script>
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	const systemInfo = uni.getSystemInfoSync()
	export default {
		data(){
			return{
				appId:systemInfo.appId,
				appVersion:systemInfo.appVersion,
				widgetInfo:{},
				errmsg:""
			}
		},
		methods: {
			checkisupdate() {
				checkUpdate().then((res)=>{
					this.errmsg = res;
				}).catch((err)=>{
					this.errmsg = err;
				})
			}
		},
		onLoad() {
			plus.runtime.getProperty(this.appId, (widgetInfo) => {
				this.widgetInfo = widgetInfo
			})
			this.checkisupdate();
		},
	}
</script>
 
<style>
 
</style>

3、来到mainifest.json下勾一下x86，否则模拟器可能没办法安装app。