[Applet] Utilice uni-app para crear un marco para el entorno de applet

El directorio de desarrollo es:

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  //文件是应用的配置文件，用于指定应用的名称、图标、权限等
└─pages.json    //文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

Atributos	Tipo	Requerido	Descripción	Plataforma compatible
globalStyle	Objeto	No	Establecer el rendimiento de la ventana de la página predeterminada
paginas	Matriz de objetos	Si	Establecer la ruta de la página y el rendimiento de la ventana
fichas	Objeto	No	Establecer el rendimiento de la pestaña inferior
condición	Objeto	No	Configuración del modo de arranque
subpaquetes	Matriz de objetos	No	Configuración de carga de subcontrato
preloadRule	Objeto	No	Reglas de pre-descarga de subcontratos	WeChat Mini Program
trabajadores	Cuerda	No	Worker Directorio colocado de código	WeChat Mini Program

globalStyle

　　Se usa para configurar la barra de estado de la aplicación, la barra de navegación, el título, el color de fondo de la ventana, etc.

　　Atencion

• • El enlace a la imagen titleImagedebe usarse cuando se usa el applet Alipay https. Debe ser depurado por la máquina real para ver el efecto. No hay ningún efecto en la herramienta de desarrollo Alipay
  • globalStyleLa configuración en la configuración titleImagetambién se sobrescribirá- pages> styleel título del texto en la configuración
  • navigationBarTextStyle puede ser complicado en iOS13, este problema se solucionará en una versión futura
    
    
    

paginas

uni-app El nodo de páginas configura en qué páginas está compuesta la aplicación. El nodo de páginas recibe una matriz. Cada elemento de la matriz es un objeto y sus valores de propiedad son los siguientes:

Atributos	Tipo	Valor por defecto	Descripción
camino	Cuerda		Ruta de la página de configuración
estilo	Objeto		Configurar el rendimiento de la ventana de página. Para los elementos de configuración, consulte pageStyle a continuación

Consejos:

• El primer elemento del nodo de páginas es la página de entrada de la aplicación (es decir, la página de inicio)
• Las páginas nuevas / reducidas en la aplicación necesitan modificar la matriz de páginas
• El nombre del archivo no necesita ser sufijado, el marco encontrará automáticamente el recurso de la página debajo de la ruta

 

fichas

Si la aplicación es una pestaña múltiple, puede usar el elemento de configuración tabBar para especificar el rendimiento de la barra de pestañas y la página correspondiente que se muestra cuando se cambia la pestaña.

Consejos

• Al establecer la posición en la parte superior, el icono no se mostrará
• La lista en tabBar es una matriz, y solo se pueden configurar un mínimo de 2 y un máximo de 5 pestañas. Las pestañas se ordenan en el orden de la matriz.
• Es posible que el interruptor de la barra de pestañas no se muestre a tiempo cuando se carga por primera vez. Primero puede abrir un copo de nieve en espera en el ciclo de vida de onLoad de cada página de la barra de pestañas (hola, la aplicación uni utiliza este método)
• La página de la barra de pestañas permanecerá en la memoria después de mostrarse una vez. Cambiar la página de la barra de pestañas nuevamente solo activará el onShow de cada página, y no activará el onLoad.
• Actualmente, la barra de pestañas en la parte superior solo es compatible con el applet WeChat. Si necesita usar la pestaña superior, se recomienda no usar la configuración superior de la barra de pestañas, sino crear la pestaña superior usted mismo. Puede consultar hola uni-app-> plantilla-> pestaña superior.

 

Preguntas frecuentes para la barra de pestañas

• La API js de Tabbar ve interface-interface-tabbar , que puede realizar una visualización y ocultación dinámicas (como la capa emergente no puede cubrir la barra de pestañas), modificación de contenido (como la internacionalización), elemento más ángulo y otras funciones. También hay ejemplos en hello uni-app.
• Para los eventos de clic de elemento de la barra de pestañas, consulte onTabItemTap en el ciclo de vida de la página .
• El código salta a la página de la barra de pestañas, la API solo puede usar uni.switchTab , no uni.navigateTo, uni.redirectTo; cuando use el componente del navegador para saltar, debe establecer open-type = "switchTab"
• La barra de pestañas se simula mediante un div en el extremo H5 y forma parte de la ventana de la pantalla frontal. Si desea usar el método de posicionamiento inferior, debe usar variables CSS --window-bottom, como un botón suspendido 10px sobre la barra de pestañas.bottom: calc(var(--window-bottom) + 10px)
• La altura predeterminada de la barra de pestañas es diferente en diferentes plataformas. Ver más
• Ejemplo de plantilla de barra de pestañas con signo + en el medio, como referencia . Puede cruzar el final, pero el signo + no se eleva.
• Si necesita una barra de pestañas en el medio, puede personalizarla. Hay ejemplos en el mercado de complementos, como colorUI. Sin embargo, tenga en cuenta que el rendimiento de la barra de pestañas front-end no es tan bueno como la barra de pestañas nativa. Si se trata de un método de varias páginas, la barra de pestañas inferior mostrará la animación de transición al cambiar. Si se trata de un método de una sola página, habrá problemas de rendimiento al alojar contenido de página complejo. Hay muchos ejemplos similares de la barra de pestañas de búsqueda del mercado de complementos.
• Si usa nvue en el lado de la aplicación y personaliza la barra de pestañas, no hay ningún problema de experiencia de rendimiento.
• El proyecto nvue puro (el procesador en el manifiesto es nativo), actualmente usa la barra de pestañas en pages.json afecta el rendimiento, se recomienda usar el front-end para implementar una barra de pestañas de una sola página. Este error se resolverá más tarde.
• El problema de la barra de pestañas que aparece en el teclado emergente de la aplicación de Android. Después de actualizar a HBuilderX 2.2 ya no existe.
• Solo hay una barra de pestañas nativa en la página de inicio. Para las pestañas en la página secundaria, el front end lo implementará solo.
• Si necesita iniciar sesión primero y luego ingresar a la página de pestañas, no necesita configurar la página de inicio como la página de inicio, la página de inicio sigue siendo la página de la barra de pestañas, puede consultar la plantilla de inicio de sesión de HBuilderX al crear un nuevo proyecto uni-app
• La capa de máscara emergente de front-end no puede bloquear el problema de la barra de pestañas, y la barra de pestañas se oculta dinámicamente durante el procesamiento cruzado. fines aplicación puede hacer uso plus.nativeObj.view o subNVue y expulsar la máscara, esto puede referirse a la parte inferior de los ejemplos icono de acción del menú principal
• La versión 1.02.1904090 de WeChat Mini Program Simulator tiene un error: después de hacer zoom en el porcentaje de la página del simulador, la barra de pestañas se congelará después de hacer clic varias veces. La máquina real no es dañina, preste atención al usarla. Ver más

manifest.json El archivo es el archivo de configuración de la aplicación, que se utiliza para especificar el nombre, el icono y los permisos de la aplicación.

 

 

 package.json

　　Al package.jsonagregar uni-appnodos de expansión al archivo , puede implementar plataformas de compilación condicional personalizadas (como el applet Dingding, el número de servicio WeChat, etc.).

Uso de configuración extendida de Package.json (¡copie el código para recordar eliminar los comentarios!):

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": ""  //基准平台 
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }

}

Consejos:

• UNI_PLATFORMEl relleno sólo admite uni-appel apoyo de la plataforma de referencia por defecto, actualmente limitado a los siguientes enumeración app-plusvalores: h5, mp-weixin, mp-alipay, mp-baidu, mp-toutiao,,mp-qq
• BROWSER Sólo UNI_PLATFORMse h5válida, actualmente limitado a la siguiente enumeración Chromevalores: Firefox, IE, Edge, Safari,,HBuilderX
• package.jsonNo se permiten comentarios en el archivo, de lo contrario, la configuración extendida no es válida
• vue-cliNecesita actualizarse a la última versión, HBuilderX necesita actualizarse a la versión Alpha 2.1.6+