Desarrollo de applets WeChat: algunos consejos comunes

Consejos de desarrollo del programa WeChat Mini

Carrusel Swiper

• Cuando utilice el componente carrusel swiper, si elRanura (elemento swiper)Hay un estilo de altura fija, entoncesEnvuelto afuera (swiper) Debe ser mayor o igual que la altura A del estilo en el interior (no pregunte por qué no cree que lo intenta, no escriba esto, hay un problema con la visualización del certificado ...)

Etiquetas de imagen

• La etiqueta de imagen del applet debe darse en el estiloAncho y alto, De lo contrario, la visualización de la imagen se mostrará de acuerdo con el tamaño de la imagen original, envuelta fueraverLa etiqueta no funcionará (cuando todavía eres un diseño de caja div ...)

Componente personalizado

• Los componentes personalizados generalmente se denominaníndiceTodos los archivos al principio (js / json / wxml / wxss), el archivo json en el directorio del archivo wxml que se utilizará, se pueden usar dándole un nombre de etiqueta personalizado al presentarlo. . . (Normalmente hago esto ... ok)

• Los componentes personalizados no se pueden definir usando clases de estilo ordinarias (agregando estilos de clase a los componentes), generalmente no surten efecto y solo pueden usar clases de estilo externas (los componentes generales de terceros tienen clases de estilo externas)

• Personalmente, creo que el principio del diseño de componentes debe basarse en la estabilidad y la facilidad de uso, y encontrar un punto de equilibrio (estilo, esqueleto, lógica, comportamiento) entre ellos. Los componentes con alta usabilidad suelen ser muy difíciles de implementar internamente. , La estabilidad no será demasiado alta, así que encuentre un punto de equilibrio para diseñar

Flotador flexible

.container{
	display: flex;
	flex-diretion: row/column;
	align-item: center;
}

• El flotador flexible puede estar centrado horizontal o verticalmente en todo momento, conocido como los tres espadachines flotantes. . . . . (Aceite Wanjin ...)

• Desarrollo de programas pequeños, si una página tiene múltiples etiquetas o etiquetas y componentes, o cuando las etiquetas y las etiquetas de imagen se usan sucesivamente, se muestran los resultados, hay una pequeña brecha entre las etiquetas y las etiquetas, agregue estilos para usar pantalla: flex Puede resolver este tipo de problema

Configuración de color de fondo

• Hay al menos tres formas

1. Agregar el componente API del applet WeChat a app.json establece el color de fondo, pero existe el problema de que no se puede mostrar durante el desarrollo. . . Solo se puede mostrar en un dispositivo real, pero todavía hay un problema con la pantalla

2. En cada página donde desea modificar el color de fondoverAgregar el estilo de clase a la etiqueta aún puede ser malo. La página no se puede reutilizar, y cuandoverCuando hay muy pocos elementos en la etiqueta, el color de fondo es negro y, cuando se muestra, es medio negro. . . Medio blanco Porque el color de fondo está llenoverEl área de contenido definida por la etiqueta no se verá afectada en otros lugares. . . . .

3. Cuando miramos el estilo de página, podemos ver el código fuente compilado, el más externo está anidadopáginaEtiquetas, puede agregar estilos en la aplicación global. Wxss o wxss de la página actual. . . . (Actualmente estoy usando ... todavía es muy fácil de usar)

Actualizaré los consejos de seguimiento del artículo uno por uno, ¡espero ayudarlo! ! ! . . . .