Resumo de finalização gramatical básica e importante do applet WeChat (ligação de dados, expressão de operação, renderização de loop, renderização condicional, associação de eventos (parâmetro de passagem))

Diretório

• Ligação de dados
• Expressão de operação
• Renderização em loop
• Renderização condicional
• Ligação de evento (passando parâmetros)

Primeiro, classifique o diretório do applet inicializado (imagem de uma instituição)

Suplemento:
configuração do sitemap: sitemap O arquivo json no diretório raiz do applet é usado para configurar se o WeChat e suas páginas podem ser indexadas.

Ligação de dados

exibição de dados 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>

Dados de simulação de dados em js

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

Expressão de operação

1. Você pode adicionar expressões entre chaves - "declarações"
2. Expressões referem-se a algumas operações simples, operações numéricas, concatenação de cadeias e operações lógicas. .
   1. Adição e subtração de números
   2. Concatenação de cadeias
   3. Expressão ternária

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

Ciclo

1. Loop de lista

1. wx: for = "{{matriz ou objeto}}"
2. wx: for-item = "nome do item do loop"
3. wx: for-index = "índice do item do loop"
4. wx: key = "" Valor exclusivo "é usado para melhorar o desempenho da renderização de lista

Se wx: key estiver associado a uma string comum, o nome da string deverá ser o único atributo do objeto na matriz circular.Se
wx: key = "* this", significa que sua matriz é uma matriz comum. * Isso significa É um item de loop.
Nota:
Quando o loop aninhado da matriz aparece, preste atenção especialmente ao seguinte nome de ligação. Não duplique o nome.
wx:for-item="item" wx:for-index="index"
Por padrão, não escrevemos wx:for-item="item" wx:for-index="index", o applet também definirá o nome do item de loop e o índice como item e índice.
Se apenas um circuito wx:for-item="item" wx:for-index="index"pode ser omitido

Segundo, o ciclo do objeto

1. wx: for = "{{object}}" wx: for-item = "valor do objeto" wx: for-index = "atributo do objeto"
2. Ao fazer o loop de objetos, é melhor modificar os nomes do item e do índice 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 dados js

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

etiqueta de bloqueio

1. Rótulo de espaço reservado
2. Quando você escreve o código, pode ver que essa tag existe e o applet irá removê-la quando a página for renderizada.

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

Renderização condicional

Dois métodos podem mostrar e ocultar elementos da página

1. wx:if、wx:elif、wx:else
2. uso oculto
   1. Adicionar atributo oculto diretamente no rótulo
   2. hidden="{{true}}"

Qual cena usar

1. Quando o rótulo não é alternado com freqüência, use wx: se primeiro e remova o rótulo diretamente da estrutura da página.
2. Quando o rótulo é alternado e exibido com freqüência, a prioridade oculta é usada
   e a exibição é alternada pela adição de estilos.Nota: O atributo oculto não deve ser usado com a exibição do estilo! Será substituído, porque o princípio do oculto é 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>

Imprima o resultado:

Ligação de evento

Exemplo: Torne os elementos inseridos na caixa de entrada exibidos no elemento da página, clique no botão para realizar a operação de adição e subtração

Análise da etapa:

1. Você precisa vincular o evento de entrada à tag de entrada e vincular a palavra-chave bindinput
2. Obter o valor da caixa de entrada, através do objeto de origem do evento e.detail.value
3. Atribua o valor da caixa de entrada aos dados, observe que ela não pode ser atribuída diretamente, o que é diferente do vue! Atribuição via this.setData
4. Clique no botão, você precisa adicionar uma ligação de evento de clique,
5. Nota: Não é possível passar parâmetros diretamente no evento no applet, passar o parâmetro pelo método do atributo customizado e, em seguida, obter o atributo customizado pela origem do 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>

arquivo 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
    })
  }
})