Home > Article > WeChat Applet > WeChat Mini Program Tutorial WXML
WXML
WXML (WeiXin Markup Language) is a set of tag languages designed by MINA. Combined with basic components and event systems, it can build the structure of the page.
Use the following simple examples to see what capabilities WXML has:
Data binding
<!--wxml--> <text> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } })
List rendering
<!--wxml--> <view wx:for-items="{{array}}"> {{item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
Conditional rendering
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view> // page.js Page({ data: { view: 'MINA' } })
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.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })
Event
<view bindtap="add"> {{count}} </view> Page({ data: { count: 1 }, add: function(e) { this.setData({ data: this.data.count + 1 }) } })
The above is the content of WXML in the WeChat mini program tutorial. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!