uni-app,app应用如何做app版本升级操作

省流:用了uView组件步骤简单,看步骤1、4即可,没有用的分两种情况,(1)要出弹窗告知用户需要版本更新,要就看步骤1、2、3 (2)不要通知就看步骤1、2,步骤3主要内容是没有用uView组件,用了其它组件的实现流程(思路)

1、需要先获取当前app版本信息
注意:plus只能在手机端app上才可以运行,运行下面的代码需要进行真机调试,将对应的值打印到页面即可

plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {
				// appInfo为当前应用程序的所有信息
				console.log(JSON.stringify(appInfo));
				// 获取版本名称
				console.log(appInfo.version);
				// 获取版本号
				console.log(appInfo.versionCode);
				// 获取当前应用id
				console.log(appInfo.appid);
			});

2、一个版本更新的接口

axios({
	url: '后端接口',
	params: {						
		// '需要携带的参数'
	}
}).then(res => {
			let url = res.url
			var dtask = plus.downloader.createDownload(url, {},
				function(d, status) {

					// 下载完成  
					if (status == 200) {

						plus.runtime.install(plus.io.convertLocalFileSystemURL(
							d.filename), {}, {}, function(error) {
							uni.showToast({
								title: '安装失败',
								duration: 1500
							});
						})
					} else {
						uni.showToast({
							title: '更新失败',
							duration: 1500
						});
					}
				});
			try {
				console.log('开始下载');
				dtask.start(); // 开启下载的任务
				var prg = 0;
				var showLoading = plus.nativeUI.showWaiting(
					"正在下载"); //创建一个showWaiting对象 
				dtask.addEventListener('statechanged', function(
					task,
					status
				) {
					// 给下载任务设置一个监听 并根据状态  做操作
					switch (task.state) {
						case 1:
							showLoading.setTitle("正在下载");
							break;
						case 2:
							showLoading.setTitle("已连接到服务器");
							break;
						case 3:
							prg = parseInt(
								(parseFloat(task.downloadedSize) /
									parseFloat(task.totalSize)) *
								100
							);
							showLoading.setTitle("  正在下载" + prg + "%  ");
							break;
						case 4:
							plus.nativeUI.closeWaiting();
							//下载完成
							break;
					}
				});
			} catch (err) {
				plus.nativeUI.closeWaiting();
				uni.showToast({
					title: '更新失败-03',
					mask: false,
					duration: 1500
				});
			}
})

3、上诉代码有改进的地方,一般我们都会app更新会出现一个更新的模态框,告知用户需要更新

这边模态框利用uView组件实现效果,详细地址
如果不想使用,按照上方第二部即可,或者用一些其它组件的模态框,大抵过程就是

  1. 调取后端接口,检验版本号是否与当前用户app版本一致,获取当前app版本号的方法在第一步
  2. 不一致便进入我们提前设置好的弹窗,告知用户当前的更新内容有什么,此时弹窗有两个事件,确认事件、取消事件,点击确实事件便是用户确定更新,拿到该按钮的函数回调,执行下载流程即可
  3. 下载流程:是上方我们调取节后拿到res后执行的内容,只需要把安装包url替换掉即可使用。亦可将其封装为工具函数。

4、下面便是使用uview组件的实现,如果不想使用uview,看我上面文字的流程即可:
找到uview-ui文件下的components/u-full-screen/u-full-screen.vue文件
将其修改为下面的内容,此时表示我们像该页面传递url参数和content参数即可实现完整下载功能,url是安装包地址,content是版本更新的内容描述

<template>
	<u-modal v-model="show" confirm-text="升级" title="发现新版本" @confirm="confirm">
		<view class="u-update-content">
			<rich-text :nodes="content">rich-text>
		view>
	u-modal>
template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: ``,
			}
		},
		onLoad(option) {
			this.content = decodeURIComponent(option.content)
			this.url = option.url
			console.log(option)

		},
		onReady() {
			this.show = true;
		},
		methods: {
			confirm() {
				this.closeModal();
				var downloadApkUrl = this.url
				var dtask = plus.downloader.createDownload(downloadApkUrl, {},
					function(d, status) {
				
						// 下载完成  
						if (status == 200) {
				
							plus.runtime.install(plus.io.convertLocalFileSystemURL(
								d.filename), {}, {}, function(error) {
								uni.showToast({
									title: '安装失败',
									duration: 1500
								});
							})
						} else {
							uni.showToast({
								title: '更新失败',
								duration: 1500
							});
						}
					});
				try {
					dtask.start(); // 开启下载的任务
					var prg = 0;
					var showLoading = plus.nativeUI.showWaiting(
						"正在下载"); //创建一个showWaiting对象 
					dtask.addEventListener('statechanged', function(
						task,
						status
					) {
						// 给下载任务设置一个监听 并根据状态  做操作
						switch (task.state) {
							case 1:
								showLoading.setTitle("正在下载");
								break;
							case 2:
								showLoading.setTitle("已连接到服务器");
								break;
							case 3:
								prg = parseInt(
									(parseFloat(task.downloadedSize) /
										parseFloat(task.totalSize)) *
									100
								);
								showLoading.setTitle("  正在下载" + prg + "%  ");
								break;
							case 4:
								plus.nativeUI.closeWaiting();
								//下载完成
								break;
						}
					});
				} catch (err) {
					plus.nativeUI.closeWaiting();
					uni.showToast({
						title: '更新失败-03',
						mask: false,
						duration: 1500
					});
				}
				
			},
			closeModal() {
				uni.navigateBack();
			}
		}
	}
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;
		padding: 30rpx;
	}
style>

上诉组件改造完成后,我们的第二部代码便可以变成

axios({
	url: '后端接口',
	params: {						
		// '需要携带的参数'
	}
}).then(res => {
            //判断一下后端给的最新版本号返回值是否与当前一致
            //判断......if()
            //判断......{}else
            //判断......{}
            //千万不能无脑cv,看下是否符合下面的返回值形式,url新包地址,content更新描述内容
			let url = res.data.url
			let content = res.data.content
			//this.$u.route,引入uview的时候便会自动挂载,没有就用正常的页面跳转
			this.$u.route(`/uview-ui/components/u-full-screen/u-full-screen?url=${url}&content=${content}`);
})

结尾:别忘记了app关于界面,也需要一个更新,不过这个相对简单一些

你可能感兴趣的:(uni-app)