[Mini Programa WeChat] 6 días de introducción precisa (Día 2: capa de vista, capa lógica, sistema de eventos y ciclo de vida de la página del Mini Programa)

1. Ver capa Ver

1. ¿Qué es la capa de vista?

La capa de vista del marco está escrita en WXML y WXSS y se muestra por componentes .

Refleje los datos de la capa lógica en la vista y envíe los eventos de la capa de vista a la capa lógica .

WXML (lenguaje de marcado WeiXin) se utiliza para describir la estructura de la página.

WXS (WeiXin Script) es un conjunto de lenguajes de secuencias de comandos para programas pequeños que se pueden combinar con WXML para construir la estructura de la página .

WXSS (Hoja de estilo WeiXin) se utiliza para describir el estilo de la página .

El componente es la unidad básica de visión .

2.wxml

WXML (WeiXin Markup Language) es un conjunto de lenguajes de etiquetas diseñados por el marco que, combinados con componentes básicos y sistemas de eventos , pueden construir la estructura de la página. Para obtener más sintaxis, consulte el sitio web oficial WXML | Documentación abierta de WeChat .

2.1 Vinculación de datos

<!--wxml-->
<view> {
   
   {message}} </view>

// page.js
Page({
  data: {
    message: 'Hello!页面一'
  }
})

2.2 Representación de listas

<!-- 列表渲染1 -->
<view wx:for="{
   
   {array}}"> {
   
   {item}} </view>
<!-- 列表渲染2 -->
<view wx:for="{
   
   {array2}}">编号：{
   
   {item.id}}; 姓名：{
   
   {item.name}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
    array2: [{id:1,name:'王德法'},{id:2,name:'王老五'},{id:3,name:'西门庆'}]
  }
})

2.3 Representación condicional

<!-- 条件渲染 -->
<view wx:if="{
   
   {view == '1'}}"> 我是1 </view>
<view wx:elif="{
   
   {view == '2'}}"> 我是2 </view>
<view wx:else="{
   
   {view == '3'}}"> 我是3</view>

// page.js
Page({
  data: {
    view: 2
  }
})

2.4 Plantilla

<!-- 模板 -->
<template name="staffName">
  <view>
    FirstName: {
   
   {firstName}}, LastName: {
   
   {lastName}}
  </view>
</template>

<template is="staffName" data="{
   
   {...staffA}}"></template>
<template is="staffName" data="{
   
   {...staffB}}"></template>
<template is="staffName" data="{
   
   {...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: '1-1', lastName: '傻逼'},
    staffB: {firstName: '1-2', lastName: '二比'},
    staffC: {firstName: '1-3', lastName: '流弊'}
  }
})

Para obtener una gran cantidad de contenido, puede consultar el sitio web oficial para enlace de datos , representación de listas , representación condicional , plantillas y referencias .

3、wxss

3.1 Unidades dimensionales

rpx (píxel responsivo): se puede adaptar según el ancho de la pantalla. El ancho de pantalla especificado es 750 rpx. Por ejemplo, en iPhone6, el ancho de la pantalla es 375 px y hay 750 píxeles físicos en total, luego 750 rpx = 375 px = 750 píxeles físicos, 1 rpx = 0,5 px = 1 píxel físico.

equipo	rpx a px (ancho de pantalla/750)	conversión de px rpx (750/ancho de pantalla)
iphone 5	1rpx = 0,42px	1 px = 2,34 rpx
iphone 6	1rpx = 0,5px	1px = 2rpx
iPhone6 Más	1rpx = 0,552px	1 px = 1,81 rpx

[Nota] Inevitablemente habrá algunos fallos en las pantallas más pequeñas. Intente evitar esta situación durante el desarrollo. Puede utilizar el iPhone6 como estándar para los borradores visuales.

3.2 Importación de estilos

Utilice @importla declaración para importar la hoja de estilo externa, @importseguida de la ruta relativa de la hoja de estilo externa que debe importarse y ;finalice la declaración con.

Código de muestra:

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

3.3 Estilo en línea

Los componentes del marco admiten el uso de atributos de estilo y clase para controlar el estilo del componente.

estilo: los estilos estáticos se escriben de manera uniforme en clases. style recibe estilos dinámicos y los analizará en tiempo de ejecución. Intente evitar escribir estilos estáticos en style para evitar afectar la velocidad de renderizado.

<view style="color:{
   
   {color}};" />

clase: se utiliza para especificar reglas de estilo. Su valor de atributo es una colección de nombres de selectores de clases (nombres de clases de estilo) en las reglas de estilo. No es necesario incluir los nombres de las clases de estilo y los nombres de las clases de estilo están separados por espacios ..

<view class="normal_view" />

3.4 Selector

Los selectores actualmente admitidos son:

Selector	Muestra	Descripción de la muestra
.clase	`.intro`	Seleccione todos los componentes con class="intro"
#identificación	`#firstname`	Seleccione el componente con id="firstname"
elemento	`view`	Seleccionar todos los componentes de la vista
elemento, elemento	`view, checkbox`	Seleccione todos los componentes de la vista del documento y todos los componentes de las casillas de verificación
::después	`view::after`	Insertar contenido después del componente de vista
::antes	`view::before`	Insertar contenido antes del componente de vista.

3.5 Estilo global y estilo local

Los estilos definidos en app.wxss son estilos globales y se aplican a todas las páginas. Los estilos definidos en el archivo wxss de la página son estilos locales, que solo se aplican a la página correspondiente y anularán el mismo selector en app.wxss.

4、WXS

WXS (WeiXin Script) es un segmento de script integrado en WXML. A través de WXS, se puede insertar una pequeña cantidad de scripts de procesamiento en la plantilla para enriquecer las capacidades de preprocesamiento de datos de la plantilla. Además, WXS también se puede utilizar para escribir funciones simples de respuesta a eventos WXS .

Sintácticamente, WXS es similar a JavaScript con algunas restricciones. Para comprender completamente la sintaxis de WXS, consulte la Referencia de sintaxis de WXS .

Para obtener más información, consulte el sitio web oficial WXS | Documentos abiertos de WeChat

5. Sistema de eventos

5.1 ¿Qué es un evento?

Los eventos son el método de comunicación desde la capa de vista a la capa lógica.
Los eventos pueden retroalimentar el comportamiento del usuario a la capa lógica para su procesamiento.
Los eventos se pueden vincular a componentes. Cuando se alcanza el evento desencadenante, se ejecutará la función de procesamiento de eventos correspondiente en la capa lógica.
Los objetos de evento pueden contener información adicional, como identificación, conjunto de datos, toques.

5.2 Cómo utilizar eventos

Vincula un controlador de eventos al componente.

Por ejemplo bindtap, cuando el usuario hace clic en el componente, la función de manejo de eventos correspondiente se encontrará en la página correspondiente a la página.

<!-- 事件系统 -->
<view id="tapTest" data-id="1" data-name="Weixin" bindtap="tapName"> Click me! </view>

Escriba la función de procesamiento de eventos correspondiente en la definición de página correspondiente y el parámetro es evento.

Page({
  tapName: function(event) {
    console.log(event)
  }
})

Para obtener más sistemas de eventos, consulte la documentación de desarrollo del sitio web oficial: Ver sistema de eventos en capas

2. tabBar - subprograma de configuración - configuración global

Los archivos en el directorio raíz del miniprograma app.json se utilizan para configurar globalmente el miniprograma WeChat, determinar la ruta del archivo de la página, el rendimiento de la ventana, configurar el tiempo de espera de la red, configurar múltiples pestañas, etc.

Para obtener una descripción completa del elemento de configuración, consulte Configuración global del miniprograma.

La siguiente es una lista de algunas opciones de configuración comunes app.json :

{
  "pages":[
    "pages/index/index",
    "pages/demo1/demo1",
    "pages/demo2/demo2",
    "pages/demo3/demo3",
    "pages/demo4/demo4",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/demo1/demo1",
      "text": "内容"
    }, {
      "pagePath": "pages/demo2/demo2",
      "text": "我的"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. Capa lógica

1. Introducción

La capa lógica del marco de desarrollo del miniprograma utiliza JavaScript un motor para proporcionar al miniprograma JavaScript un entorno de ejecución para desarrollar código y las funciones únicas del miniprograma WeChat.

La capa lógica procesa los datos y los envía a la capa de vista y, al mismo tiempo, acepta comentarios de eventos de la capa de vista.

Todo el código escrito por el desarrollador eventualmente se empaquetará en un JavaScript archivo y se ejecutará cuando se inicie el subprograma hasta que se destruya. Este comportamiento es similar a ServiceWorker , por lo que la capa lógica también se denomina App Service.

Sobre JavaScript la base de, hemos agregado algunas funciones para facilitar el desarrollo de pequeños programas:

Agregar App y Page métodos para el registro del programa y el registro de la página .
Agregue métodos getApp y getCurrentPages para obtener App la instancia y la pila de páginas actual respectivamente.
Proporciona API enriquecidas , como datos de usuario de WeChat, escaneo, pago y otras capacidades específicas de WeChat.
Proporciona capacidades modulares y cada página tiene un alcance independiente .

Nota: La capa lógica del marco del mini programa no se ejecuta en el navegador, por lo que JavaScript algunas capacidades no se pueden utilizar en la web, como window, document etc.

2. Enrutamiento de páginas

El enrutamiento de todas las páginas del miniprograma lo gestiona el marco.

2.1 Pila de páginas

El marco mantiene todas las páginas actuales en forma de pila. Cuando se produce un cambio de enrutamiento, la pila de páginas se comporta de la siguiente manera:

método de enrutamiento	Rendimiento de la pila de páginas
inicialización	Nueva página colocada en la pila
Abrir nueva página	Nueva página colocada en la pila
redirección de página	La página actual se saca de la pila y la nueva página se inserta en la pila.
Volver a la página	La página continúa saliendo de la pila hasta que el destino regresa a la página.
interruptor de pestaña	Todas las páginas se sacan de la pila, dejando solo la página Nueva pestaña.
Recargar	Todas las páginas se sacan de la pila, dejando solo las páginas nuevas.

Los desarrolladores pueden usar getCurrentPages() funciones para obtener la pila de páginas actual.

2.2 Método de enrutamiento

El método de activación de enrutamiento y las funciones del ciclo de vida de la página son los siguientes:

método de enrutamiento	tiempo de activación	página de pre-enrutamiento	Página posterior al enrutamiento
inicialización	La primera página abierta por el mini programa.		al cargar, al mostrar
Abrir nueva página	Llame a la API wx.navigateTo usando el componente <navigator open-type="navigateTo"/>	enOcultar	al cargar, al mostrar
redirección de página	Llame a la API wx.redirectTo usando el componente <navigator open-type="redirectTo"/>	enDescargar	al cargar, al mostrar
Volver a la página	Llame a la API wx.navigateBack usando el componente <navigator open-type="navigateBack"> El usuario presiona el botón Atrás en la esquina superior izquierda	enDescargar	en el programa
interruptor de pestaña	Llame a la API wx.switchTab para usar el componente <navigator open-type="switchTab"/> para cambiar de pestaña.		Consulte la siguiente tabla para conocer diversas situaciones.
Reanudar	Llame a la API wx.reLaunch usando el componente <navigator open-type="reLaunch"/>	enDescargar	al cargar, al mostrar

El ciclo de vida correspondiente al cambio de pestaña (tome las páginas A y B como páginas de la barra de pestañas, C es la página abierta desde la página A y la página D es la página abierta desde la página C):

La página actual	Página posterior al enrutamiento	Ciclo de vida de los desencadenantes (en orden)
A	A	No pasó nada
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B (abrir de nuevo)	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D (entrar desde reenvío)	A	D.onUnload(), A.onLoad(), A.onShow()
D (entrar desde reenvío)	B	D.onUnload(), B.onLoad(), B.onShow()

2.3 Precauciones

navigateTo, redirectTo solo se pueden abrir páginas que no sean tabBar.
switchTab Sólo se pueden abrir páginas de la barra de pestañas.
reLaunch Se puede abrir cualquier página.
La barra de pestañas en la parte inferior de la página está determinada por la página, es decir, siempre que la página esté definida como una barra de pestañas, habrá una barra de pestañas en la parte inferior.
Los parámetros tomados por la ruta de la página de llamada se pueden onLoadobtener de la página de destino.

2.4 Práctica

El método de enrutamiento que utilizamos: abrir una nueva página y cambiar de pestaña para practicar;

Agregue un botón en el wxml de la primera página y agregue un método.

<!-- 路由方式 -->
<button bindtap="A2B">A--B</button>
<button bindtap="A2C">A--C</button>

Escribe el método en js; [Nota] Recuerda revisar los comentarios, también habrá algunos problemas.

// pages/demo1/demo1.js
Page({
  tapName: function(event) {
    console.log(event)
  },
  A2B: function() {
    // tab切换
    wx.switchTab({
      url: '/pages/demo2/demo2',
    })

    // 工具页面不能用navigateTo进行跳转 ---会报错
    // wx.navigateTo({
    //   url: '/pages/demo2/demo2',
    // })
    console.log()
  },
  A2C: function() {
    // navigateTo跳转--跳转下方没有选项卡
    wx.navigateTo({
      url: '/pages/demo3/demo3',
    })
  }
})

3. Ciclo de vida de la página

Veamos una imagen que me proporcionó la documentación de desarrollo del sitio web oficial.

Cada vez que creamos un nuevo proyecto, habrá un archivo js, cada archivo js tendrá los siguientes métodos de ciclo de vida.


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log('1.onLoad')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log('1.onReady')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log('1.onShow')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log('1.onHide')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('1.onUnload')
  },

Imprimimos la prueba de la misma forma en cada página de prueba.

Saltar al submenú

Saltar un nivel

Salta del nivel 1 al nivel 2

Nivel 2 Salto Nivel 2

Salto del segundo nivel al primer nivel: normalmente, el salto no se puede realizar y se puede utilizar el enrutamiento en ese momento .

Salto de página entre generaciones: A > B > C > D > A

Podemos verificarlo basándonos en la siguiente imagen. Es necesario probar más usted mismo.

Si necesita probarlo usted mismo, puede consultar el método de enrutamiento anterior.

2.2 Método de enrutamiento

Resumir:

El nivel uno no será destruido.

Si saltas profundamente al segundo nivel y bajas el nivel, será destruido.

Si saltas al segundo nivel, el nivel superior sólo estará oculto.

Todas las páginas a mitad de generación serán destruidas.

¡El descubrimiento termina aquí! ¡Gracias a todos por discutir en el área de comentarios! ! !