序文

オープンソースプロジェクト ChatGPT-Next-Web を通じてプライベート Web ページ ChatGPT をデプロイした後、アクセスをより便利にするために、wab2app を使用してそれを APK にパッケージ化することを考えました。最終的には効果が得られましたが、途中で多くの落とし穴に遭遇しました。道を記録してください

包装工程

HBuilder X をパッケージ化する Web サイトとソフトウェアがあります。ソフトウェア公式 Web サイト：https://www.dcloud.io/hbuilderx.html

その後、プロセスは次のようになります

プロジェクトを作成する

画像の説明を追加してください

この部分では、Web ページとプロジェクトファイルをパッケージ化するディレクトリを設定します。

画像の説明を追加してください
マニフェスト.json ファイルを見つけて、関連する設定を順に設定します

アダプティブアイコンを設定しますこの機能は、木製レターにはない重要なポイントです

:タイトルバーとステータスバーを互換性のあるものに設定する

画像の説明を追加してください

キーポイント:デフォルトでは、どのページに戻っても、前のレイヤーに戻るのではなく、ソフトウェアを直接終了します。この設定を変更する必要があります。

画像の説明を追加してください
client_index.html に次のコードを挿入します。注意が必要です: plus.webview.create はパッケージ化する URL を入力します。

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

そしたら梱包されてるよ

画像の説明を追加してください