当前位置: 首页 > Web前端 > vue.js

vue-cli4.0使用hbuilderx打包5+app热更新

时间:2023-04-01 01:21:59 vue.js

1.使用vue-cli搭建项目(自己百度)2.在app.vue或者其他入口文件中添加如下代码(多参考hbulder官网)参考:https://ask.dcloud.net.cn/文档。..从“@/api”导入{getAction};exportdefault{name:'App',created(){this.autoUpdate()},methods:{//autoUpdate(){if(window.plus){this.plusReady();}else{document.addEventListener('plusready',this.plusReady,false);}},plusReady(){//获取本地应用资源版本号plus.runtime.getProperty(plus.runtime.appid,(inf)=>{this.checkVersion(inf.version)});},//检查版本checkVersion(currentV){//这是获取版本号的方法leturl=`http://xxx.xxx.x.x:8103/ReportProcess/getVersionJson`getAction(url,{path:'http://xxx.xxx.x.xxx:8080/xx/appinfo.json'}).then(res=>{if(res.code===200){letresult=res.result?res.result:''if(result&¤tV&¤tV!==result.version){//这里使用了element-ui组件,也可以换成其他的this.$confirm('检测到新版本,是否更新?','更新提示',{closeOnClickModal:false,confirmButtonText:'更新',cancelButtonText:'取消',输入:'成功'}).then(()=>{this.downloadWgt()}).catch(()=>{})}}}).catch(err=>{console.log(err)})},//下载wgt包downloadWgt(){letwgtUrl=`http://xxx.xxx.x.xxx:8080/xx/H5E040CB2.wgt`plus.nativeUI.showWaiting("正在下载更新文件...");plus.downloader.createDownload(wgtUrl,{filename:"_doc/update/"},(d,status)=>{if(status===200){this.installWgt(d.filename);//安装wgt包}else{plus.nativeUI.alert("下载更新文件失败!");}plus.nativeUI.closeWaiting();}).start();},//安装wgt包installWgt(path){plus.nativeUI.showWaiting("安装更新文件...");plus.runtime.install(path,{},function(){plus.nativeUI.closeWaiting();plus.nativeUI.alert("应用资源已更新!",function(){plus.runtime.restart();});},function(e){plus.nativeUI.closeWaiting();plus.nativeUI.alert("更新文件安装失败["+e.code+"]:"+e.message);});}}}因为是第一次做热更新,所以不太了解,不过看过electron-vue热更新前一个方案是通过判断服务器的yml来决定是否更新,于是我想到了一个办法,每次打包wgt文件的时候在服务器上添加一个json文件,如下:方法中遇到的难点(可以跳过):直接axios访问http://xxx.xxx.x.xxx:8080/appinfo.json代理在跨域dev环境下可以访问,但是官方环境是跨域的,所以让给给我一个后端的接口,他会帮我看一下(有点笨的方法,如果谁有更好的方法,希望能指点一下,可惜我不会)3.构建包4.创建一个hbuilder5+app项目会直接将生成的项目复制粘贴到创建的项目中进行覆盖5.修改源码视图中manifest.json的版本(记得和上传的json文件版本保持一致)o服务器)6.打包应用,第一次打包后更新第一次用wgt写文章,有不对的地方希望轻喷指正