How to use HBuilderX to package a Vue project into an APP for mobile phone use

If there is a blank after vue packaging, please refer to this blog: https://blog.csdn.net/weixin_48193717/article/details/108401616

One, package the written vue project to generate dist

Insert picture description here

2. Open HBuilderX to create a new project and select 5+APP (A)

Insert picture description here
Copy the dist folder to the 5+App created by HBuilderX

Configure picture
Insert picture description here
configuration start page

SDK configuration

module permission configuration

configuration silent mode
Immersive is the APP interface picture extended to the status bar, the application itself is immersed in the status bar, so if the third-party software does not allocate pictures for the status bar, it will naturally be black. The status bar at the top and the virtual buttons at the bottom are hidden and drawn from the edges when needed.
Immersive mode. When this mode is enabled, the interface of the application will occupy the entire screen, and the system will automatically hide the status bar and navigation bar of the system, so that the content of the application can be presented in the largest display range, increasing the large-screen experience, and only when you need to view notifications You need to swipe down from the top to call out the notification bar.

Code:

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

Insert picture description here

Three, start to generate APP

Insert picture description here

After the packaging is complete, see the content in the console, indicating that the packaging has been successful

Four, after generating the APP bug

After generating the APP, enter the APP to experience the solution of this APP application that clicks back to exit directly
Insert picture description here

code show as below:

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

The above is to use HBuilderX to package the Vue project into an APP and use it on the mobile phone. Do you guys feel excited? Come on! ! ! Make a little progress every day and work hard every day, you are the most outstanding, and become the person you hated before-the rich

Welcome to join the group for technical discussions, group number: 954314851

Insert picture description here