Desarrollo de la entrada del programa WeChat Mini y clasificación de problemas

Los problemas, las soluciones y el proceso de desarrollo específico encontrado durante el desarrollo del applet auxiliar de modificación de imagen

Proceso de desarrollo del applet

Confirmación de demanda

Al confirmar la demanda, preste atención a algunas restricciones de WeChat. Aquí están los puntos que encontré.

• El tamaño total de la bolsa no supera 1 m.

• El número total de páginas no excede de 5

• Hay diferentes efectos de API entre el editor y la máquina real (por ejemplo: el editor canvasToTempFilePath no se puede ejecutar)

• Solo después de agregar el appid puede haber una función de vista previa y depuración real de la máquina . Sin embargo, en este momento, todas las solicitudes deben configurarse en servidores de terceros .

Andamios delanteros determinados

Razones para elegir andamios

• El applet WeChat viene con un editor (el archivo de configuración de actualización en caliente no es compatible, los comentarios no son compatibles, no hay compresión de código ... etc.)

Introducción al andamio

• La Reduxgestión de datos integrada es más conveniente

• Durante el proceso de desarrollo, el uso del xmlreemplazo es wxmlmás amigable con las herramientas de desarrollo

• En el proceso de desarrollo, use lessreemplazar wxss, más poderoso

• Introducido es-promisepara que pueda ser creado y utilizadoPromise

• Agregue la promisifyfunción de herramienta, puede convertir fácilmente el oficial Apien un Pormisemodelo

• Introducido para normalizraplanar datos y hacer que la administración de datos sea más conveniente

• Introducir conversión babelautomática de ES2015funciones

• La compresión de wxml / wxss / js / img reducirá el volumen de pérdida en comparación con la compresión proporcionada por las herramientas del desarrollador.

Aquí hay principalmente un andamio confeccionado

Se recomienda aprender redux

1. Todos los estados se almacenan en una sola tienda en forma de árbol de objetos.

2. El único estado cambiante es la acción, que describe lo que sucedió.

3. Describa cómo las acciones cambian de estado.

Debe convertir los cambios que desea realizar en un objeto normal. Este objeto se denomina acción en lugar de modificar directamente el estado. Luego, escriba una función especial para determinar cómo cada acción cambia el estado de la aplicación. Esta función se denomina reductor.

Desarrollar applet

El documento oficial se puede encontrar en: https: //mp.weixin.qq.com/debu ...

Registro de problemas

• Problemas de adaptación móvil

El uso de la unidad de programa pequeño rpx directamente de acuerdo con el dibujo de diseño puede ser equivalente a la versión actualizada de rem

• Configuración de color de la barra de título del color del tema

Se puede configurar en app.json

• El dibujo del lienzo no puede usar recursos de red y base64, solo archivos locales

Use la API incorporada para almacenar archivos temporales locales para la representación de producción

• Interruptor de estilo

1) Puede enlazar directamente una clase o estilo variable 2) Use wx: if wx: else

• Faltan algunas carpetas de compilación

Preste atención a si hay un error en la información de compilación

• Póngalo en el servidor local y use el applet para abrir el flashback

En la actualidad, el motivo solo se puede ubicar localmente

Documentación china para webpack

Este artículo se reproduce en: Ape 2048 → https://www.mk2048.com/blog/blog.php?id=h00c2c2cb0j