Cómo usar HBuilderX para empaquetar un proyecto de Vue en una aplicación para uso de teléfonos móviles

Si hay un espacio en blanco después del empaquetado de vue, consulte este blog: https://blog.csdn.net/weixin_48193717/article/details/108401616

Uno, empaquetar el proyecto vue escrito para generar dist

Inserte la descripción de la imagen aquí

2. Abra HBuilderX para crear un nuevo proyecto y seleccione 5 + APP (A)

Inserte la descripción de la imagen aquí
Copie la carpeta dist en la aplicación 5 + creada por HBuilderX
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

Configurar la
Inserte la descripción de la imagen aquí
página de inicio de la configuración de imagen Módulo de
Inserte la descripción de la imagen aquí
configuración de SDK configuración de
Inserte la descripción de la imagen aquí
permisos
Inserte la descripción de la imagen aquí
modo silencioso
Inmersivo es que la imagen de la interfaz de la aplicación se extiende a la barra de estado, la aplicación en sí está inmersa en la barra de estado, por lo que si el software de terceros no asigna imágenes para la barra de estado, naturalmente será negra. La barra de estado en la parte superior y los botones virtuales en la parte inferior están ocultos y dibujados desde los bordes cuando es necesario.
Modo inmersivo. Cuando este modo está habilitado, la interfaz de la aplicación ocupará toda la pantalla, y el sistema ocultará automáticamente la barra de estado y la barra de navegación del sistema, de modo que el contenido de la aplicación se pueda presentar en el rango de visualización más grande, aumentando la experiencia de pantalla grande, y solo cuando necesite ver notificaciones. Debe deslizar el dedo hacia abajo desde la parte superior para llamar a la barra de notificaciones.

Código:

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

Inserte la descripción de la imagen aquí

Tres, empieza a generar APP

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Una vez que el empaque está completo, vea el contenido en la consola, lo que indica que el empaque se ha realizado correctamente
Inserte la descripción de la imagen aquí

Cuatro, después de generar el error de la APLICACIÓN

Después de generar la APLICACIÓN, ingrese a la APLICACIÓN para experimentar la solución de esta aplicación de APLICACIÓN que hace clic hacia atrás para salir directamente
Inserte la descripción de la imagen aquí

el código se muestra a continuación:

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

Lo anterior es usar HBuilderX para empaquetar el proyecto Vue en una APLICACIÓN y usarlo en el teléfono móvil. ¿Se sienten emocionados? ¡Venga! ! ! Haz un pequeño progreso todos los días y trabaja duro todos los días, eres el más destacado y conviértete en la persona que odiabas antes: los ricos.

Bienvenido a unirse al grupo para discusiones técnicas, número de grupo: 954314851

Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_48193717/article/details/108630046
Recomendado
Clasificación