Quelles sont les instructions du mini-programme WeChat ?

Les instructions de l'applet WeChat incluent : 1. Instruction "wx:for", la méthode d'utilisation est telle que "5e6e1f35f469bc71419d4ae55fc09047{{ index }} {{ item }}" ; 2 , instruction "wx:for-item", qui peut spécifier le nom de variable de l'élément actuel du tableau ; 3. instruction "wx:for-index", qui peut spécifier le nom de variable de l'indice actuel du tableau ; ; 4. Instructions "wx:if" ; 5. Instructions de liaison de données, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 10, applet WeChat version officielle 8.0.25, ordinateur Dell G3.

Quelles sont les instructions du mini-programme WeChat ?

WeChat Mini Program : commandes/composants couramment utilisés

1. Commande

1.1 wx:for command

• 1.1.1 html

1 Il existe un index/élément intégré, le premier index, le dernier élément

<view wx:for="{{ data_list }}">{{ index }} {{ item }} index索引 item元素 </view>

2. Modifier

Utilisez wx:for-item pour spécifier le nom de variable de l'élément actuel du tableau,

Utilisez wx:for-index pour spécifier le nom de variable de l'élément actuel. indice du tableau :

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

• 1.1.2 js

 data: {
    data_list:['大饼','洋葱']
  },

1.2 wx:if

Dans le framework, utilisez wx:if="" pour déterminer si le bloc de code doit être rendu :

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

1.3 bloquez wx:if

car wx:if est un attribut de contrôle, vous devez l'ajouter à une étiquette.

Si vous souhaitez évaluer plusieurs balises de composants à la fois, vous pouvez utiliser une balise 2b5957c2850173214f4ea7f1261e9a0f pour envelopper plusieurs composants et utiliser l'attribut de contrôle wx:if ci-dessus.

Remarque : 2b5957c2850173214f4ea7f1261e9a0f n'est pas un composant, c'est juste un élément d'emballage qui ne fera aucun rendu sur la page et n'accepte que les attributs de contrôle

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

1.4 Liaison de données

• 1.4.1 html

<view>数据1：{{message}}</view>

• 1.4.2 js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    message:"新年快乐",
  }
)}

II. Composant (étiquette)

Vue 2.1 --- similaire à div

2.2 image --- image

2.3 texte --- span

Apprentissage recommandé : "Tutoriel vidéo sur le mini programme"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!