vue-cli 4.0 使用hbuilderx打包5+app 热更新

1.使用vue-cli 搭建项目(自己百度)

2.在app.vue或者其它的入口文件加入以下代码(大部分参考了hbulder官网)

参考:https://ask.dcloud.net.cn/doc...

 import {getAction} from "@/api";

    export default {
        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) {
                // 这里是你获取版本号的方式
                let url = `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) {
                        let result = res.result ? res.result : ''
                        if (result && currentV && currentV !== result.version) {
                            // 这里使用了element-ui的组件 你也可以更换别的
                            this.$confirm('检测到有新版本, 是否更新?', '更新提示', {
                                closeOnClickModal: false,
                                confirmButtonText: '更新',
                                cancelButtonText: '取消',
                                type: 'success'
                            }).then(() => {
                                this.downloadWgt()
                            }).catch(() => {})
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 下载wgt包
            downloadWgt() {
                let wgtUrl = `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文件一起放到服務器上,如下
image.png
这一方法遇到的困难(可跳过):
直接axios访问 http://xxx.xxx.x.xxx:8080/appinfo.json跨域
dev环境下代理可以访问,但是正式环境又跨域了,所以让后端给我个接口他帮我读取(有点笨的方法,如果哪位大神有更好的方法,希望能指点指点,但是不能指指点点)

3. build打包

vue-cli 4.0 使用hbuilderx打包5+app 热更新_第1张图片

4.创建一个hbuilder 5+app项目

直接将生成好的复制粘贴到创建的项目里覆盖
vue-cli 4.0 使用hbuilderx打包5+app 热更新_第2张图片

5.修改manifest.json的版本

在源码视图里(记得和上传到服务器的json文件的版本保持相同)
vue-cli 4.0 使用hbuilderx打包5+app 热更新_第3张图片

6.打包应用

第一次打包
vue-cli 4.0 使用hbuilderx打包5+app 热更新_第4张图片

vue-cli 4.0 使用hbuilderx打包5+app 热更新_第5张图片
第一次写文章,有不对的地方希望轻喷和指正

你可能感兴趣的:(前端,vue.js)