Detailed explanation of WXML for small program development

WXML (WeiXin Markup Language) is a set of tag languages ​​designed by the MINA framework. Combined with basic components and event systems, it can build the structure of the page.

Use some simple examples below to see what capabilities WXML has:

Data binding

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

List rendering

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

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

Template

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

Event

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

[Related recommendations]

1. WeChat applet complete source code download

2. Simple left swipe operation and waterfall flow layout

3. Chaige WeChat Mini Program App Store Source Code

The above is the detailed content of Detailed explanation of WXML for small program development. For more information, please follow other related articles on the PHP Chinese website!