携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情
前言
由于课程作业要求把网站发布为安卓APP，花了两天简单研究了一下怎么使用HBuilderX快速进行转换，并实现对物理按键的正确反应，在这里分享一下入门经验。虽然了解新的api比较麻烦，但是代码本身还是挺简单的（毕竟没有太多的需求）。
5+App入门
在 HBuilderX 里新建一个项目，选择 5+App 的默认模板即可。（Hello H5+ 是示例项目，演示了各种api的使用方法，也内嵌了api文档，对于初学者很有帮助，你可以打开它来学习基本的开发。）
新建的项目中除了 unpackage 文件夹和 manifest.json，其他的都可以删掉换成你自己的文件。
首先，在首页里嵌入以下代码：
//取消浏览器的所有事件，使得active的样式在手机上正常生效
document.addEventListener('touchstart', function() {
return false;
}, true);
// 禁止选择
document.oncontextmenu = function() {
return false;
};
// H5 plus事件处理
function plusReady() {
// Android处理返回键
plus.key.addEventListener('backbutton', function() {
('iOS' == plus.os.name) ? plus.nativeUI.confirm('确认退出？', function(e) {
if (e.index > 0) {
plus.runtime.quit();
}
}, 'HelloH5', ['取消', '确定']): (confirm('确认退出？') && plus.runtime.quit());
}, false);
// 关闭启动界面
setTimeout(function() {
plus.navigator.closeSplashscreen();
}, 200);
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
这里提几点注意事项：
- 所有的 plus api 都应该放在 plusready 事件发生后调用，否则会出现 plus is undefined
- ios 的 h5 confirm 对话框会加一行 url，所以要调用原生的UI，当然也可以都使用原生的UI
plus.key.addEventListener('backbutton', function() {
plus.nativeUI.confirm('确认退出？', function(e) {
if (e.index > 0) {
plus.runtime.quit();
}
},
{
"title":"HelloH5",
"buttons":["取消","确定"],
"verticalAlign":"bottom"
}
);
}, false);
更推荐使用上面这种写法设置样式，详情参见文档：
然后，创建一个js文件，写入以下代码
(function(w) {
function shield() {
return false;
}
document.addEventListener('touchstart', shield, false);
document.oncontextmenu = shield;
// H5 plus事件处理
var ws = null;
function plusReady() {
ws = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function() {
console.log('back button');
back();
}, false);
}
if (w.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
// 返回
w.back = function(hide) {
if (w.plus) {
ws || (ws = plus.webview.currentWebview());
hide ? ws.hide('auto'): history.back();
} else if (history.length > 1) {
console.log('back');
history.back();
} else {
console.log('close');
w.close();
}
};
// 处理点击事件
var openw = null;
w.clicked = function(id, t, ws) {
if (openw) { //避免多次打开同一个页面
return null;
}
if (w.plus) {
ws = ws || {};
ws.scrollIndicator || (ws.scrollIndicator = 'none');
ws.scalable || (ws.scalable = false);
ws.backButtonAutoControl || (ws.backButtonAutoControl = 'close');
ws.titleNView = ws.titleNView || {
autoBackButton: true
};
ws.titleNView.backgroundColor = '#D74B28';
ws.titleNView.titleColor = '#CCCCCC';
t && (ws.titleNView.titleText = t);
openw = plus.webview.open(id, id, ws);
openw.addEventListener('close', function() {
openw = null;
}, false);
return openw;
} else {
w.open(id);
}
return null;
};
})(window);
这里和官方示例中的代码不太一样，主要是改了这句 hide ? ws.hide('auto'): history.back(); ，因为官方示例中所有的跳转链接都是新创建了一个 webview 来显示，所以返回就是 ws.close()，但是我希望用 a 标签直接跳转，所以改为 history.back() 来返回。
不过，如果你想跳转到其他人的网站的话，就需要创建一个 webview 来显示，以规避一些可能的影响。
在html中通过如下方式进行调用：
<span id="https://store.steampowered.com/" onclick="clicked(this.id, '更多游戏')"><button>更多游戏</button></span>
其中，id 就是你要跳转的网址，clicked 的第二个参数是标题。如果你不想要生成标题栏，可以把代码中含有 ws.titleNView 的语句都删掉。
最后，将这个代码文件嵌入到每个文档中即可。
剩下的就是配置一下 mnifest.json，然后使用云打包就会在 unpackage/release/apk 下生成应用的安装包了。相关的配置比较简单，可以看一下配置指南。
总结
本篇文章介绍了如何使用HBuilderX快速将H5网页转为简单的安卓应用的流程。因为需求不高，所以配置起来倒也没那么麻烦。
最后，如果本篇文章对您有所帮助，希望您可以 点赞、收藏、评论，感谢支持 ✧(≖ ◡ ≖✿
