使用wab2app将网页打包成APK-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用wab2app将网页打包成APK。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

通过开源项目ChatGPT-Next-Web部署完了私人网页ChatGPT，为了使访问更加便捷，便想着使用wab2app打包为APK，虽然最终达成了效果，可一路走来遇到了很多坑儿，记录下

打包流程

有要打包的网站和软件HBuilder X，软件官网：https://www.dcloud.io/hbuilderx.html

然后流程如下

创建项目

使用wab2app将网页打包成APK

这一部分设置要打包网页和项目文件保存目录

使用wab2app将网页打包成APK
找到manifest.json文件，依次设置相关配置

设置自适应图标，该功能是一个木函所没有的

重点： 设置标题栏和状态栏兼容

使用wab2app将网页打包成APK

重点： 默认返回时无论处于哪个页面都直接退出软件了而不是返回上一层，要更改这种配置

使用wab2app将网页打包成APK
在client_index.html插入以下代码，需要注意：plus.webview.create里面填的是要打包的网址

<script>

    function plusReady() {

        var zxlmweb = plus.webview.create("https://gpt.songhuashu.cn")

        zxlmweb.show(); // 显示窗口

        var first = null;

        plus.key.addEventListener("backbutton", function() { //监听返回按键

            zxlmweb.canBack(function(e) { //监听webview窗口是否可以返回

                if(e.canBack) { //可以返回

                    zxlmweb.back(); //返回上一页面

                } else { //不可以返回

                    //处理逻辑：1秒内，连续两次按返回键，则退出应用；

                    //首次按键，提示‘再按一次退出应用’

                    if (!first) {

                        first = new Date().getTime();

                        this.$toast('再按一次退出应用');

                        setTimeout(function() {

                            first = null;

                        }, 1000);

                    } else {

                        if (new Date().getTime() - first < 1000) {

                            plus.runtime.quit();//退出app

                        }

                    }

                }

            });

        }, false);

    }

    if(window.plus) {

        plusReady();

    } else {

        document.addEventListener('plusready', plusReady, false);

    }

</script>

然后就是打包了

使用wab2app将网页打包成APK