微信小程序 教程之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
})
}
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
热门推荐
10 新人红包祝福语简短精辟
11 幼师给毕业祝福语简短
12 生日高考祝福语妹妹简短
13 下飞机祝福语简短英文
14 元宵发客户祝福语简短
15 爸妈金婚文案祝福语简短
16 新郎朋友红包祝福语简短
17 虎年五一祝福语大全简短
18 出阁宴祝福语姐姐简短