uni-app实现热更新和整包更新(自动下载)

前言:在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内下载无法看见进度条
  • 9
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app更新可以通过服务器存储最新版本号,前端进行查询并匹对版本号实现。具体实现步骤如下: 1.在服务器中存储最新版本号。 2.前端在应用首次进入时进行请求版本号,并与本地版本号进行匹对。 3.如果版本号一致,则不提示更新;如果版本号不一致,则提示进行更新操作。 4.执行更新操作,可以通过下载更新包并进行安装实现。 5.在进行更新之前,需要进行云打包并修改mainifest.json文件中的版本号,将其修改为低于更新包的版本号。 以下是一个简单的uni-app更新的示例代码: ```javascript // 获取服务器最新版本号 const latestVersion = await fetchLatestVersion(); // 获取本地版本号 const localVersion = getAppVersion(); // 版本号匹对 if (latestVersion !== localVersion) { // 提示更新操作 uni.showModal({ title: '发现新版本', content: '是否立即更新?', success: function (res) { if (res.confirm) { // 下载更新包并进行安装 downloadAndUpdate(); } } }); } // 下载更新包并进行安装 function downloadAndUpdate() { // 下载更新包 const hotUpdate = uni.downloadFile({ url: 'https://www.example.com/hot-update.zip', success: function (res) { // 安装更新包 uni.applyUpdate({ packagePath: res.tempFilePath, success: function () { // 更新成功 }, fail: function () { // 更新失败 } }); }, fail: function () { // 下载更新包失败 } }); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值