WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
要完整了解 WXML 语法,请参考WXML 语法参考。
用以下一些简单的例子来看看 WXML 具有什么能力:
数据绑定
<< span="">view>
{{message}}
<< span="">/view>
/*
page.js
*/
Page({
data:{
message:'Hello MINA!'
}
})
列表渲染
循环,wx:for是一个数组,item变量是一个临时变量,每次循环取得的值都将赋给item。这个变量通常也无法在js文件里找到。下面的例子页面将显示12345
<< span="">view wx:for="{{array}}">
{{item}}
<< span="">/view>
Page({
data:{
array:[1,2,3,4,5]
}
})
条件渲染
按照条件显示,如果条件成立,那么渲染此控件。有三种 其中elif相当与else if:
<< span="">view wx:if="{{view == 'WEBVIEW'}}">
WEBVIEW
<< span="">/view>
<< span="">view wx:elif="{{view == 'APP'}}">
APP
<< span="">/view>
<< span="">view wx:else="{{view == 'MINA'}}">
MINA
<< span="">/view>
//page.js
Page({
data:{
view:'MINA'
}
})
模板:自定义控件
<< span="">template name="staffName">
<< span="">view>
FirstName:{{firstName}},LastName:{{lastName}}
<< span="">/view>
<< span="">/template>
<< span="">template is="staffName" data="{{...staffA}}">
<< span="">/template>
<< span="">template is="staffName" data="{{...staffB}}">
<< span="">/template>
<< span="">template is="staffName" data="{{...staffC}}">
<< span="">/template>
Page({
data:{
staffA:{
firstName:'Hulk',
lastName:'Hu'
},
staffB:{
firstName:'Shang',
lastName:'You'
},
staffC:{
firstName:'Gideon',
lastName:'Lin'
}
}
})
具体的能力以及使用方式在以下章节查看:
数据绑定、列表渲染、条件渲染、模板、引用