Heim  >  Artikel  >  WeChat-Applet  >  Detaillierte Erläuterung von WXML für die Entwicklung kleiner Programme

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

Y2J
Y2JOriginal
2017-05-18 13:42:538317Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn