【Mini Programa】Cómo desarrollar tu propio mini programa

Introducción al miniprograma

concepto

Un mini programa es una aplicación que se puede utilizar sin necesidad de descargarla ni instalarla. Hace realidad el sueño de una aplicación "al alcance de su mano". Los usuarios pueden abrir la aplicación escaneando o buscando. También incorpora el concepto de "desaparecer después de su uso", los usuarios no necesitan preocuparse por instalar demasiadas aplicaciones. Las aplicaciones serán ubicuas y estarán disponibles en cualquier momento, pero no es necesario instalarlas ni desinstalarlas.

La diferencia entre los programas pequeños y el desarrollo web ordinario

La diferencia entre los applets y el desarrollo web ordinario se concentra principalmente en los siguientes tres aspectos:

• El entorno operativo es diferente.
• diferentes API
• Diferentes modelos de desarrollo

Herramientas para desarrolladores de WeChat

WeChat Developer Tools es la herramienta oficial recomendada para desarrollar pequeños programas.Las principales funciones que proporciona son las siguientes:

• Cree rápidamente proyectos de subprogramas
• Visualización y edición de código.
• Funciones del subprograma de depuración
• Vista previa y publicación del mini programa

Al compilar, lo actualizaremos directamente en el lado izquierdo. Si usamos la vista previa, mostrará un código QR. Después de escanear el código QR con WeChat, podemos realizar experimentos con máquinas reales.

Composición de código de programa pequeño

estructura del proyecto

Entonces echemos un vistazo a la estructura básica del proyecto:

① las páginas se usan para almacenar las páginas de todos los applets
② las utilidades se usan para almacenar módulos similares a herramientas (por ejemplo: módulos personalizados para formatear el tiempo)
③ app.js el archivo de entrada del
proyecto del applet ④ app.json la configuración global de el archivo del proyecto del subprograma
⑤ app.wxss El archivo de estilo global del proyecto del subprograma
⑥ project.config.json El archivo de configuración del proyecto
⑦ sitemap.json Se utiliza para configurar si WeChat permite indexar el subprograma y sus páginas

La recomendación oficial del Mini Programa es almacenar todas las páginas del Mini Programa en el directorio de páginas como una carpeta separada, como se muestra en la figura:

donde cada página consta de 4 archivos básicos, que son:

• .js 文件(el archivo de script de la página, el almacenamiento de los datos de la página, la función de procesamiento de eventos, etc.)
• .json 文件(El archivo de configuración de la página actual, la apariencia y funcionamiento de la ventana de configuración, etc.)
• .wxml 文件(archivo de estructura de plantilla para la página)
• .wxss 文件(el archivo de hoja de estilo para la página actual)

archivo de configuración JSON

JSON es un formato de datos. En el desarrollo real, JSON siempre aparece en forma de archivos de configuración. Los proyectos de subprogramas no son una excepción: a través de diferentes archivos de configuración .json, los proyectos de subprogramas se pueden configurar en diferentes niveles.

Hay cuatro tipos de archivos de configuración json en el proyecto de applet, a saber:

• archivo de configuración app.json en el directorio raíz del proyecto
• archivo de configuración project.config.json en el directorio raíz del proyecto
• archivo de configuración sitemap.json en el directorio raíz del proyecto
• Archivos de configuración .json en cada carpeta de página

A continuación, hablemos de los cuatro archivos de configuración anteriores:

archivo app.json
app.json es la configuración global del subprograma actual, incluidas todas las rutas de página, la apariencia de la ventana, el rendimiento de la interfaz, la pestaña inferior, etc. del subprograma. La configuración de app.json en el proyecto Demo es la siguiente:

Una breve comprensión de la función de estos cuatro elementos de configuración:

• páginas: se utiliza para registrar la ruta de todas las páginas del subprograma actual
• ventana: define globalmente el color de fondo, el color del texto, etc. de todas las páginas del applet
• estilo: define globalmente la versión de estilo utilizada por los componentes del subprograma
• sitemapLocation: se utiliza para indicar la ubicación de sitemap.json

archivo proyecto.config.json

project.config.json es un archivo de configuración del proyecto, que se utiliza para registrar la configuración personalizada que realizamos en la herramienta de desarrollo de applet, por ejemplo:

• La configuración relacionada con la compilación se guarda en la configuración
• El nombre del proyecto se guarda en el nombre del proyecto (el nombre del applet se configura a través del fondo de administración)
• Appid almacena el ID de cuenta del applet

Nota:

Las operaciones que realizamos en la configuración local en la página de detalles se sincronizarán en el archivo project.config.json

archivo sitemap.json
WeChat ahora ha abierto la búsqueda dentro del mini programa, el efecto es similar al SEO de las páginas web de PC. El archivo sitemap.json se usa para configurar si se permite la indexación de WeChat en las páginas del Mini Programa.

Cuando el desarrollador permite que WeChat indexe, WeChat usará rastreadores para indexar el contenido de la página del Mini Programa. Cuando la palabra clave de búsqueda del usuario coincide con el índice de la página correctamente, la página del Mini Programa puede mostrarse en los resultados de búsqueda.

Si no desea ser indexado, podemos cambiar permitir en acción para no permitir

Nota: La solicitud de índice del mapa del sitio está habilitada de manera predeterminada. Si necesita deshabilitar la solicitud de índice del mapa del sitio, puede configurar el campo checkSiteMap en falso en la configuración del archivo de configuración del proyecto del applet project.config.json

El archivo de configuración .json para la página
Para cada página del subprograma, puede usar el archivo .json para configurar la apariencia de la ventana de esta página, y los elementos de configuración en la página anularán los mismos elementos de configuración en la ventana de app.json . Por ejemplo:

Cree una nueva página de applet:
solo necesita agregar la ruta de almacenamiento de la página en app.json -> páginas, y la herramienta de desarrollo de applet puede ayudarnos a crear automáticamente el archivo de página correspondiente, como se muestra en la figura:

debajo de la carpeta de páginas directorio de lista, hay páginas de lista en el directorio de lista

Modifique la página de inicio del proyecto:
solo necesita ajustar el orden de las rutas de la página en app.json -> matriz de páginas para modificar la página de inicio del proyecto. El subprograma representará la página clasificada en primer lugar como la página de inicio del proyecto, como se muestra en la figura:

Plantilla WXML

WXML（WeiXin Markup Language）Es un conjunto de lenguaje de etiquetado diseñado por el marco del applet, que se utiliza para construir la estructura de la página del applet, y su función es similar a HTML en el desarrollo web.

Diferencia entre WXML y HTML:

• el nombre de la etiqueta es diferente
  • HTML (div, intervalo, img, a)
  • WXML (vista, texto, imagen, navegador)
• nodos de atributos diferentes
  • <a href="#">超链接</a>
  • <navigator url="/pages/home/home"></navigator>
• Proporciona una sintaxis de plantilla similar a la de Vue
  • el enlace de datos
  • renderizado de lista
  • representación condicional

estilo WXSS

WXSS (WeiXin Style Sheets)Es un conjunto de lenguaje de estilo utilizado para describir el estilo de los componentes de WXML, similar a CSS en el desarrollo web.

La diferencia entre WXSS y CSS:

• Unidad de dimensión rpx agregada
  • CSS necesita convertir unidades de píxeles manualmente, como rem
  • WXSS admite la nueva unidad de tamaño rpx en la capa inferior y el subprograma la convertirá automáticamente en pantallas de diferentes tamaños
• Proporciona estilos globales y estilos locales.
  • app.wxss en el directorio raíz del proyecto actuará en todas las páginas del subprograma
  • El estilo .wxss de las páginas parciales solo tiene efecto en la página actual
• WXSS solo admite algunos selectores de CSS
  • .classy#id
  • elemento
  • selector de unión, selector de descendientes
  • ::after::beforeSelectores de pseudoclase como y

interacción lógica JS

No es suficiente que un proyecto solo brinde visualización de la interfaz, en el applet manejamos las operaciones del usuario a través de archivos .js. Por ejemplo: responder al clic del usuario, obtener la ubicación del usuario, etc.

Los archivos JS en el applet se dividen en tres categorías, a saber:

• aplicación.js
  

  • Es el archivo de entrada de todo el proyecto del applet, y todo el applet se inicia llamando a la función App()

• El archivo .js para la página
  

  • Es el archivo de entrada de la página, que se crea y ejecuta llamando a la función Page()

• Archivos .js ordinarios
  

  • Es un archivo de módulo de función común, que se usa para encapsular funciones o propiedades públicas para el uso de la página.

Entorno de host de programa pequeño

Introducción al entorno de acogida

宿主环境（host environment）Hace referencia al entorno dependiente necesario para que se ejecute el programa.

Por ejemplo:

El sistema Android y el sistema iOS son dos entornos de host diferentes. La versión de Android de la aplicación WeChat no puede ejecutarse en el entorno de iOS, por lo que Android es el entorno de host del software de Android, ¡y el software que está separado del entorno de host no tiene sentido!

Mobile WeChat es el entorno de host del Mini Programa, como se muestra en la figura:

Con la ayuda de las capacidades proporcionadas por el entorno de host, el Mini Programa puede completar muchas funciones que las páginas web comunes no pueden completar, como:

• Código de escaneo de WeChat
• Pago de WeChat
• Inicio de sesión en WeChat
• geolocalización
• …

El contenido incluido en el entorno de host del Mini Programa (es decir, el soporte proporcionado por WeChat para los Mini Programas):

• modelo de comunicación
• mecanismo de operación
• componentes
• API

modelo de comunicación

El cuerpo principal de comunicación en el applet es la capa de representación y la capa lógica, en las que:
① Las plantillas WXML y los estilos WXSS funcionan en la capa de representación
② Los scripts JS funcionan en la capa lógica

El modelo de comunicación en el applet se divide en dos partes:

• ① Comunicación entre la capa de representación y la capa lógica
  • Reenviado por el cliente de WeChat
• ② Comunicación entre la capa lógica y el servidor de terceros
  • Reenviado por el cliente de WeChat

mecanismo de operación

El proceso de iniciar el applet:

• ① Descargue el paquete de código del applet al local
• ② Analice el archivo de configuración global app.json
• ③ Ejecute el archivo de entrada del subprograma app.js y llame a App() para crear una instancia del subprograma
• ④ Renderizar la página de inicio del applet
• ⑤ Se inicia el applet

El proceso de representación de la página:

• ① Cargue el archivo de configuración .json de la página de análisis
• ② Cargue la plantilla .wxml y el estilo .wxss de la página
• ③ Ejecute el archivo .js de la página y llame a Page() para crear una instancia de página
• ④ Representación de página completada

componentes

Los componentes del applet también son proporcionados por el entorno host., los desarrolladores pueden crear rápidamente hermosas estructuras de página basadas en componentes. Oficialmente, los componentes del applet se dividen en 9 categorías, a saber:

• ver contenedor
• contenido básico
• componente de formulario
• componente de navegación
• componentes multimedia
• componente de mapa de mapa
• componente de lona
• habilidad abierta
• Accesibilidad

Componentes de clase de contenedor de vista de uso común

• view
  • área de visualización normal
  • Similar a div en HTML, es un elemento a nivel de bloque
  • Comúnmente utilizado para lograr efectos de diseño de página
• scroll-view
  • área de vista desplazable
  • Comúnmente utilizado para lograr efectos de lista de desplazamiento
• swiperyswiper-item
  • Componente de contenedor de carrusel y componente de elemento de carrusel

Hacemos un uso simple de los tres componentes anteriores:

ver componente
Podemos intentar implementar un diseño horizontal flexible:

wxml:

<!--pages/list/list.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view> 
  <view>C</view>  
</view>

wxss:

/* pages/list/list.wxss */

.container1 {
    
    
    display: flex;
    justify-content: space-around; 
}

.container1 view:nth-child(1) {
    
    
    background-color: lightgreen;
}
.container1 view:nth-child(2) {
    
    
  background-color: lightskyblue;
}
.container1 view:nth-child(3) {
    
    
  background-color: lightcoral;
}

.container1 view{
    
    
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

Podemos ver que en términos de sintaxis, en realidad es similar a html y css

Nota:
La clase aquí no puede llamarse container, porque container es una palabra clave, y nuestro estilo no funcionará si se usa. Contenedor1 con nombre y así sucesivamente son todos posibles

componente de vista de desplazamiento

componentes swiper y swiper-item

Atributos comunes del componente swiper:

Componentes de contenido básico de uso común

• texto
  • componente de texto
  • Similar a la etiqueta span en HTML, es un elemento en línea
• Texto rico
  • componente de texto enriquecido
  • Compatibilidad con la representación de cadenas HTML en estructuras WXML

Uso básico del componente de texto

A través del atributo seleccionable del componente de texto, se realiza el efecto de presionar prolongadamente el contenido de texto seleccionado:

Uso básico de componentes de texto enriquecido

A través del nodo de atributo de nodos del componente de texto enriquecido, la cadena HTML se representa en la estructura de interfaz de usuario correspondiente:

Otros componentes comunes

• botón
  • componente de botón
  • Más funcional que los botones de botón en HTML
  • A través del atributo de tipo abierto, se pueden llamar varias funciones proporcionadas por WeChat (servicio al cliente, reenvío, obtención de autorización de usuario, obtención de información de usuario, etc.)
• imagen
  • componente de imagen
  • El componente de imagen tiene un ancho predeterminado de aproximadamente 300 px y una altura de aproximadamente 240 px
• navegador
  • componente de navegación de página
  • Similar a un enlace en HTML

El uso básico del botón botón

Hay muchas propiedades del botón, podemos comprobarlo a través de documentos oficiales:

Uso básico del componente de imagen

Al mismo tiempo, debemos tener en cuenta que la imagen tiene una longitud y un ancho predeterminados:

el atributo de modo del componente de la imagen:

El atributo de modo del componente de imagen se utiliza para especificar el modo de recorte y zoom de la imagen. Los valores de atributo de modo comúnmente utilizados son los siguientes:

Por ejemplo, usemos aspectFit;

API

Las API de los miniprogramas son proporcionadas por el entorno del host. A través de estas ricas API de miniprogramas, los desarrolladores pueden llamar fácilmente a las capacidades proporcionadas por WeChat, como obtener información del usuario, almacenamiento local y funciones de pago.

El Mini Programa divide oficialmente la API en las siguientes tres categorías:

• API de monitoreo de eventos
  • Funciones: comience con encendido, se utiliza para monitorear la activación de ciertos eventos
  • Ejemplo: wx.onWindowResize(función de devolución de llamada) escucha eventos de cambio de tamaño de ventana
• API síncrona
  • Característica 1: las API que terminan en Sync son todas API sincrónicas
  • Característica 2: el resultado de la ejecución de la API síncrona se puede obtener directamente a través del valor de retorno de la función, y se generará una excepción si la ejecución falla
  • Ejemplo: wx.setStorageSync('clave', 'valor') escribe contenido en el almacenamiento local
• API asíncrona
  • Características: Similar a la función $.ajax(opciones) en jQuery, necesita recibir el resultado de la llamada a través de éxito, falla y finalización.
  • Ejemplo: wx.request() inicia una solicitud de datos de red y recibe datos a través de la función de devolución de llamada exitosa

Trabajo colaborativo

En las empresas medianas y grandes, la división del trabajo es muy cuidadosa: para un mismo proyecto de programa pequeño, los empleados con diferentes puestos y roles suelen participar en el diseño y desarrollo al mismo tiempo.

En este momento, debido a las necesidades de gestión, necesitamos urgentemente dividir los límites de los permisos de los empleados en diferentes puestos y roles, para que puedan trabajar juntos de manera eficiente.

Estructura organizativa de los miembros del proyecto:

El proceso de desarrollo del applet:

Gestión de miembros del mini programa

La gestión de los miembros del Mini Programa se refleja en la gestión del administrador de los miembros del proyecto del Mini Programa y los miembros de la experiencia:

• miembro del proyecto:
  • Indica los integrantes involucrados en el desarrollo y operación de los Mini Programas
  • Puede iniciar sesión en el fondo de gestión de subprogramas
  • Los administradores pueden agregar, eliminar miembros del proyecto y establecer las funciones de los miembros del proyecto
• Miembros experimentados:
  • Indica los miembros que participaron en la experiencia de prueba interna del mini programa.
  • Puede usar la versión de prueba del applet, pero no es miembro del proyecto
  • Los administradores y los miembros del proyecto pueden agregar y eliminar miembros de la experiencia
    

Echemos un vistazo a los permisos correspondientes a los diferentes miembros del proyecto:

Declaración de permiso del desarrollador

• ① Derechos de desarrollador: Puede usar las herramientas de desarrollo del Mini Programa y el desarrollo de código para las funciones del Mini Programa
• ② Permiso de experimentador: puede usar la versión de prueba del applet
• ③ Permiso de inicio de sesión: puede iniciar sesión en el fondo de administración de subprogramas sin la confirmación del administrador
• ④ Configuraciones de desarrollo: configure el nombre de dominio del servidor del applet, envíe mensajes y escanee el código QR del enlace común para abrir el applet
• ⑤ Tencent Cloud Management: configuración relacionada con el desarrollo de la nube

Podemos agregar miembros del proyecto y miembros de la experiencia en el elemento de administración de miembros como se muestra en la siguiente figura:

Publicación de applets

versión del applet

Diferentes versiones
en el proceso de desarrollo de software En el proceso de desarrollo de software, se producirán diferentes versiones de software de acuerdo con diferentes nodos de tiempo, por ejemplo:

• ① Mientras el desarrollador escribe el código, realice una autoprueba del código del proyecto (versión de desarrollo)
• ② Hasta que el programa alcance un estado estable y experimentable, el desarrollador entrega la versión de experiencia a los gerentes de producto y probadores para probar la experiencia.
• ③ Después de que finalmente se solucionan los errores del programa, se lanza la versión oficial para que la usen los usuarios externos

Publicar en línea

Los pasos generales para lanzar y lanzar el Mini Programa:

Subir código -> Enviar para revisión -> Publicar

A continuación, describimos cada paso:

cargar código

1. Haga clic en el botón "Cargar" en la barra de herramientas superior de las herramientas para desarrolladores
2. Complete el número de versión y las notas del proyecto

Luego, debemos verificar la versión cargada en segundo plano:

Inicie sesión en el fondo de administración de subprogramas->administración->administración de versiones->versión de desarrollo, y podrá ver la versión enviada y cargada en este momento.

Enviar opinión

Por qué debe enviarse para su revisión: para garantizar la calidad del Mini Programa y cumplir con las especificaciones pertinentes, Tencent debe revisar oficialmente el lanzamiento del Mini Programa.
Cómo enviar para revisión: en la lista de versiones de desarrollo, haga clic en el botón "Enviar para revisión", complete la información relevante de acuerdo con las indicaciones de la página y luego envíe el Mini Programa a Tencent para su revisión.

lanzamiento

Después de pasar la auditoría, el administrador recibirá una notificación de que el Mini Programa ha pasado la auditoría en WeChat. En este momento, en la lista de versiones auditadas, haga clic en el botón "Publicar" para publicar la versión "aprobada" como " versión en línea". ” para el acceso y uso de todos los usuarios del Mini Programa.

Promoción basada en el código del applet

En comparación con los códigos QR comunes, las ventajas de los códigos de miniprogramas son las siguientes:
① Estilo más reconocible y visualmente impactante
② Puede establecer la imagen de marca de los miniprogramas con mayor claridad
③ Ayuda a los desarrolladores a promocionar mejor los miniprogramas

5 pasos para obtener el código del applet:
inicie sesión en el fondo de administración del applet -> configuración -> configuración básica -> información básica -> descargue el código del applet y los materiales fuera de línea

Dos formas de ver los datos operativos del Mini Programa

① Ver en el "Fondo del Mini Programa"

1. Inicie sesión en el fondo de gestión de subprogramas
2. Haga clic en "Estadísticas" en la barra lateral
3. Haga clic en la pestaña correspondiente para ver los datos relevantes

② Use el "Mini Asistente de datos de programa" para ver

1. abrir wechat
2. Busque "Mini asistente de datos de programa"
3. Ver datos relacionados con los subprogramas publicados