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