HBuilder制作移动APP资源升级包的教程。

该教程主要是,用于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了。
接下来就是制作安装包了!!!!
然后我修改了我的vue代码注销了跳转主页
在这里插入图片描述
第一步,还是进行npm run build 进行资源打包,打包出你的dist目录。
在这里插入图片描述
然后修改你的manifest.json文件,版本修改为2.0
在这里插入图片描述
接下来在hbuder中右键点击->发行->制作移动APP资源升级包。
在这里插入图片描述
直接点确定
在这里插入图片描述
把这个文件修改成刚才url请求的wgt文件的名字,我的是UPpackage.wgt.。
接下来就只需要把文件丢在服务器上,然后在手机端点击更新按钮,就可以自动在线更新了。如果没有反应很有可能是出现了跨域请求的问题,这个就交给你们的服务端人员去解决。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章