H5项目如何打包成APP
一、下载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.1、在开发app的时候，会遇到header的状态栏颜色和系统手机自带的颜色（顶部手机状态条）不一致，在mainfest.json这个文件里的 plus里设置 statusbar即可
7.2、在开发app的时候，需要启用 https 协议，在mainfest.json这个文件里添加如下代码即可
8、h5移动端，监听手机返回键，两次退出app
index.html文件中加入一下内容 参考地址
<script>
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 < 1000) {
plus.runtime.quit(); //退出应用
}
}
}
})
});
});
</script>
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]);// 获取状态栏的高度
}
10、Hbuilderx打包成APP时，实现全屏横屏旋转的方法
方法一：通过重力感应、横竖屏配置
在manifest.json文件中配置screenOrientation，取值为数组，可取值如下：
"portrait-primary"：竖屏正方向；"portrait-secondary"：竖屏反方向；"landscape-primary"：横屏正方向；"landscape-secondary"：横屏反方向
"screenOrientation" : [
"portrait-primary",
"portrait-secondary",
"landscape-primary",
"landscape-secondary"
],
方法二、手动切换横屏竖屏
lockOrientation(orientation) { //参数 ' landscape'：横屏 'portrait' ：竖屏
if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {
plus.screen.lockOrientation(orientation)
}
}
11、设置安卓底部虚拟按键背景颜色
index.html文件的script标签中加入一下内容参考地址
// 设置安卓底部虚拟按键背景颜色
function plusReady(){
var main = plus.android.runtimeMainActivity();
var windowMe = main.getWindow();
plus.android.importClass(windowMe);
var Color = plus.android.importClass("android.graphics.Color");
//如parseColor("#ffffff")设置为白色
plus.android.invoke(windowMe,"setNavigationBarColor",Color.parseColor("#0D1114"));
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
