vue 安卓端自动检测版本以及更新app

今天实现了H5app自动检测更新，在这里记录下。首先分析需求我们要想实现这个自动更新的功能大致分三步：1.查询线上版本号，然后拿本地版本号与之对比。2. 若线上版本号比本地版本号大，则下载线上版本。3. 把下载好版本安装，并替换当前旧版本。代码实现判断用户手机系统let isAndroid = u.indexOf('Android') > -1 || u.indexOf(...

047a

2568人浏览 · 2020-02-16 20:21:52

047a · 2020-02-16 20:21:52 发布

今天实现了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>