Detaillierte Erläuterung von WXML für die Entwicklung kleiner Programme

WXML (WeiXin Markup Language) ist eine Reihe von Tag-Sprachen, die vom MINA-Framework entwickelt wurden. In Kombination mit Basiskomponenten und Ereignissystemen kann es die Struktur der Seite erstellen.

Verwenden Sie unten einige einfache Beispiele, um zu sehen, wozu WXML in der Lage ist:

Datenbindung

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

Listenwiedergabe

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

Bedingtes Rendering

<!--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;
  }
})

Vorlage

<!--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;}
  }
})

Veranstaltungen

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

[Verwandte Empfehlungen]

1.WeChat Laden Sie die herunter Vollständiger Quellcode des Miniprogramms

2. Einfache Linkswisch-Bedienung und Wasserfall-Flow-Layout

3 Quellcode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von WXML für die Entwicklung kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!