Detailed explanation of WXML for small program development-Mini Program Development-php.cn

Detailed explanation of WXML for small program development

Y2J

Release： 2017-05-18 13:42:53

Original

8314 people have browsed it

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

Copy after login

List rendering

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

Copy after login

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

Copy after login

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

Copy after login

Event

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

Copy after login

[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!