如何用HBuilderX将Vue项目打包成APP到手机使用

如果出现vue打包后出现空白请参考这篇博客：https://blog.csdn.net/weixin_48193717/article/details/108401616

一、把写好的vue项目进行打包生成dist

在这里插入图片描述

二、打开HBuilderX新建项目选择5+APP（A）

在这里插入图片描述
把dist的文件夹复制到HBuilderX创建的5+App中

配置图片
在这里插入图片描述
配置启动页面

SDK配置

模块权限配置

配置沉寂模式
沉浸式是APP界面图片延伸到状态栏，应用本身沉浸于状态栏，所以如果第三方的软件没有为状态栏分配图片，那么自然就是黑色。顶端的状态栏和下面的虚拟按键都隐藏，需要的时候从边缘划出。
沉浸模式。当启用该模式，应用程序的界面将占据整个屏幕，系统自动将隐藏系统的状态栏和导航栏，让应用程序内容可以在最大显示范围呈现，增加大屏体验，而当需要查看通知的时候只需要从顶部向下滑动就能呼出通知栏。

代码：

       "statusbar": {
    
     //应用可视区域到系统状态栏下透明显示效果
            "immersed": true
        },

在这里插入图片描述

三、开始生成APP

在这里插入图片描述

打包完成后在控制台看到一下内容说明已经打包成功

四、生成APP之后bug

生成APP之后进入APP 体验单击返回直接退出的本APP应用的解决方法
在这里插入图片描述

代码如下：

<script type="text/javascript">
    
    
    document.addEventListener('plusready', function(a) {
    
     //等待plus ready后再调用5+ API：
                 在这里调用5+ API
                var first = null;
                plus.key.addEventListener('backbutton', function() {
    
     //监听返回键
                        //首次按键，提示‘再按一次退出应用’
                        if (!first) {
    
    
                            first = new Date().getTime(); //获取第一次点击的时间戳
                            // console.log('再按一次退出应用');//用自定义toast提示最好
                            // toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数
                            plus.nativeUI.toast("双击退出", {
    
    duration:'short'}); //通过H5+ API 调用Android 上的toast 提示框
                            setTimeout(function() {
    
    
                                first = null;
                            }, 1000);
                        } else {
    
    
                            if (new Date().getTime() - first < 1000) {
    
     //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
                                plus.runtime.quit(); //退出应用
                            }
                        }
                    }, false);
            });
</script>

以上就是用HBuilderX将Vue项目打包成APP到手机上使用，小伙伴们有没有很激动的心情呢？加油！！！每天进步一点、每天努力一点，你就是最出众的，变成之前你所讨厌的人——有钱人

欢迎大家进群进行技术性的探讨，群号：954314851

在这里插入图片描述