uni-app desde la entrada hasta el maestro (2)

Tuve la suerte de entrar en contacto con uniapp en 2018 y escribí un artículo "Cómo empezar a dominar uni-app". Por algunas razones, el plan no se implementó y una serie de artículos sobre el. El proyecto ya no se escribió, por lo que ha sido criticado por muchas personas. Ahora el proyecto de la compañía necesita escribir H5 basado en uniapp e incrustarlo en la aplicación, por lo que me gustaría compartirlo en función del desarrollo real del proyecto. Los socios interesados ​​pueden consultarlo y presentar sus quejas.

Este artículo comparte principalmente el contenido

Hay dos métodos de inicialización para el proyecto de plantilla uniapp

Dado que VSCode no se puede abandonar, usamos vue-cli para inicializar Para el proyecto, HBuilderX, puede consultar la documentación oficial

De esta manera, puede especificar la plantilla a través del comando vue scaffolding. Esta es la plantilla oficial proporcionada por dcloudio

Nosotros. Puede elegir la plantilla predeterminada,

Después del éxito, ejecutamos

Abra la dirección del navegador y ejecútelo directamente.

Generalmente, es posible que los amigos que son nuevos en el front-end no sepan mucho sobre postcss. Aquí hay una breve introducción.

Por supuesto, el uso específico de PostCSS requiere la introducción de. Algunos complementos, como el autoprefixer de uso común, Postcss-preset-env, etc., pueden consultar sus propios materiales de referencia para saber cómo usarlos específicamente. Después de todo, todavía hay mucho conocimiento en esta área. así que no lo explicaré en detalle.

Por lo general, lo que debemos hacer al escribir terminales móviles es determinar el esquema de adaptación de la página. Las unidades CSS comunes admitidas por uni-app incluyen px y rpx. Se abandonó la explicación oficial. En la actualidad, la solución rpx de WeChat es básicamente compatible con el mercado, por lo que la solución de transferencia upx tiene poca importancia, pero todavía se puede utilizar, pero ya no se recomienda.

rpx fue propuesto originalmente por el subprograma WeChat, que consiste en adaptarse según el ancho y utilizar la pantalla de 750 de ancho como punto de referencia. 750 rpx es exactamente el ancho de pantalla que especifica la uni-app. 750rpx. Entonces, si su diseño de interfaz de usuario se basa en un iPhone 6/6s de 750*1334, solo necesita escribir el px en la pantalla como rpx sin ninguna conversión. De lo contrario, debe realizar la siguiente conversión:

uniapp tiene su propio mecanismo de gestión de enrutamiento en lugar de utilizar la solución vue-route. Personalmente, creo que esta solución es relativamente madura y fácil de usar y puede satisfacer nuestras necesidades diarias:

Mantener la página actual, saltar. a una página de la aplicación y utilice uni.navigateBack para volver a la página original.

2.uni.redirectTo(OBJECT)

Cierra la página actual y salta a una página dentro de la aplicación.

3.uni.reLaunch(OBJECT)

Cierra todas las páginas y abre una determinada página en la aplicación.

Nota: Si se llama a uni.preloadPage(OBJECT), no se cerrará, solo se activará el ciclo de vida onHide

4.uni.switchTab(OBJECT)

Vaya a la página TabBar y cierre todas las demás páginas que no sean TabBar.

Nota: Si se llama a uni.preloadPage(OBJECT), no se cerrará, solo se activará el ciclo de vida onHide

5.uni.navigateBack(OBJECT)

Cerrar la página actual, volver a la página anterior o a la página de varios niveles. Puede obtener la pila de páginas actual a través de getCurrentPages() y decidir cuántos niveles devolver.

5.uni.preloadPage(OBJECT)

La precarga de páginas es una tecnología de optimización del rendimiento. Las páginas precargadas se abren más rápido.

La API de enrutamiento anterior ha satisfecho nuestras necesidades. Por supuesto, el requisito previo para el salto de enrutamiento es que necesitamos configurar el enrutamiento en páginas.json, incluido el enrutamiento y la configuración de estilo específico.

El salto de ruta específico que necesitamos es el siguiente, necesitamos agregar uno más /

Una cosa que necesita atención especial es que cuando usamos el navegador para depurar la página H5 móvil, la pila de páginas desaparecerá después de la página. se actualiza en este momento, navegueBack No puede regresar. Si debe regresar, puede usar History.back() para navegar a otros registros del historial del navegador.

La API proporcionada por uniapp para solicitudes de red es uni.request. Para conocer los métodos de solicitud admitidos específicos, consulte el método del sitio web oficial. Valores válidos

Sin embargo, normalmente lo hacemos. No lo use directamente, sino que pase por una serie de La encapsulación es para facilitar nuestro uso. El uso específico de la interfaz de encapsulación se mostrará junto con la solicitud de datos de la página.