H5项目如何打包成APP

出美国区，香港区苹果ID小号，独享账号！不含小火箭，不要买错了！点击购买！

一、下载HBuilderX打包工具，HBuilderX下载地址

二、打开HBuilderX工具

1、选择文件>新建>项目，新建5+APP项目，选择默认模板即可，填入项目名称和地址后，点击创建即可。

2、创建成功后找到文件夹所在位置，删除manifest.json 外的所有文件

3、将H5打包的文件拷贝到当前目录下

即 npm run build 将我们的项目打包生成的dist文件下的所有文件拷贝过来。

4、配置APP

点击 manifest.json 文件，这里我们可以配置应用标识、应用名称、图标配置等等，可以按自己的需求来一一配置。

5、发行-云打包

由于是自己调试，可以选择公共测试证书，然后点击打包即可。注意，第一次打包还需要实名认证账号，在DCloud官网认证登陆认证下即可。

认证地址  认证指导

6、安装apk

打包预计2-5分钟，打开本地目录即可找到对应的apk（unpackage/release/apk/H58E48E7B__20230417093646.apk），发送到手机上安装即可。

7、在开发app的时候，会遇到header的状态栏颜色和系统手机自带的颜色（顶部手机状态条）不一致，在mainfest.json这个文件里的 plus里设置 statusbar即可

8、h5移动端，监听手机返回键，两次退出app

index.html文件中加入一下内容 参考地址

    document.addEventListener('plusready', function () {

          var first = null;

          var webview = plus.webview.currentWebview();

          plus.key.addEventListener('backbutton', function () {

              webview.canBack(function (e) {

                  if (e.canBack) {

                    webview.back(); //这里不建议修改自己跳转的路径 

                  } else {

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

                    if (!first) {

                      first = new Date().getTime(); //获取第一次点击的时间戳 

                      plus.nativeUI.toast("再按一次退出应用", {

                        duration: 'short'

                      }); //通过H5+ API 调用Android 上的toast 提示框 

                      setTimeout(function () {

                        first = null;

                      }, 1000);

                    } else {

                        // 获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,

                      if (new Date().getTime() - first

                        plus.runtime.quit(); //退出应用 

              }

            }

          }

        })

      });

    });

9、H5开发APP判断手机导航栏高度，该高度以px为单位

            let immersed = 0;

            let ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);

            if(ms&&ms.length>=3) { // 当前环境为沉浸式状态栏模式

              immersed = parseFloat(ms[2]);// 获取状态栏的高度

            }