[Desarrollo del subprograma WeChat] Explicación detallada del uso del marco y las herramientas de desarrollo

introducción

Este artículo toma el subprograma WeChat como ejemplo para presentar el uso del marco y las herramientas de desarrollo de subprogramas. Después de leer este artículo, creo que todos pueden comprender el proceso básico y las herramientas comunes del desarrollo de subprogramas, para comenzar rápidamente con desarrollo de subprogramas.

1. Introducción al marco y las herramientas de desarrollo de miniprogramas

1.1 Marco de desarrollo de programas pequeños

El marco de desarrollo de miniprogramas es un marco de desarrollo para crear rápidamente miniprogramas. Proporciona una gran cantidad de componentes y API, lo que permite a los desarrolladores crear rápidamente miniprogramas e implementar funciones enriquecidas. En la actualidad, existen principalmente los siguientes tipos de marcos de desarrollo de programas pequeños:

• Marco de desarrollo de miniprogramas de WeChat : el marco de desarrollo de miniprogramas oficial, desarrollado con lenguaje JavaScript, puede ejecutarse en el cliente de WeChat;
• Marco de desarrollo de subprogramas de Alipay : el marco de desarrollo de subprogramas proporcionado por Alipay, que se desarrolla utilizando el lenguaje JavaScript y puede ejecutarse en el cliente de Alipay;
• Marco de desarrollo de programa pequeño inteligente de Baidu : el marco de desarrollo de programa pequeño proporcionado por Baidu, desarrollado con lenguaje JavaScript, puede ejecutarse en el cliente de Baidu;
• Marco de desarrollo de miniprogramas de ByteDance : el marco de desarrollo de miniprogramas proporcionado por ByteDance se desarrolla utilizando el lenguaje JavaScript y puede ejecutarse en los clientes de ByteDance.

Este artículo tomará el marco de desarrollo del subprograma WeChat como un ejemplo para presentar.

1.2 Herramientas de desarrollo de programas pequeños

La Herramienta de desarrollo de miniprogramas es una herramienta para ayudar en el desarrollo de miniprogramas. Proporciona funciones como la edición de código, la depuración y la vista previa, lo que permite a los desarrolladores desarrollar y depurar de manera más eficiente. En la actualidad, las principales herramientas de desarrollo de programas pequeños incluyen principalmente los siguientes tipos:

• Herramienta de desarrollo de miniprograma WeChat : la herramienta oficial de desarrollo de miniprograma admite vista previa en tiempo real, análisis de código, aviso de error y otras funciones;
• Mini herramienta de desarrollo de programas de Alipay : la mini herramienta de desarrollo de programas proporcionada por Alipay admite la edición de código, la vista previa en tiempo real, la depuración y otras funciones;
• Baidu Smart Mini Program Development Tool : la mini herramienta de desarrollo de programas proporcionada por Baidu admite la edición de código, la vista previa en tiempo real, la depuración y otras funciones;
• Herramienta de desarrollo de miniprogramas ByteDance : la herramienta de desarrollo de miniprogramas proporcionada por ByteDance admite vista previa en tiempo real, depuración y otras funciones.

2. Directrices para usar el marco de desarrollo de miniprogramas de WeChat

2.1 Preparación del entorno de desarrollo

Antes de comenzar a utilizar el marco de desarrollo de subprogramas de WeChat, debemos preparar el entorno de desarrollo. Primero, necesitamos descargar e instalar la herramienta de desarrollo de subprogramas de WeChat, que se puede descargar desde la página de herramientas para desarrolladores de la plataforma pública de WeChat. Una vez completada la instalación, abra la herramienta de desarrollo e inicie sesión con su cuenta de WeChat para comenzar el desarrollo.

2.2 Crear un pequeño proyecto de programa

En la herramienta de desarrollo, haga clic en Nuevo proyecto y complete el nombre del proyecto, el directorio del proyecto y otra información relevante. En este paso, podemos elegir usar la capacidad de desarrollo en la nube o podemos elegir no usarla. Después de hacer clic en Aceptar, la herramienta de desarrollo generará automáticamente la estructura de directorios y el código inicial de un pequeño proyecto de programa para nosotros.

2.3 Página Desarrollar Mini Programa

La página del applet se compone de varios componentes. Podemos usar los componentes en el archivo .wxml de la página para el diseño, establecer el estilo a través del archivo .wxss y escribir la lógica a través del archivo .js.
La siguiente es una introducción a una página simple como ejemplo, que muestra un texto de Hello World y un botón, y aparecerá un cuadro emergente después de hacer clic en el botón.

<!-- index.wxml -->
<view class="container">
  <text>小程序开发框架与工具介绍</text>
  <button bindtap="showToast">点击查看提示</button>
</view>

En el archivo .wxml, usamos el componente ** como contenedor y usamos Componentes y **Componentes para mostrar texto y botones.

/* index.wxss */
.container {
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
    
    
  margin-top: 20px;
}

En el archivo .wxss, configuramos el estilo del .container para centrar el texto y los botones verticalmente, y configuramos el margen superior de los botones.

// index.js
Page({
    
    
  showToast: function() {
    
    
    wx.showToast({
    
    
      title: '小程序开发框架与工具使用指南',
      icon: 'none'
    })
  }
})

En el archivo .js, definimos una función showToast Cuando se hace clic en el botón, se llama al método wx.showToast para que aparezca un cuadro emergente.

2.4 Subprograma de vista previa

Seleccione el modo de vista previa en la herramienta de desarrollo para ver el efecto del subprograma en la ventana de vista previa de la herramienta de desarrollo. Puede escanear el código QR en la herramienta de desarrollo o puede optar por obtener una vista previa en la máquina real.

2.5 Empaquetado y Liberación

Una vez desarrollado el miniprograma, debemos empaquetarlo y publicarlo en la plataforma de miniprogramas. En la herramienta de desarrollo, haga clic en el botón de carga para cargar el subprograma a la plataforma de subprogramas. Antes de cargar, debemos registrar una cuenta de desarrollador de programa pequeño y completar la autenticación de identidad relevante.

3. Guía del usuario de la herramienta de desarrollo de miniprogramas

3.1 Introducción a la interfaz de la herramienta de desarrollo

Las herramientas de desarrollo de subprogramas de WeChat brindan una gran cantidad de funciones, que incluyen edición de código, vista previa en tiempo real, depuración, etc. La siguiente es una breve introducción a la interfaz principal de la herramienta de desarrollo:

• Directorio de archivos : muestra la estructura del directorio de archivos del proyecto de applet, donde puede crear y modificar archivos;
• Editor de código : se utiliza para editar el código del proyecto de applet, funciones de soporte como edición en tiempo real y avisos de código;
• Vista previa en tiempo real : muestra el efecto del subprograma en tiempo real, incluido el diseño de la página, el estilo del componente, etc.;
• Herramientas de depuración : ayuda a los desarrolladores a depurar applets, incluidos mensajes de error, visualización de registros, etc.

3.2 Edición y depuración de código

Durante el proceso de desarrollo, podemos escribir y modificar el código en el editor de código, y la herramienta de desarrollo realizará análisis de código y mensajes de error en tiempo real. Cuando ocurre un error en el código, la herramienta de desarrollo mostrará un aviso de error en el lado izquierdo del editor de código y colocará el cursor en la posición incorrecta.

Cuando necesitamos depurar applets, podemos usar las herramientas de depuración proporcionadas por las herramientas de desarrollo. A través de la herramienta de depuración, podemos ver el registro en ejecución del subprograma y ver la estructura y el estilo del componente de la página actual. La herramienta de depuración también admite la visualización de solicitudes de red, lo que nos ayuda a analizar y resolver problemas relacionados con la red.

Cuatro Resumen

Los marcos y herramientas de desarrollo de programas pequeños brindan funciones poderosas y componentes ricos, lo que brinda a los desarrolladores métodos de desarrollo convenientes y eficientes. Se espera que los desarrolladores puedan usar estas herramientas de manera flexible en el desarrollo real, continuar explorando y aprendiendo en profundidad, y brindando a los usuarios mejores aplicaciones del Mini Programa.

---

Libros recomendados

Colección de pruebas escritas de la entrevista del programador web de Java

Introducción: este libro está escrito especialmente para entrevistas con programadores web de Java, principalmente para responder algunas preguntas técnicas comunes en las entrevistas. El contenido cubre la base web de Java, el servidor web, el marco MVC común, el sistema de marco Spring y Spring Boot y Spring Cloud, la base de datos relacional tradicional, el marco NoSQL y de caché, la cola de mensajes común, el conocimiento necesario del comercio electrónico e Internet, la seguridad de Internet y Distributed. conocimiento del sistema, ecosistema de código abierto de Alibaba, patrones de diseño, comandos de Linux comúnmente utilizados por los desarrolladores de software y otros conocimientos técnicos relacionados con la programación web de Java, así como otros componentes de marco o herramientas de contenedor de uso común, como Docker, Elasticsearch, Nginx, Maven, Guardián del zoológico, etc.

¡Los amigos que necesiten comprar libros en un futuro cercano pueden hacer clic directamente aquí para comprar!

---

participar

1️⃣Métodos de participación: seguir, dar me gusta, marcar y cualquier comentario (cada persona puede comentar hasta tres) 2️⃣Método ganador
: 5 personas serán seleccionadas al azar por el programa , y ​​cada socio obtendrá un libro (opcional)
3️⃣Tiempo del evento: hasta 2023- 08-4 22:00:00

Nota: Después de que finalice el evento, los ganadores se anunciarán en mi página de inicio según lo programado y se enviarán a casa con envío gratuito.

---