UniApp之升级弹窗

需求：提示一个升级弹窗，点击升级可以下载新的包

 因为是uniapp直接发布到多端的可以发布到苹果和安卓系统，所以我们就需要适配苹果和安卓了

接下来分别讲解一下升级弹窗实现：

1.判断是什么系统

if(plat == 'ios'||plat == "IOS") {
    //是苹果系统，检查苹果是否需要更新
	that.checkIosUpdate()
}else{
	//是安卓系统，检查安卓是否需要更新
	that.checkAnriodUpdate()
}

2. 获取本地是什么版本，服务端是什么版本

uni.request({
    url: 'xxxxx服务器地址',
    data: {
        text: 'uni.request'
    },
    success: (res) => {
        //接口请求成功应该返回的苹果版本信息和安卓信息，具体信息大概如下
        //用来展示的最新版本号 '1.0.0'
        //用来判断的最新版本值 100
        //服务端设置的下载地址
        //此次更新的内容 本次为系统优化，优化了客服系统
    }
});

3.获取完版本之后，通过定义在globalData的版本信息，对比版本值

export default {
  globalData: {
	version: {banbenhao:"1.0.0",vers:100}, //安卓本地版本信息
	iosversion: {banbenhao:"1.0.0",vers:100},//苹果本地版本信息
  },
};

 4.对比完版本信息，当本地版本值小于服务端返回的最新版本值，进行下载包，进行安装

var that = this
if (plus.os.name == "iOS" || plus.os.name == "ios") {
	//苹果端直接跳转从服务端获取苹果应用商店地址
	plus.runtime.openURL(that.version.appUploadUrl)
} else {
	//安卓通过自定义的downNewVersion函数然后下载安装
	that.downNewVersion(that.version.appUploadUrl); 
}
//res为服务端安卓包的下载地址
function downNewVersion(res){
    //创建下载任务
    let task = plus.downloader.createDownload(res, {
		filename: '_downloads/update/' + new Date().getTime() + '/'
	}, function(download, status) {
		if (status == 200) {
            //下载成功就安装安卓包
			plus.runtime.install(download.filename, {}, function(e) {
			    console.log("install success")
			    that.cmdShow = false
			    uni.getSubNVueById('genxin').hide('slide-in-bottom', 300);
		    }, function(e) {
				console.log("install fail")
				that.cmdShow = false
				uni.getSubNVueById('genxin').hide('slide-in-bottom', 300);
			})
		} else {
			console.log("更新失败")
			that.cmdShow = false
			plus.nativeUI.closeWaiting()() 
		}
	})
	/**监控文件下载*/
	task.addEventListener("statechanged", function(download, status) {
		that.jinduFlag=true
		let downSize = download.downloadedSize; //已下载大小
		let totalSize = download.totalSize; //文件大小
		that.max = "100%";
		that.jindu = downSize;
		let yu = that.jindu / that.max;    //获取下载进度
		that.width = Math.round(yu * 100);
        //通过下载进度的状态做出
		switch (download.state) {
			case 2:
				that.jindu = downSize;
				//plus.nativeUI.showWaiting('正在下载')
				break;
			case 3:
				that.jindu = Math.round(downSize / totalSize * 100);
				console.log(that.jindu)
				break;
			case 4:
				that.jinduFlag=false
				that.cmdShow = false;
				console.log("下载完成");
                //关闭系统等待的对话框
				plus.nativeUI.closeWaiting();
		}
	});
	task.start();
}

接下来就自己写一个升级的弹窗页面就行了，把代码放进去，有什么不懂请私聊我，会给你解决问题！

有什么不足还请指出，谢谢大家看完！

分享不易，请大家动动发财的小手留下个点赞吧！