草梅友仁的后花园

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

—

由

CaoMeiYouRen
于
阅读数: 2

by 草梅友仁

前言

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

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

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

0.首先

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

<img src="https://wx1.sinaimg.cn/large/006W7JQLly1g32bx58g0ij30u01hc4qp.jpg" alt="Screenshot_2019-05-15-21-28-49-39" width="50%" data-width="1080" data-height="1920">

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

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

<img src="https://wx2.sinaimg.cn/large/006W7JQLly1g32cmklyr2j30hf0iqdhe.jpg" alt="image" width="50%" data-width="627" data-height="674">

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

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

3.配置 App 信息

<img src="https://ws4.sinaimg.cn/large/006W7JQLly1g32crlhrgpj30no0g1dgv.jpg" alt="image" width="80%" data-width="852" data-height="577">

4.发行打包

<img src="https://ws2.sinaimg.cn/large/006W7JQLly1g32cszbx88j30i60mbdhc.jpg" alt="image" width="80%" data-width="654" data-height="803">

<img src="https://ws1.sinaimg.cn/large/006W7JQLly1g32ctxdfclj30it0godgf.jpg" alt="image" width="80%" data-width="677" data-height="600">

5.下载 app 到手机试用

<img src="https://wx1.sinaimg.cn/large/006W7JQLly1g32cvpph4wj30u01hcb29.jpg" alt="Screenshot_2019-05-15-22-10-01-74" width="50%" data-width="1080" data-height="1920">

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

6.优化用户体验

但是这个时候又会遇到新的问题了。

  • 用户一旦按了手机的物理退出键，会触发 app 的默认退出事件，也就是说这个 app 就直接退出了

    解决方案如下，在你的网站首页添加这样一段代码。请注意，是你的网站首页！

    本段示例仅适用于单页面应用。多页面应用需要每个页面都有这么一段。

    同时为了避免在首页还会返回原来页面的 bug，建议通过路由来判断是否为首页

    <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>

欢迎关注我的其它发布渠道

评论

发表回复