Explication détaillée de WXML pour le développement de petits programmes

WXML (WeiXin Markup Language) est un ensemble de langages de balises conçus par le framework MINA Combiné avec des composants de base et des systèmes d'événements, il peut construire la structure de la page.

Utilisez quelques exemples simples ci-dessous pour voir les capacités de WXML :

Liaison de données

<!--wxml--><view> {{message}} </view>
// page.jsPage({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

Rendu de liste

<!--wxml--><view wx:for-items="{{array}}"> {{item}} </view>
// page.jsPage({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

Rendu conditionnel

<!--wxml--><view wx:if="{{view == &#39;WEBVIEW&#39;}}"> WEBVIEW </view><view wx:elif="{{view == &#39;APP&#39;}}"> APP </view><view wx:else="{{view == &#39;MINA&#39;}}"> MINA IS NOT APP </view>
// page.jsPage({
  data: {
    view: &#39;MINA&#39;
  }
})

Modèle

<!--wxml--><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.jsPage({
  data: {
    staffA: {firstName: &#39;Hulk&#39;, lastName: &#39;Hu&#39;},
    staffB: {firstName: &#39;Shang&#39;, lastName: &#39;You&#39;},
    staffC: {firstName: &#39;Gideon&#39;, lastName: &#39;Lin&#39;}
  }
})

Événements

<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {    this.setData({
      count: this.data.count + 1
    })
  }
})

[Recommandations associées]

1.WeChat Téléchargez l'intégralité. code source du mini programme

2. Opération simple de balayage vers la gauche et disposition du flux en cascade

3.Source du magasin d'applications du mini programme Chai Ge WeChat. code

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!