uniapp面试题及答案2022（uniapp前端实现热更新）

思路：

1    
    
   、首先    
    
    
，在主页或app.vue中使用plus.runtime.getProperty()获取到app的当前wgt包版本号    
    
   。

2     


     


     

、然后


     


     


   ，通过后端返回给你的接口里有一个版本号（需要手动去后台管理系统中上传一个wgt包
 




 




 

，并输入这个wgt包的版本号）     


     


     

。

3




 




 




、再之后   

   

   

，将这个版本号与app当前版本号进行对比 

     

     

  ，若当前版本号大于后端给你的版本号

  




  




  
，就不升级  


  


  


，反之  
     
     
 ，则显示升级弹框


   




   




   ，请用户下载升级（开发者调用下载安装api）




 




 




。

4
   

   

  、最后 



 



 



，使用plus.runtime.restart()进行app重启刷新             ，在设置中加一个plus.runtime.getProperty()获取到版本号
   

   

  。

热更新所使用到的api：

1     

     

     
、获取app当前wgt包版本号：plus.runtime.getProperty()；

2 




  




  




、下载：uni.downloadFile（）；

3

  


  


 、安装wgt包：plus.runtime.install（）；

4     
     
     、重启app：plus.runtime .restart（）；

代码：

1  




   




   




、先获取app当前版本号与后端最新wgt包进行对比

//用于对比的函数 duibi(version1 ,version2){ let arr1=version1.split("."); let arr2=version2.split("."); let length=Math.max(arr1.length,arr2.length); for (let i = 0; i < length; i++) { const n1 = Number(arr1[i]||0) const n2 = Number(arr2[i]||0) // 第一个版本号大 if (n1 > n2) return 1 //第二个版本号大 if (n1 < n2) return 2 } return false; } //获取app当前版本号 plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => { this.version = widgetInfo.version; });

注意：千万千万不要用这个（plus.runtime.version）作为判断



    




    




    ，它获取的是当前app的安装包版本













，上面的那个是获取wgt包的版本              ，两个不一样



     



     



    ，plus.runtime.version始终是一个恒定的值












，除非安卓整包更新     

     

     
。plus.runtime.version不能用做wgt热更新判断！！！

2


 



 



、进行弹框询问和下载安装api调用    
    
    
，重启app完成热更新

if(当前通过上面的对比需要更新时){ uni.showModal({ title: "系统提示", content: `当前版本号为（当前版本号）


     


     


   ，邀您更新版本（最新版本号）`, success: (res) => { //用户确认更新 if (res.confirm) { //使用下载api(uni.downloadFile) let uploadTask = uni.downloadFile({ url: 下载地址, success: (downloadResult) => { //使用安装wgtapi(plus.runtime.install) plus.runtime.install( downloadResult.tempFilePath, { force: true }, function() { uni.showModal({ title: 系统提示, content: 新版本已经更新完成
 




 




 

，需要重启应用, showCancel: false, //用户点击确认重启 success: function( res) { if (res .confirm) { 调用重启api（plus.runtime .restart） plus.runtime .restart(); } else if (res .cancel) { console .log( 用户点击取消 ); } } }); } ) } }); //在这里监听用户下载进度 uploadTask.onProgressUpdate((res)=>{ this.pro = res.progress; console.log(this.pro); if(this.pro==100){ this.isDown = false; } }) } } }); }

3               、监听用户下载进度并优化弹框

为了使本文看起来不过于繁琐   

   

   

，就不单独再开一个代码块了 

     

     

  ，需要了解详情的可以进入官方文档https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile