uni-app 版本更新

问题：做版本更新，用自带的提示弹窗太丑，想自己布局，在App.vue中又写不了布局

查了下资料

用纯js实现版本更新提示弹窗

可配置是否强制更新，可看到下载的进度

实现方式：

 

1. 首先建一个js文件，文件内容就是上面的代码段（这里我建一个APPUpdate.js的文件）
2. 修改图片位置（这里的图片就是我上面发的那个图片）

// 弹窗图标url
       const $iconUrl = "./static/images/ic_ar.png";

路径是相对App.vue的路径

 

在文件的开头我引入了一个api的方法getAppVersion

这个方法是请求接口获取版本信息（是否需要更新，若需要，返回新版本的信息）

// 可以用自己项目的请求方法
	getAppVersion(req).then(response => {
		/* res的数据说明
		 * | 参数名称	     | 一定返回 	| 类型	    | 描述
		 * | -------------|--------- | --------- | ------------- |
		 * | versionCode	 | y	    | int	    | 版本号        |
		 * | versionName	 | y	    | String	| 版本名称      |
		 * | versionInfo	 | y	    | String	| 版本信息      |
		 * | forceUpdate	 | y	    | boolean	| 是否强制更新  |
		 * | downloadUrl	 | y	    | String	| 版本下载链接（IOS安装包更新请放跳转store应用商店链接,安卓apk和wgt文件放文件下载链接）  |
		 */
		let res = response.data;
		if (res.code === 0) {
			callback && callback(res.data);
		} else if (isPrompt) {
			uni.showToast({
				title: "当前已是最新版本",
				icon: "none"
			});
		}
	}).catch(err => {
		
	})

你也可以不引人api方法，直接把上面的部分换成普通的api请求，只要返回的数据是按上面res数据说明的形式返回就行了（不清楚的欢迎评论联系）

只需修改上面提到的部分，若返回的数据正确即可出现弹窗

3.使用（分进入APP自动更新和手动更新两种方式）

首先在页面中引入上面的js文件

import APPUpdate, { getCurrentNo } from "@/common/js/APPUpdate.js";

进入APP自动更新：只需在App.vue的onLaunch中写入如下代码即可

// #ifdef APP-PLUS
    APPUpdate();
// #endif

手动更新：只需将如下代码放到对应点击事件中即可

// true 没有新版本的时候有提示，默认：false
APPUpdate(true);

获取版本号：

// #ifdef APP-PLUS
    getCurrentNo(res => {
	    // 进页面获取当前APP版本号（用于页面显示）
	    this.version = res.versionName;
	});
// #endif

---

用到的文件资源：

具体实现的js

https://download.csdn.net/download/weixin_44052462/13188942

用到的图片

https://download.csdn.net/download/weixin_44052462/13189320

---

如果接口部分不知道怎么写或有什么问题欢迎评论