uni-app热更新

r囧r小猫 2023-02-17 11:04 8阅读 0赞

可前往此处公众号查看 https://mp.weixin.qq.com/mp/profile\_ext?action=home&\_\_biz=Mzg3NTAzMzAxNA==&scene=124\#wechat\_redirect

开发工具HbuilderX  
开发框架 uni-app、h5+  
1、**生成 App 资源升级包**  
1.1、**修改版本号**  
1.2、**首先，更新 manifest.json 中的版本号。  
比如之前是 1.0.0，那么新版本应该是 1.0.1 或 1.1.0 这样。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70]  
2、**发行**  
2.1、**然后，在 HBuilderX 中生成升级包（wgt）。**  
2.2、**菜单->发行->原生App-制作移动App资源升级包**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70 1]  
2.3、**生成结束会在控制台告知升级包的输出位置。**  
![在这里插入图片描述][20200613140959320.png]  
3.**安装资源升级包**

3.1、**应用的升级需要服务端与客户端配合完成，下面以本地测试过程中的操作举例说明：**  
3.2、**生成的 wgt 文件给后端人员，放在服务器目录下，生成下载链接，返回给开发app开发者**

4、**服务端接口**  
4.1、**与后端约定检测升级的接口 ,接口地址 'Home/getShopAppVersion’**  
5、**客户端检测升级**  
5.1、**在 App.vue 的 onLaunch 中检测升级(也可以在首页中，首页中请使用onLoad)，代码如下**

// 热更新
    wgtUpload:function(){ 
    	const that=this;
    	//plus.runtime.getProperty(),获取本机安装的版本，具体使用请参照如下链接 
    	//https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.WidgetInfo
    	plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
    		//'Home/getShopAppVersion' 获取服务端的版本
    		that.$http.post('Home/getShopAppVersion',{ },{ 'load':false}).then(function(response){ 
    			// 获取服务端版本转化为数组
    			var onlineAndroidVersion=response.data.android.split(".");
    			// 获取本机安装版本转化为数组
    			var localAndroidVersion=that.$Androidversion.split(".");
    			// 是否更新
    			var isUpload=false;
    			for(var i=0;i<onlineAndroidVersion.length;i++){ 
    				// 服务端版本是否大于本地版本
    				if(parseInt(onlineAndroidVersion[i])>parseInt(localAndroidVersion[i])){ 
    					isUpload=true;	
    				}
    			}
    			if(response.code==1){ 
    				var data=response.data;
    				if(isUpload==true){ 
    					// 下载文件资源到本地，下载刚才打包的 .wgt文件
    					uni.downloadFile({   
    						url: "http://api.yunshanghulian.net/__UNI__F89F8A7.wgt",  // 下载资源的 url
    						success: (downloadResult) => {   
    							if (downloadResult.statusCode === 200) { 
    								/* 安装应用, 要安装的文件路径(downloadResult.tempFilePath) force 是否强制安装 true表示强制安装，不进行版本号的校验；false则需要版本号校验， 如果将要安装应用的版本号不高 于现有应用的版本号则终止安装，并返回安装失败。 仅安装wgt和wgtu时生效，默认值 false。 */
    								plus.runtime.install(downloadResult.tempFilePath, { 
    									force: true  
    								}, function() {   
    									// 应用热重启，重新启动进入首页。
    									plus.runtime.restart();
    									isUpload=false;
    									console.log('安装成功','install success...'); 
    								}, function(e) {   
    									console.error('安装失败','install fail...');  
    								});
    							}  
    						}  
    					});
    				}
    			}
    		})
    	});   
    }

plus.runtime.version 或者 uni.getSystemInfo() 读取到的是 apk/ipa 包的版本号，而非 manifest.json 资源中的版本信息，所以这里用 plus.runtime.getProperty() 来获取相关信息  
安装 wgt 资源包成功后，必须执行 plus.runtime.restart()，否则新的内容并不会生效。  
如果App的原生引擎不升级，只升级wgt包时需要注意测试wgt资源和原生基座的兼容性。平台默认会对不匹配的版本进行提醒，如果自测没问题，可以在manifest中配置忽略提示，详见https://ask.dcloud.net.cn/article/35627

注意：  
关于热更新是否影响应用上架  
应用市场为了防止开发者不经市场审核许可，给用户提供违法内容，对热更新大多持排斥态度。

但实际上热更新使用非常普遍，不管是原生开发中还是跨平台开发。

Apple曾经禁止过jspatch，但没有打击其他的热更新方案，包括cordovar、react native、DCloud。封杀jspatch其实是因为jspatch有严重安全漏洞，可以被黑客利用，造成三方黑客可篡改其他App的数据。

使用热更新需要注意：

上架审核期间不要弹出热更新提示  
热更新内容使用https下载，避免被三方网络劫持  
不要更新违法内容、不要通过热更新破坏应用市场的利益，比如iOS的虚拟支付要老老实实给Apple分钱  
如果你的应用没有犯这些错误，应用市场是不会管的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200613140717487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200613140916861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg==,size_16,color_FFFFFF,t_70
[20200613140959320.png]: https://img-blog.csdnimg.cn/20200613140959320.png