前言:在uni-app中要实现热更新和整包更新是比较简单的开发准备以及前后端配合
1.实现热更新

  • 热更新通常是小版本更新,改动量不大的更新

①:将项目应用版本号和后端就是协商例:规定1.2.5 是现在要更新的版本
在这里插入图片描述
在这里插入图片描述将其生成wgt包交给后端放入服务器
②:低版本(如:1.2.1)的app中前端在app.vue的onLaunch函数中加入以下代码

// #ifdef APP-PLUS  
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { 	//获取本机app版本号应用名等相关信息
    uni.request({  
        url: 'http://express.sugouex.com/v1/Appupdate/innerend',	//请求服务器地址
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {					//后端将进行版本号比对,上传版本号小于服务器版本号data.update为true,下发下载地址
            var data = result.data.data;
            if (data.update && data.wgtUrl) {  
                uni.downloadFile({			   //开始下载后端下发wgt包
                    url: data.wgtUrl,  
                    success: (downloadResult) => {
						uni.showToast({
							title:'开始更新下载',
							icon:'none'
						})
                        if (downloadResult.statusCode === 200) {  
                            plus.runtime.install(downloadResult.tempFilePath, {  	//进行自动安装
                                force: false  
                            }, function() {  
                                console.log('install success...');
                                plus.runtime.restart();  		//安装成功后重启应用
                            }, function(e) {  
                                console.error('install fail...');  
                            });  
                        }  
                    },
					fail(res) {
							uni.showToast({
							title:'下载失败',
							icon:'none'
						})
					},
                });  
            }
        }  
    });  
});  
// #endif
  • 这一套下来热更新基本就完成了,也可以增加弹框让客户选择是否更新

2.整包更新(自动下载)

暂时只支持安卓

①:整包更新打包方式就会有所不同
在这里插入图片描述

  • 推荐使用自有证书,我这里测试就用的公共,打包后生成的apk,放入相同服务器的同级目录
  • 在这里插入图片描述
    ②:前端在底版本需要的操作(如:1.1.4)
// #ifdef APP-PLUS  
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { 	//获取本机app版本号应用名等相关信息
    uni.request({  
        url: 'http://express.sugouex.com/v1/Appupdate/innerend',	//请求服务器地址
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {					//后端将进行版本号比对,上传版本号小于服务器版本号data.update为true,下发下载地址
            var data = result.data.data;
            if (data.update && data.pkgUrl) {  
               uni.showModal({ //提醒用户更新  
                    title: '提示',
				    content: '是否进行更新',
				    success: function (res) {
                        if (res.confirm) {  
                            plus.runtime.openURL(data.pkgUrl);  //进入浏览器下载
                        }  
                    }  
                })  
            }
        }  
    });  
}); 
  • 这样是进入浏览器下载可以看到进度条

  • APP内下载

// #ifdef APP-PLUS  
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { 	//获取本机app版本号应用名等相关信息
    uni.request({  
        url: 'http://express.sugouex.com/v1/Appupdate/innerend',	//请求服务器地址
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {					//后端将进行版本号比对,上传版本号小于服务器版本号data.update为true,下发下载地址
            var data = result.data.data;
            if (data.update && data.pkgUrl) {  
                uni.getSystemInfo({
					success:(res) => {
						//检测当前平台,如果是安卓则启动安卓更新  
						if(res.platform=="android"){  
							uni.showModal({
							    title: '提示',
							    content: '是否进行更新',
							    success: function (res) {
							        if (res.confirm) {
										uni.showLoading({
										    title: '下载安装中请稍等',
											mask:true,
										});
										uni.downloadFile({
										    url: data.pkgUrl,  
										    success: (downloadResult) => {
										        if (downloadResult.statusCode === 200) {  
										            plus.runtime.install(downloadResult.tempFilePath, {  	//下载完成后进行安装
										                force: false  
										            }, function() {
														uni.showToast({
															title:'更新成功',
															icon:'none'
														})
										                console.log('install success...');
										                plus.runtime.restart();  
										            }, function(e) {  
														uni.showToast({
															title:'更新失败',
															icon:'none'
														})
										                console.error('install fail...');  
										            });  
										        }  
										    },
											fail(res) {
												uni.showToast({
													title:'下载失败',
													icon:'none'
												})
											},
										});
							            // plus.runtime.openURL(data.pkgUrl);  
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
						}  
					}  
				})
            }
        }  
    });  
}); 
  • app内下载无法看见进度条
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐