## 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> ~~~