Hbuilder-h5打包APP

1、首先新建h5项目

2、将vue打包到dist后复制到该项目

3、还需要做好配置，如下：

（1）将原先的程序改静态文件路径

（2）路由

（3）增加退出的动作

<script type="text/javascript" charset="UTF-8">
//取消浏览器的所有事件，使得active的样式在手机上正常生效
document.addEventListener('touchstart',function(){
    return false;
},true);
// 禁止选择
document.oncontextmenu=function(){
    return false;
};
// H5 plus事件处理
function plusReady(){
    // Android处理返回键
    plus.key.addEventListener('backbutton',function(){
        ('iOS'==plus.os.name)?plus.nativeUI.confirm('确认退出？', function(e){
            if(e.index>0){
                plus.runtime.quit();
            }
        }, 'HelloH5', ['取消','确定']):(confirm('确认退出？')&&plus.runtime.quit());
    },false);
    // 关闭启动界面
    plus.navigator.setStatusBarBackground('#FFFFFF');
    setTimeout(function(){
        plus.navigator.closeSplashscreen();
    },200);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready',plusReady,false);
}
// 处理点击事件
var _openw=null;
var as='pop-in';// 默认窗口动画
/**
 * 打开新窗口
 * @param {String} id   加载的页面地址，也用作窗口标识
 * @param {String} t    页面的标题
 * @param {String} d    文档页面文件名称（doc目录下），不传入则使用页面的标题
 */
function clicked(id, t, d){
    if(_openw){return;}  // 防止快速点击
    var ws={
        scrollIndicator: 'none',
        scalable: false,
        popGesture: 'close',
        backButtonAutoControl: 'close',
        titleNView: {
            autoBackButton: true,
            backgroundColor: '#D74B28',
            titleColor: '#CCCCCC'
        }
    };
    t&&(ws.titleNView.titleText=t,d||(d=t.toLowerCase()));
    d&&(ws.titleNView.buttons=[{
        fontSrc: '_www/helloh5.ttf',
        text: '\ue301',
        fontSize: '22px',
        onclick: 'javascript:openDoc("/doc/'+d+'.html")'
    }]);
    _openw=plus.webview.create(id, id, ws);
    _openw.addEventListener('loaded', function(){//页面加载完成后才显示
        _openw&&_openw.show(as, null, function(){
            _openw=null;//避免快速点击打开多个页面
        });
    }, false);
    _openw.addEventListener('hide', function(){
        _openw=null;
    }, false);
    _openw.addEventListener('close', function(){//页面关闭后可再次打开
        _openw=null;
    }, false);
}
// 打开关于页面
function openAbout(){
    if(_openw){return;}  // 防止快速点击
    _openw=plus.webview.create('about.html', 'about', {
        scrollIndicator: 'none',
        scalable: false,
        popGesture: 'close',
        backButtonAutoControl: 'close',
        titleNView: {
            autoBackButton: true,
            backgroundColor: '#D74B28',
            titleColor: '#CCCCCC',
            titleText: '关于',
            buttons: [{
                type: 'share',
                onclick: 'javascript:share()'
            }]
        }
    });
    _openw.addEventListener('close', function(){
        _openw=null;
    }, false);
    _openw.show('zoom-fade-out');
}
        </script>

（4）打包，覆盖到h5+APP项目中，申请安卓签名，发布

如何在模拟器上运行：

​​macOS HBuilderX 使用mumu调试APP项目​​

打开MuMu模拟器

打开终端，进入到​​网易mumu模拟器​​的​​adb​​工具所在目录

cd /Applications/NemuPlayer.app/Contents/MacOS

将​​adb​​连接到​​网易mumu模拟器​​的端口

./adb kill-server && ./adb server && ./adb shell

重启 ​​HBuilderX​​ 或者等待一会能看到 设备:Android-XXXXX 说明成功连接了,然后直接运行就可以了

[生成签名证书]

1、检查自己的MAC ,有没有安装Java的 JDK

/usr/libexec/java_home -V

2、如果有安装过JDK,就会出现以下结果,如果还没有安装过Java JDK环境的小伙伴,先去自行安装JDK环境,再继续下面的步骤.

Last login: Mon Jan 10 14:25:43 on ttys002
(base) abcuser-MacBook-Pro:~ abcuser$ /usr/libexec/java_home -V
Matching Java Virtual Machines (3):
    16.0.1, x86_64: "OpenJDK 16.0.1"  /Library/Java/JavaVirtualMachines/jdk-16.0.1.jdk/Contents/Home
    11.0.2, x86_64: "Java SE 11.0.2"  /Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
    1.8.0_251, x86_64:  "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_251.jdk/Contents/Home

3、红框里面就是jdk在Mac的路径,我们需要进入这个路径下,完成后续的步骤

cd /Library/Java/JavaVirtualMachines/jdk1.8.0_231.jdk/Contents/Home

4、

sudo keytool -genkey -alias test.keystore -keyalg RSA -sigalg SHA1WithRSA -validity 20000 -keysize 1024 -keystore test.keystore -v

建议重新生成安全密钥

sudo keytool -importkeystore -srckeystore ./test.keystore -destkeystore ./test.keystore -deststoretype JKS