## wxml > WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 ### wxml模版 1.数据绑定 ~~~ <view>{{ message }}</view> ~~~ ~~~ Page({ data: { message: 'Hello MINA!' } } ~~~ ~~~ <view id="item-{{id}}"></view> ~~~ ~~~ Page({ data: { id: 0 } }) ~~~ 2.列表渲染 ~~~ <view wx:for="{{array}}">{{index}}: {{item.message}}</view> ~~~ ~~~ Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) ~~~ 使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名： ~~~ <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> ~~~ ~~~ <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view> </view> </view> ~~~ 类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块 ~~~ <block wx:for="{{[1, 2, 3]}}"> <view>{{index}}:</view> <view>{{item}}</view> </block> ~~~ 3.条件渲染 ~~~ <view wx:if="{{condition}}">True</view> ~~~ ~~~ <view wx:if="{{length > 5}}">1</view> <view wx:elif="{{length > 2}}">2</view> <view wx:else>3</view> ~~~ ~~~ <block wx:if="{{true}}"> <view>view1</view> <view>view2</view> </block> ~~~ 4.模版 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 使用 name 属性，作为模板的名字。然后在template内定义代码片段，如： ~~~ <template name="msgItem"> <view> <text>{{index}}: {{msg}}</text> <text>Time: {{time}}</text> </view> </template> ~~~ 使用模板 ~~~ <template is="msgItem" data="{{...item}}" /> ~~~ ~~~ Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) ~~~ 动态渲染模版 ~~~ <template name="odd"> <view>odd</view> </template> <template name="even"> <view>even</view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" /> </block> ~~~ 模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。 5.事件 ~~~ <view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view> ~~~ ~~~ Page({ tapName(event) { console.log(event) } }) ~~~ key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。 自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart 时间冒泡和捕获 阻止冒泡：catchtap 捕获：capturetap 6.引用 import可以在该文件中使用目标文件定义的template，如： ~~~ <template name="item"> <text>{{text}}</text> </template> ~~~ ~~~ <import src="item.wxml" /> <template is="item" data="{{text: 'forbar'}}" /> ~~~ 作用域 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。 ~~~ <!-- A.wxml --> <template name="A"> <text>A template</text> </template> ~~~ ~~~ <!-- B.wxml --> <import src="a.wxml" /> <template name="B"> <text>B template</text> </template> ~~~ ~~~ <!-- C.wxml --> <import src="b.wxml" /> <template is="A" /> <!-- Error! Can not use tempalte when not import A. --> <template is="B" /> ~~~ include ~~~ <!-- index.wxml --> <include src="header.wxml" /> <view>body</view> <include src="footer.wxml" /> ~~~ ~~~ <!-- header.wxml --> <view>header</view> ~~~ ~~~ <!-- footer.wxml --> <view>footer</view> ~~~