wxml(weixin markup language)是mina设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看wxml具有什么能力：
数据绑定
<!--wxml--> <text> {{message}} </view> // page.js page({ data: { message: 'hello mina!' } })
列表渲染
<!--wxml--> <view wx:for-items="{{array}}"> {{item}} </view> // page.js page({ data: { array: [1, 2, 3, 4, 5] } })
条件渲染
<!--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' } })
模板
<!--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'} } })
事件
<view bindtap="add"> {{count}} </view> page({ data: { count: 1 }, add: function(e) { this.setdata({ data: this.data.count + 1 }) } })
以上就是微信小程序 教程之wxml的内容。