Desarrollo del mini programa WeChat (2) | Interpretación de la composición del documento del proyecto

项目文件构成

Prólogo: El
Mini Programa contiene una aplicación que describe el programa en general y varias páginas que describen sus respectivas páginas.
La parte principal de un programa pequeño consta de tres archivos (archivos app.js, app.json, app.wxss), que deben colocarse en el directorio raíz del proyecto.
Una página de programa pequeña consta de cuatro archivos (archivo de lógica de página js, archivo de estructura de página wxml) , configuración de página json, archivo de estilo wxss) composición

Después de que el proyecto del Mini Programa WeChat se haya creado con éxito, se generarán las siguientes carpetas:

Se generan diferentes tipos de archivos en este proyecto:

• .json Archivo de configuración JSON con sufijo
• .wxml Archivo de plantilla WXML con sufijo, similar al archivo html
• .wxss Archivo de estilo WXSS con sufijo, similar al archivo css
• .js Archivo lógico de script JS con sufijo

A continuación, eche un vistazo a las funciones de estos 4 archivos:

1. JSON 配置

JSONEs un formato de datos, no un lenguaje de programación, JSONjuega 静态配置un papel en un programa pequeño .

Se puede ver en el directorio raíz de un proyecto app.jsony project.config.json:

Aplicación de configuración de applet.json

app.json es la configuración global del subprograma actual, incluidas todas las rutas de página, el rendimiento de la interfaz, el tiempo de espera de la red, las pestañas inferiores, etc. del subprograma. Plantillas creadas en app.jsonla configuración de la siguiente manera:

pagesCampo: utilizado para describir la ruta de todas las páginas del Mini Programa actual, esto es para que el cliente de WeChat sepa en qué directorio está definida actualmente la página de su Mini Programa.
windowDefina en campo el color de fondo superior de todas las páginas del Mini Programa, la definición del color del texto, etc.

Diseño de página:
cada programa de página pequeña también puede usar el mismo nombre que el .jsonarchivo para configurar el rendimiento de la ventana en esta página, los elementos de configuración de la página estarán cubiertos por app.jsonlos windowmismos elementos de configuración.

  "window": {
    
    
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  }

Configuración de herramientas project.config.json

Normalmente cuando utilizas una herramienta, harás alguna configuración personalizada según tus propias preferencias, como el color de la interfaz, la configuración de compilación, etc., cuando cambias a otra computadora para reinstalar la herramienta, tienes que reconfigurarla.

Teniendo esto en cuenta, Mini Program Developer Tool generará uno en el directorio raíz de cada proyecto. project.config.jsonCualquier configuración que realice en la herramienta se escribirá en este archivo. Cuando reinstale la herramienta o cambie su computadora para que funcione, solo necesita descargar Ingresa el paquete de código del mismo proyecto, la herramienta de desarrollo te restaurará automáticamente a la configuración personalizada cuando desarrollaste el proyecto en ese momento, incluyendo una serie de opciones como el color del editor, compresión automática cuando se carga el código, etc.

Página de configuración page.json

Debajo de las páginas que page.jsonrealmente se utilizan para representar el pages/logsdirectorio logs.jsonde estas páginas y la configuración relacionada con los subprogramas.

Si el estilo de todo el subprograma es azul, puede declarar que el color superior es azul en app.json. Pero si cada página de su subprograma tiene un tono de color diferente para distinguir diferentes módulos funcionales, este es el papel de page.json, que permite a los desarrolladores definir de forma independiente algunas propiedades de cada página, como el color superior, Ya sea para permitir la actualización desplegable y así sucesivamente.

2. WXML 模板

La página web front-end forma una página estática a través de HTML + CSS + JS, donde HTML se usa para describir la estructura de la página actual, CSS se usa para describir el estilo de la página y JS generalmente se usa para procesar la interacción entre esta página y el usuario.

En programas pequeños, WXML juega un papel similar al HTML. Las plantillas de proyecto son las siguientes: que <view></view>es similar htmlen<div></div>

<view class="container">
  <view class="userinfo">
    <button wx:if="{
    
    {!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{
    
    {userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{
    
    {
    
    userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{
    
    {
    
    motto}}</text>
  </view>
</view>

Como arriba, hablemos de las diferencias:

• 标签名字有点不一样

Empacar los componentes de uso común mejora en gran medida la eficiencia del desarrollo. Applet WXMLetiquetas usadas son view, button, texty así sucesivamente, estas etiquetas es un pequeño programa para desarrolladores embalados capacidades básicas, programa oficial de las pequeñas micro-canal también ofrece mapas, video, audio, etc capacidad de montaje.

• 遵循Vue语法
  Hay más atributos como wx: if y expresiones como { {}}, MVVMel modelo de desarrollo utilizado (como React, Vue, que aboga por la separación de la representación y la lógica. No permita que JS controle directamente el DOM, JS solo necesita administrar el estado. Sí, y luego use una sintaxis de plantilla para describir la relación entre el estado y la estructura de la interfaz.

El marco del subprograma también utiliza esta idea, si necesita mostrar una cadena de Hello World en la interfaz.

WXML se escribe así:

<text>{
    
    {
    
    msg}}</text>

JS solo necesita administrar el estado:

this.setData({
    
     msg: "Hello World" })

La vinculación de una variable a la interfaz mediante la sintaxis de { {}} se denomina vinculación de datos. El enlace de datos no es suficiente solo con una descripción completa de la relación entre el estado y las necesidades de la interfaz if/else, forcomo la capacidad de controlar, en un pequeño programa interno, estas capacidades de control se utilizan wx:para expresar el comienzo de la propiedad.

3. WXSS 样式

Los subprogramas de WeChat WXSStienen la CSSmayoría de las características, y los subprogramas también se han ampliado y modificado en WXSS.

• Unidades de dimensión agregadas.

Al escribir estilos CSS, los desarrolladores deben tener en cuenta que las pantallas de los dispositivos móviles tendrán diferentes anchos y proporciones de píxeles del dispositivo, y utilizar algunas técnicas para convertir algunas unidades de píxeles. WXSS admite nuevas unidades de tamaño en la capa inferior rpx. Los desarrolladores pueden evitar los problemas de conversión y dejar la conversión en la capa inferior del programa pequeño. Debido al cálculo de punto flotante utilizado en la conversión, el resultado del cálculo será un poco diferente del resultado esperado.

• Proporciona estilo global y estilo local.

Y al frente app.json, page.jsonel mismo concepto, puede escribir un app.wxssestilo global, actuará en todas las páginas de los subprogramas actuales, el estilo de página parcial page.wxsssolo tendrá efecto en la página actual.

• WXSS solo admite algunos selectores CSS

Para obtener documentación más detallada, consulte WXSS.

4. JS 逻辑交互

No basta con que un servicio solo muestre la interfaz, también necesita interactuar con el usuario: responder al clic del usuario, obtener la ubicación del usuario, etc. En el applet, procesamos las operaciones del usuario escribiendo archivos de script JS.

<view>{
    
    {
    
     msg }}</view>
<button bindtap="clickMe">点击我</button>

Haga clic en el botón de botón, queremos poner en la pantalla msgde visualización para "Hello World", por lo declaramos una propiedad en el botón : bindtap, en el interior archivo JS declara clickMemétodo en respuesta a la operación de clic:

Page({
    
    
  clickMe: function() {
    
    
    this.setData({
    
     msg: "Hello World" })
  }
})

Además, también podemos llamar en JS rica applet de API proporcionada por el API puede ser transferido fácilmente a partir de la capacidad de proporcionar micro-canal, como 获取用户信息, 本地存储, 微信支付y así sucesivamente. Frente al ejemplo de QuickStart, pages/index/index.jsse llama la wx.getUserInfocabeza del usuario adquirido y el apodo de micro-letras, y finalmente setDatala información adquirida se muestra en la pantalla. Obtenga más información sobre la API del programa WeChat Mini

Se hace referencia al artículo desde el sitio web oficial: https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

Nadie que aprenda un lenguaje de programación conoce su propio lenguaje mejor que el oficial, la mejor manera de aprender es mirar la documentación oficial.

Anterior: Desarrollo del mini programa WeChat (1) | Pasos para configurar un entorno de desarrollo introductorio