微信小程序 教程之WXML
系列文章：
微信小程序教程之WXSS
微信小程序教程之引用
微信小程序教程之事件
微信小程序教程之模板
微信小程序教程之列表渲染
微信小程序教程之条件渲染
微信小程序教程之数据绑定
微信小程序教程之WXML
WXML
WXML(WeiXinMarkupLanguage)是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力：
数据绑定
<!--wxml-->
<text>{{message}}</view>
//page.js
Page({
data:{
message:'HelloMINA!'
}
})
列表渲染
<!--wxml-->
<viewwx:for-items="{{array}}">{{item}}</view>
//page.js
Page({
data:{
array:[1,2,3,4,5]
}
})
条件渲染
<!--wxml-->
<viewwx:if="{{view=='WEBVIEW'}}">WEBVIEW</view>
<viewwx:elif="{{view=='APP'}}">APP</view>
<viewwx:else="{{view=='MINA'}}">MINAISNOTAPP</view>
//page.js
Page({
data:{
view:'MINA'
}
})
模板
<!--wxml-->
<templatename="staffName">
<view>
FirstName:{{firstName}},LastName:{{lastName}}
</view>
</template>
<templateis="staffName"data="...staffA"></template>
<templateis="staffName"data="...staffB"></template>
<templateis="staffName"data="...staffC"></template>
//page.js
Page({
data:{
staffA:{firstName:'Hulk',lastName:'Hu'},
staffB:{firstName:'Shang',lastName:'You'},
staffC:{firstName:'Gideon',lastName:'Lin'}
}
})
事件
<viewbindtap="add">{{count}}</view>
Page({
data:{
count:1
},
add:function(e){
this.setData({
data:this.data.count+1
})
}
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！