微信——WXML

WXML

WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力：

数据绑定

?

1 2 3 4 5 6 7 8

<!--wxml--> <text> {{message}} </view> // page.js Page({   data: {   message: 'Hello MINA!'   } })

列表渲染

?

1 2 3 4 5 6 7 8

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

条件渲染

?

1 2 3 4 5 6 7 8 9 10

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

模板

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

事件

?

1 2 3 4 5 6 7 8 9 10 11

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