Um mini programa WeChat é composto por quatro arquivos:

• .js (lógica): manipula a lógica da página seguindo a sintaxe JavaScript.
• .json (configuração): define a janela da página conforme a sintaxe JSON.
• .wxml (estrutura): descreve os componentes visuais, similar ao XML, mas diferente do HTML.
• .wxss (estilo): compatível com a sintaxe CSS.

A vinculação de dados é o mecanismo de comunicação entre a camada visual e a camada lógica. Ela liga uma propriedade de um elemento da interface do usuário a uma propriedade de um objeto no arquivo lógico. Quando o usuário interage com a interface, os dados visuais mudam e são enviados para a camada lógica (ex.: entrada de texto). Inversamente, quando os dados lógicos são alterados, a interface é atualizada instantaneamente (ex.: exibição de dados da rede). A sintaxe usada é o Mustache (chaves duplas {{ }}) para envolver a propriedade variável. Pode ser aplicada a conteúdo, atributos de componentes, atributos de controle e palavras-chave.

1. Vinculação Simples

index.wxml

<view>{{texto}}</view>

index.js

Page({
  data: {
    texto: 'Olá, aprenda inglês digitando!'
  }
})

2. Vinculação de Atributos de Componentes

index.wxml

<button class='{{classeBotao}}' bindtap='alternarEstilo'>Clique aqui</button>

index.wxss

.primeiro {
  width: 250rpx;
  height: 100rpx;
  background-color: red;
}
.segundo {
  width: 200rpx;
  height: 200rpx;
  background-color: green;
  border-radius: 100rpx;
}

index.js

Page({
  data: {
    ativo: true,
    classeBotao: 'primeiro'
  },
  alternarEstilo: function() {
    this.data.ativo = !this.data.ativo;
    this.data.classeBotao = this.data.ativo ? 'primeiro' : 'segundo';
    this.setData({
      classeBotao: this.data.classeBotao
    });
  }
})

3. Vinculação com Operações

<view hidden='{{tipo ? true : false}}'>Oculto</view>

4. Vinculação de Atributos de Controle

Usamos wx:if="{{condicao}}" para decidir se um bloco deve ser renderizado.

index.wxml

<view wx:if="{{mostrarNome}}">Seu nome</view>

index.js

data: {
  mostrarNome: false
}

Também é possível usar wx:elif e wx:else para múltiplas condições. Para agrupar vários componentes, utilize a tag <block>.

<view wx:if="{{tamanho >= 7}}">Isto é um cachorro</view>
<view wx:elif="{{tamanho < 3}}">Isto é um gato</view>
<view wx:else>Isto é um leão</view>

5. Renderização de Lista com wx:for

Por padrão, o índice do item atual é index e o item é item.

index.wxml

<view wx:for="{{lista}}">{{index}}: {{item.info}}</view>

index.js

data: {
  lista: [
    { info: "Neve Negra" },
    { info: "Lua Crescente ao Vento" }
  ]
}

Para renomear as variáveis, use wx:for-index e wx:for-item.

<view wx:for="{{lista}}" wx:for-index='indice' wx:for-item='elemento'>{{indice}}: {{elemento.info}}</view>

O atributo wx:key aceita uma string que representa uma propriedade exclusiva de cada item (string ou número, imutável).

// index.js
data: {
  minhaLista: [
    { numero: 1, codigo: "cod1" },
    { numero: 2, codigo: "cod2" },
    { numero: 3, codigo: "cod3" }
  ]
}
// index.wxml
<view wx:for="{{minhaLista}}" wx:key="codigo">{{item.codigo}}</view>
<view wx:for="{{minhaLista}}" wx:key="numero">{{item.numero}}</view>

A palavra-chave resevrada *this representa o próprio item, desde que seja uma string ou número único.

// index.js
data: {
  numeros: [1, 2, 3, 4],
  palavras: ['aaa', 'ccc', 'fff', 'bom']
}
// index.wxml
<view wx:for="{{numeros}}" wx:key="*this">{{item}}</view>
<view value="id: {{ item }}" wx:for="{{palavras}}" wx:key="*this">{{item}}</view>