今天实现了H5app自动检测更新，在这里记录下。
首先分析需求
我们要想实现这个自动更新的功能大致分三步：
1.查询线上版本号，然后拿本地版本号与之对比。
2. 若线上版本号比本地版本号大，则下载线上版本。
3. 把下载好版本安装，并替换当前旧版本。
代码实现
判断用户手机系统
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
如果是安卓系统的话，获取线上版本号和本地版本号对比
this.$axios.get('/get/getAppVersion', {
}).then((res) => {
const {
message, data, status } = res
if (status == 200 && data.code == 200) {
const {
version, url ,text} = data.data
this.wgtUrl = url
console.log("地址", this.wgtUrl)
if (this.banben == version) {
this.isUptoDate = true //线上版本与本地版本相同
} else {
//有更新版本
this.isUptoDate = false
this.banben = version
this.text=text
plus.nativeUI.confirm("确定下载更新？", function (e) {
if (e.index == 0) {
that.downLoad(); // 执行下载函数
} else {
}
}, "检测到最新版本", ["下载", "取消"]);
}
}
})
下载函数
downLoad() {
let that = this
const wgtUrl = this.wgtUrl
plus.nativeUI.showWaiting("下载更新");
plus.downloader.createDownload(wgtUrl, {
filename: "_doc/update/" }, function (d, status) {
if (status == 200) {
console.log("下载更新成功：" + d.filename);
that.installWgt(d.filename); // 安装wgt资源包
} else {
console.log("下载更新失败！");
plus.nativeUI.toast("下载更新失败！");
}
plus.nativeUI.closeWaiting();
}).start();
},
安装函数
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("安装更新失败！");
});
}
基本步骤已经完成 下面贴上完整代码
请各位大佬多多指教！
<!-- 检测更新 -->
<template>
<div class='update'>
<van-nav-bar title="检测更新" left-arrow @click-left="goBack" />
<p v-if="isUptoDate">已是最新版本</p>
<div v-else>
<p>已有最新版本:安平宝V10.01</p>
<p style="background-color: #4b77e4 ;color:white;width: 30%;margin: 0 auto;line-height:30px;height: 30px;border-radius: 3px;" @click="update">立即更新</p>
<van-divider>更新内容</van-divider>
<div style="width: 90%;margin: auto;font-size: 14px" v-html="text"></div>
</div>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from 'vue'
import {
Toast } from 'vant'
Vue.use(Toast)
export default {
name: 'Update',
//import引入的组件需要注入到对象中才能使用
components: {
},
data() {
//这里存放数据
return {
isUptoDate: false,
// banben: plus.runtime.version,
banben:2,
wgtUrl: "",
text:""
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {
},
//方法集合
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
},
update(){
plus.nativeUI.confirm("确定下载更新？", function (e) {
if (e.index == 0) {
that.downWgt(); // 下载wgt资源包
// mui.alert('下载中！')
} else {
}
}, "检测到最新版本", ["下载", "取消"]);
},
downWgt() {
let that = this
const wgtUrl = this.wgtUrl
plus.nativeUI.showWaiting("下载更新");
plus.downloader.createDownload(wgtUrl, {
filename: "_doc/update/" }, function (d, status) {
if (status == 200) {
console.log("下载更新成功：" + d.filename);
that.installWgt(d.filename); // 安装wgt资源包
} else {
console.log("下载更新失败！");
plus.nativeUI.toast("下载更新失败！");
}
plus.nativeUI.closeWaiting();
}).start();
},
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("安装更新失败！");
});
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
let that = this
// this.banben = this.$route.params.banben
console.log(this.banben)
// 调取后端接口 判断版本是否相同
var u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
this.$axios.get('/get/getAppVersion', {
}).then((res) => {
console.log("666",res)
const {
message, data, status } = res
if (status == 200 && data.code == 200) {
const {
version, url ,text} = data.data
this.wgtUrl = url
console.log("地址", this.wgtUrl)
if (this.banben == version) {
this.isUptoDate = true
} else {
//有更新版本
this.isUptoDate = false
this.banben = version
this.text=text
}
}
})
} else if (isiOS) {
this.isUptoDate = true
}
},
beforeCreate() {
}, //生命周期 - 创建之前
beforeMount() {
}, //生命周期 - 挂载之前
beforeUpdate() {
}, //生命周期 - 更新之前
updated() {
}, //生命周期 - 更新之后
beforeDestroy() {
}, //生命周期 - 销毁之前
destroyed() {
}, //生命周期 - 销毁完成
activated() {
}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.update {
p {
line-height: 0.88rem;
text-align: center;
font-size: 0.32rem;
}
}
</style>