如何三分钟将网站转换为APP？
by草梅友仁
前言
现在用前端技术来写一个app实在是太方便了，尤其是有像HBuilder（现已更名为HBuilderX，功能一样）能将原生H5打包成原生APP的软件，那就更加方便了。
下面我们就来看看，如何在三分钟之内将你的网站转换为APP。
【本案例以草梅友仁自己的个人网站https://www.caomeiyouren.cn/为例】
0.首先
首先，你肯定得先做好一个网站，也已经适配好了手机。但毕竟只是一个网站，还要通过手机浏览器来访问，有点不方便，如果能打包成app岂不美哉？【如图，已经做好了手机适配】
1.使用HBuilder新建移动App工程
先用HBuilder建一个空的移动App工程
2.在index.html页面添加如下代码
1 | <script type="text/javascript"> |
3.配置App信息
4.发行打包
5.下载app到手机试用
效果可以说是非常完美了！
6.优化用户体验
但是这个时候又会遇到新的问题了。
用户一旦按了手机的物理退出键，会触发app的默认退出事件，也就是说这个app就直接退出了
解决方案如下，在你的网站首页添加这样一段代码。请注意，是你的网站首页！
本段示例仅适用于单页面应用。多页面应用需要每个页面都有这么一段。
同时为了避免在首页还会返回原来页面的bug，建议通过路由来判断是否为首页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<script>
/* 解决App端物理返回键的问题 */
document.addEventListener('plusready', function () {
var webview = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function () {
webview.canBack(function (e) {
//通过哈希路由来判断是否为首页，是首页则按返回键退出。避免退出后还会返回原来页面的BUG
if (e.canBack && location.hash !== "#/index") {
webview.back();//返回上一个页面
} else {
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
plus.key.addEventListener('backbutton', function () {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
plus.nativeUI.toast('再按一次退出应用');
setTimeout(function () {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1500) {
plus.runtime.quit();
}
}
}, false);
}
})
});
});
</script>
本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/a7652497.html
版权声明：转载请注明出处！