Resumen de acabado de gramática básico e importante de applet WeChat (enlace de datos, expresión de operación, representación de bucle, representación condicional, enlace de evento (parámetro de paso))

Directorio

• Enlace de datos
• Expresión de la operación
• Representación de bucle
• Representación condicional
• Enlace de eventos (parámetros de paso)

Primero, ordene el directorio inicializado del applet (imagen de una institución).

Suplemento:
configuración del mapa del sitio: mapa del sitio. El archivo json en el directorio raíz del applet se usa para configurar si WeChat puede indexar el applet y sus páginas.

Enlace de datos

visualización de datos wxml

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>

<!-- 6 使用bool类型充当属性 checked  
字符串和 花括号之间一定不要存在空格 否则会导致识别失败 -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>

Datos de simulación de datos en js

Page({
  data: {
    msg: "hello mina",
    num: 10000,
    isGirl: false,
    person: {
      age: 1,
      height: 165,
      name: "fur"
    },
    isChecked:false,
  }
});

Expresión de la operación

1. Puede agregar expresiones entre llaves - "declaraciones"
2. Las expresiones se refieren a algunas operaciones simples, operaciones numéricas, concatenación de cadenas y operaciones lógicas. .
   1. Suma y resta de números
   2. Concatenación de cadenas
   3. Expresión ternaria

<view>{{1+1}}</view> 
<view>{{'1'+'1'}}</view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
<!--输出
2
11
奇数
-->

Ciclo

1. Lista de bucle

1. wx: for = "{{matriz u objeto}}"
2. wx: for-item = "nombre del elemento de bucle"
3. wx: for-index = "índice del elemento de bucle"
4. wx: key = "" Valor único "se utiliza para mejorar el rendimiento de la representación de la lista

Si wx: key está vinculado a una cadena ordinaria, entonces el nombre de la cadena debe ser el único atributo del objeto en la matriz circular.
Si wx: key = "* this", significa que su matriz es una matriz ordinaria. * Esto significa Es un elemento de bucle.
Nota:
Cuando aparece el bucle anidado de la matriz, preste especial atención al siguiente nombre de enlace. No duplique el nombre.
wx:for-item="item" wx:for-index="index"
Por defecto, no escribimos wx:for-item="item" wx:for-index="index", el applet también establecerá el nombre del elemento de bucle e indexará a elemento e índice.
si sólo hay un bucle wx:for-item="item" wx:for-index="index"se puede omitir

Segundo, el ciclo del objeto.

1. wx: for = "{{object}}" wx: for-item = "valor del objeto" wx: for-index = "atributo del objeto"
2. Cuando se repiten objetos, es mejor modificar los nombres de los elementos e índices. wx:for-item="value" wx:for-index="key"

<!-- 列表循环-->
 <view>
   <view 
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id">
     索引：{{index}} -- 值:{{item.name}}
   </view>
 </view>
<!-- 对象循环-->
 <view>
   <view 
  wx:for="{{person}}"
  wx:for-item="value"  
  wx:for-index="key"
  wx:key="id">
     属性:{{key}} -- 值:{{value}}
   </view>
 </view>

elemento de datos js

person: {
	  id:1,
      age: 1,
      height: 165,
      name: "fur"
    },
list:[
      {
        id:0,
        name:"fur"
      },
      {
        id:1,
        name:"furfur"
      }
    ]

etiqueta de bloque

1. Etiqueta de marcador de posición
2. Cuando escribe el código, puede ver que esta etiqueta existe, y el applet lo eliminará cuando se renderice la página.

<view>
    <block 
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="id"
   class="my_list" >
      索引：{{index}}
      --
      值:{{item.name}}
    </block>
  </view>

Representación condicional

Dos métodos pueden mostrar y ocultar elementos de la página

1. wx:if、wx:elif、wx:else
2. uso oculto
   1. Agregar atributo oculto directamente en la etiqueta
   2. hidden="{{true}}"

Qué escena usar

1. Cuando la etiqueta no se cambia con frecuencia, use wx: if primero y elimine la etiqueta directamente de la estructura de la página.
2. Cuando la etiqueta se cambia y se muestra con frecuencia, se usa la prioridad oculta
   y la pantalla se cambia agregando estilos Nota: ¡El atributo oculto no se debe usar con la pantalla de estilo! Se sobrescribirá, porque el principio de oculto es aumentardisplay:none

   <view>
     <view>条件渲染</view>
     <view wx:if="{{true}}">显示</view>
     <view wx:if="{{false}}">隐藏</view>

     <view wx:if="{{flase}}">1</view>
     <view wx:elif="{{flase}}">2 </view>
     <view wx:else> 3 </view>

     <view hidden >hidden1</view>
     <view hidden="{{false}}" >hidden2</view>

     <view wx:if="{{false}}">wx:if</view>
        <!-- 错误用法 ：hidden无法被隐藏 -->
     <view hidden  style="display: flex;" >hidden</view>
   </view>

Imprime el resultado:

Enlace de eventos

Ejemplo: realice los elementos ingresados ​​en el cuadro de entrada que se muestra en el elemento de la página, haga clic en el botón para realizar la operación de suma y resta

Análisis de pasos:

1. Debe vincular el evento de entrada a la etiqueta de entrada y vincular la palabra clave bindinput
2. Obtenga el valor del cuadro de entrada, a través del objeto de origen del evento e.detail.value
3. Asigne el valor del cuadro de entrada a los datos, tenga en cuenta que no se puede asignar directamente, ¡lo cual es diferente de vue! Asignación a través de this.setData
4. Haga clic en el botón, debe agregar un enlace de evento de clic,
5. Nota: No es posible pasar parámetros directamente en el evento en el applet, pasar el parámetro a través del método de atributo personalizado y luego obtener el atributo personalizado a través del origen del evento

página wxml

<view>  
  {{num}}
</view>
输入：
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

archivo js

Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  }
})