使用vue打包的App如何检测版本更新？

前言：
本文章使用的是vue+h5+plus技术，结合hbuildx打包的App，实现在App中检测版本更新功能。

下面贴码介绍：

getVersion()
{zmitiUtil.Ajax('user/getVersion').then((res)=>{console.log(res.data.version)this.url=res.data.version.urlthis.versionApp=res.data.version.versionif(version.version!=res.data.version.version){this.showVersion=true}else{this.showVersion=false}})
}

getVersion()这个方法在页面加载完成后调用，主要用来检测当前App的版本和最新版本，如果当前版本和最新版本不同则给用户显示更新页面。

downLoad()
{let that = thisthat.showVersion=falsethat.showProgress=trueconst wgtUrl = that.url// plus.nativeUI.showWaiting("新版本更新中，请耐心等待~");var dtask = plus.downloader.createDownload("http://下载链接.apk", {}, function (d, status) {if(status == 200) {console.log("下载更新成功：" + d.filename);that.installWgt(d.filename);    // 安装wgt资源包} else{console.log("下载更新失败！");plus.nativeUI.toast("下载更新失败！");}plus.nativeUI.closeWaiting();})dtask.start();// 下载时实时显示下载进度  var prg = 0;dtask.addEventListener('statechanged', function(task,status) {// 给下载任务设置一个监听 并根据状态  做操作switch (task.state) {case 1://'正在下载';break;case 2:// '已连接到服务器';break;case 3:prg = parseInt((parseFloat(task.downloadedSize) /parseFloat(task.totalSize)) *100);that.percentageNum = prg; // 赋值给进度条组件break;case 4:that.showProgress = false; // 进度隐藏break;}});}

downLoad()这个方法是在用户点击更新时调用，主要实现了下载安装包以及实时更新进度条

installWgt(path) {plus.nativeUI.showWaiting("安装更新");plus.runtime.install(path, {}, function () {plus.nativeUI.closeWaiting();console.log("安装更新成功！");plus.nativeUI.alert("更新完成！", function () {plus.runtime.restart(); //安装成功后重启应用});}, function (e) {plus.nativeUI.closeWaiting();console.log("安装更新失败！[" + e.code + "]：" + e.message);plus.nativeUI.toast("安装更新失败！");});
}

installWgt()这个方法在一切准备就绪后安装App

总结：

在App中检测版本更新首先判断版本号是否是最新的，不是最新则执行版本更新功能。实现方式主要通过plus.downloader.createDownload下载apk包，下载完成后通过plus.runtime.install来进行安装，在下载时给下载任务设置一个监听根据状态实时更新下载进度

使用vue打包的App如何检测版本更新？相关推荐

Hbuildx 使用vue打包的App实现微信支付功能
很多兄弟在做App微信支付的时候出现报错,code:62000? code:-1? code:-100? 那是你没看本博主的文章! 前言: 本文章使用的是vue+h5+plus技术,结合hbuildx ...
Hbuildx 使用vue打包的App实现微信分享功能
前言: 本文章使用的是vue+h5+plus技术,结合hbuildx打包的App,实现在App中分享页面到朋友圈以及好友. 下面贴码介绍: <nut-popup v-model="is ...
将vue打包为APP重要步骤和流程
一.大致流程 1.项目整体使用Vue+HbuilderX(或者Hbuilder)开发 2.使用Vue来实现基本页面跳转,增删改查等app基本功能, 3.当需要使用到app原生功能则使用 mui.js ...
vue打包的app如何设置自动清理软件缓存_使用Webpack启动你的Vue.js应用
Webpack是开发Vue.js单页面应用(SPA)最基本的工具.通过管理负责的构建步骤能够使开发工作流非常的简单,同时也能够优化应用的大小提升应用的性能. 在这篇文章我将为大家展示Webpack是如 ...
vue打包为App手摸手教你
Good things come to those who wait. 耐心等待,终有回报. 一.在根目录新建一个vue.config.vue文件,如下图二.你弄好了吗?.. 三.在终端运行npm ...
HBuilder将Vue打包成App遇到的问题以及解决方案
2019独角兽企业重金招聘Python工程师标准>>> 1.[ERROR] : 没有对应的路由页面解决:将路由的mode改为hash(由history改为hash) mode: ' ...
vue打包成app后，背景图片不显示
问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在cs ...
vue打包成app自动更新‘plus‘ is not defined报错
有人知道因为什么嘛?
Vue HBuilder打包为app流程
vue 打包为app 记录以下自己将web app打包成移动端app的步骤及问题事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以 ...

使用vue打包的App如何检测版本更新？

使用vue打包的App如何检测版本更新？相关推荐

最新文章

热门文章