该教程主要是,用于Vue项目采用HBuilder进行app打包和设置升级包。

该Vue项目是采用Vue+Vue手脚架+webpack构建的
首先可以选择发行->制作移动app资源升级包,点击以后
在这里插入图片描述
可以去官网看下教程。

接下来在你的Vue代码里添加以下代码。
我在login.vue文件下写了一个在线更新为他绑定了一个更新事件
在这里插入图片描述
接下来就为UPpackage函数添加代码了。

UPpackage () {
        // 获取当前应用的版本号
        var wgtVer = null;
        function plusReady () {
          // ......
          // 获取本地应用资源版本号
          plus.runtime.getProperty(plus.runtime.appid, function (inf) {
            wgtVer = inf.version;
            alert('当前应用版本:' + wgtVer);
          });
        }
        if (window.plus) {
          plusReady();
        } else {
          document.addEventListener('plusready', plusReady, false);
        };
        // 发起ajax检测是否有新版本
        var checkUrl = 'http://服务器域名/文件夹/mananger_tool/update/update.php';
        function checkUpdate () {
          alert('检测更新');
          plus.nativeUI.showWaiting('检测更新...');
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            switch (xhr.readyState) {
              case 4:
                plus.nativeUI.closeWaiting();
                if (xhr.status === 200) {
                  alert('检测更新成功:'+ xhr.responseText);
                  var newVer = xhr.responseText;
                  if (wgtVer && newVer && (wgtVer !== newVer)) {
                    downWgt();  // 下载升级包
                  } else {
                    plus.nativeUI.alert('无新版本可更新!');
                  }
                } else {
                  alert('检测更新失败!');
                  plus.nativeUI.alert('检测更新失败!');
                }
                break;
              default:
                break;
            }
          };
          xhr.open('GET', checkUrl);
          xhr.send();
        }
        checkUpdate();
        // 下载wgt文件
        var wgtUrl = 'http://服务器域名/文件夹/mananger_tool/update/update.wgt';
        function downWgt () {
          plus.nativeUI.showWaiting('下载wgt文件...');
          plus.downloader.createDownload(wgtUrl, {filename: '_doc/update/'}, function (d, status) {
            if (status === 200) {
              alert('下载wgt成功:' + d.filename);
              installWgt(d.filename); // 安装wgt包
            } else {
              alert('下载wgt失败!');
              plus.nativeUI.alert('下载wgt失败!');
            }
            plus.nativeUI.closeWaiting();
          }).start();
        };
        // 更新应用资源
        function installWgt (path) {
          plus.nativeUI.showWaiting('安装wgt文件...');
          plus.runtime.install(path, {}, function () {
            plus.nativeUI.closeWaiting();
            alert('安装wgt文件成功!');
            plus.nativeUI.alert('应用资源更新完成!', function () {
              plus.runtime.restart();
            });
          }, function (e) {
            plus.nativeUI.closeWaiting();
            console.log("安装wgt文件失败["+e.code+"]:"+e.message);
            plus.nativeUI.alert("安装wgt文件失败["+e.code+"]:"+e.message);
          });
        }
      }

你们可以直接复制过去用,不过需要进行适量的修改。PS:这段代码就是官网教程的代码,不过需要自己调用他的函数
在这里插入图片描述
update.php主要就是返回最新的版本号,我返回的是一个字符串,2.0.你们可以根据自己的需求进行修改,注意修改url,
在这里插入图片描述
update.wgt这个就是升级包,这两个文件我都是部署的服务器上,你们可以根据自己的需求进行修改。接下来就是讲如何制作安装包。
首先,需要把你的Vue项目通过npm run build 命令打包dist文件,具体教程可以百度
在这里插入图片描述
打包之后会在你的目录下出现一个dist文件夹。
在这里插入图片描述
然后打开dist文件夹下的index就是你的项目(新手打包出来的index页面可能会出现空白,这个问题很好解决只需要把index内部的链接修改一下,主要是因为打包的过程中没有修改 打包的url造成的路径问题。具体教程百度很多)
加粗样式
第二步,打包好dist文件以后,打开index顺利出现你的项目或者是界面,那么就成功了,接下来需要把打包好的文件丢入HBuilder中,
在这里插入图片描述
右键点击dist转换成手机APP
在这里插入图片描述
项目下就会出现一个manifest.json文件,我们对其进行修改,因为这是第一版本所有修改他的版本号为1.0
在这里插入图片描述
右键点击dist文件夹,选择发行->app云端打包
在这里插入图片描述
点击打包,等打包好了把东西APK下载下来安装到手机就ok了。
接下来就是制作更新包了!!!! 就是上面所讲的update.wgt文件
然后我修改了我的vue代码注销了跳转主页
在这里插入图片描述
第一步,还是进行npm run build 进行资源打包,打包出你的dist目录。
在这里插入图片描述
然后修改你的manifest.json文件,版本修改为2.0
在这里插入图片描述
接下来在hbuder中右键点击->发行->制作移动APP资源升级包。
在这里插入图片描述
直接点确定
在这里插入图片描述
把这个文件修改成刚才url请求的wgt文件的名字,我的是UPpackage.wgt.。
接下来就只需要把文件丢在服务器上,然后在手机端点击更新按钮,就可以自动在线更新了。如果没有反应很有可能是出现了跨域请求的问题,这个就交给你们的服务端人员去解决。

Logo

前往低代码交流专区

更多推荐