¿Tutorial de desarrollo de mini programas WeChat?

1. Ingrese a la plataforma pública WeChat (?t=201715. Según el sistema, seleccione la versión de la herramienta correspondiente para descargar. 2. La herramienta contiene tres páginas: edición, depuración y proyecto: (1) El área de edición puede editar el proyecto actual Realizar operaciones básicas como escribir código y agregar, eliminar y cambiar el nombre de archivos (2) La depuración del programa tiene principalmente tres áreas funcionales: simulador, herramientas de depuración y área de operación de programas pequeños (3) La tarjeta de la página del proyecto tiene tres funciones principales: mostrar los detalles del proyecto actual, vista previa del envío y carga del envío y configuración del proyecto

Nota: al iniciar la herramienta, los desarrolladores deben usar la cuenta de WeChat que se ha vinculado exitosamente en segundo plano para escanear el Código QR para iniciar sesión. Todas las operaciones posteriores se basarán en esta cuenta de WeChat

3 Ejemplos de escritura de programas pequeños

1. > 2. Descripción del archivo de ejemplo y código fuente. Un programa pequeño contiene una aplicación (la parte principal) y varias páginas (1). La aplicación se utiliza para describir el programa general y consta de tres archivos. El sufijo .js es un archivo de secuencia de comandos. , el sufijo .json es un archivo de configuración y el sufijo .wxss es un archivo de hoja de estilo. Debe colocarse en el directorio raíz del proyecto. js es el código de script del mini programa (obligatorio). En este archivo, puede monitorear y procesar las funciones del ciclo de vida del mini programa, declarar variables globales y llamar a la API enriquecida proporcionada por el marco.

app.json es la configuración global de. Mini programa completo (obligatorio) Se utiliza para configurar globalmente el mini programa WeChat, determinar la ruta del archivo de la página, el rendimiento de la ventana, establecer el tiempo de espera de la red, configurar varias pestañas, etc. Acepta una matriz, cada elemento es una cadena, para. especifique en qué páginas consta el mini programa. La ruta + nombre de la página de cada página en el mini programa WeChat debe escribirse en las páginas de app.json, y la página en las páginas A es la página de inicio del mini. program.

app.wxss es la hoja de estilo pública de todo el mini programa (no es necesario).

(2) La página se utiliza para describir una página. Aquí, tome el índice de la página de inicio como ejemplo. Cada mini página del programa se compone de cuatro archivos con sufijos diferentes con el mismo nombre en la misma ruta, como: index.js, index.wxml, index.wxss, index.json. El sufijo .js es un archivo de secuencia de comandos, el sufijo .json es un archivo de configuración, el sufijo .wxss es un archivo de hoja de estilo y el sufijo .wxml es un archivo de estructura de página (obligatorio). ), en este archivo podemos monitorear y procesar las funciones del ciclo de vida de la página, obtener instancias de subprogramas, declarar y procesar datos, responder a eventos de interacción de la página, etc.

index.wxml es el archivo de estructura de la página (Obligatorio ).

index.wxss es un archivo de hoja de estilo de página (no obligatorio). Cuando hay una hoja de estilo de página, las reglas de estilo en la hoja de estilo de la página se aplicarán en cascada sobre las reglas de estilo en app.wxss. Si no especifica la hoja de estilo de la página, también puede usar directamente las reglas de estilo especificadas en app.wxss en el archivo de estructura de la página.

index.json es el archivo de configuración de la página (no es obligatorio). Cuando hay un archivo de configuración de la página, los elementos de configuración de la página sobrescribirán los mismos elementos de configuración en la ventana de app.json. Si no hay un archivo de configuración de página especificado, la configuración predeterminada en app.json se usará directamente en la página. No es necesario especificar aquí. Consejos: a. Para facilitar a los desarrolladores reducir los elementos de configuración, el mini programa estipula que los cuatro archivos que describen la página deben tener la misma ruta y nombre de archivo. b. sus propias necesidades (/debug/wxadoc /dev/api/?t=201715)

4. Ejemplo de mini programa de prueba

1. Abra las herramientas de desarrollo web de WeChat y seleccione "Local". Proyecto Mini Programa". 2. Complete el ID de aplicación y el nombre del proyecto del mini programa, seleccione la carpeta de instancia del mini programa escrita en el tercer paso y haga clic en "Agregar proyecto". 3. Si se produce el siguiente efecto, felicidades, ¡su primer proyecto de programa pequeño se ha escrito con éxito! Haga clic en "Editar" en la barra lateral izquierda y también puede modificar directamente el código en la ventana de edición derecha. Guardar (CTRL+S) y actualizar (F5) para que surta efecto.

4. Si desea ver el efecto del proyecto del mini programa en su teléfono móvil, haga clic en "Proyecto" en la barra lateral izquierda, haga clic en "Vista previa" para generar un código QR, abra WeChat y escanee. y puedes verlo.