0%

如何三分钟将网站转换为APP?

如何三分钟将网站转换为APP?

by草梅友仁

前言

现在用前端技术来写一个app实在是太方便了,尤其是有像HBuilder(现已更名为HBuilderX,功能一样)能将原生H5打包成原生APP的软件,那就更加方便了。

下面我们就来看看,如何在三分钟之内将你的网站转换为APP。

【本案例以草梅友仁自己的个人网站https://www.caomeiyouren.cn/为例】

0.首先

首先,你肯定得先做好一个网站,也已经适配好了手机。但毕竟只是一个网站,还要通过手机浏览器来访问,有点不方便,如果能打包成app岂不美哉?【如图,已经做好了手机适配】

Screenshot_2019-05-15-21-28-49-39

1.使用HBuilder新建移动App工程

先用HBuilder建一个空的移动App工程

image

2.在index.html页面添加如下代码

1
2
3
4
<script type="text/javascript">
window.location.href = "https://www.caomeiyouren.cn/#/index";
//这段代码的意思是跳转到指定网页
</script>

3.配置App信息

image

4.发行打包

image image

5.下载app到手机试用

Screenshot_2019-05-15-22-10-01-74

效果可以说是非常完美了!

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
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!