小程序框架的视图层由WXML(WeiXin Markup Language,微信标记语言)与WXSS(WeiXin Style Sheet,微信样式表)编写,由组件来进行展示。视图层负责将逻辑层的数据显示在页面上,同时将视图层的事件发送给逻辑层。WXML用来描述页面的结构,WXSS用于描述页面的样式,组件是视图的基本组成单元。这三者的关系可以类比为HTML,CSS与HTML里面各种标签的关系。除了这三者之外,还有一套用于小程序的脚本语言——WXS(WeiXin Script)。WXS和WXML结合起来,可以构建出页面结构。
一、WXML
1、数据绑定
(1)简单绑定
数据绑定的基本原则:
1)在 data 中定义页面的数据:在页面对应的 .js 文件中,把数据定义到 data 对象中即可。
Page({
data:{
//字符串类型的数据
info: 'init data ' ,
//数组类型的数据
msgList: [{msg: 'hello'},{msg: "world '}]
}
})
2)在 WXML 中使用数据:把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为:
<view>{
{要绑定的数据名称}}</view>
Mustache 语法的主要应用场景如下:
①内容。直接在页面上显示数据内容。
②组件属性。用后端变量来设置前端部分组件的属性,注意由双大括号括起来的变量需要在属性的双引号内。
③控制属性。用后端变量来控制前端组件的显示效果,注意由双大括号括起来的变量需要在属性的双引号内。
④关键字。主要用于逻辑判断。
(2)运算
①三元运算。可以在双大括号内进行三元运算。
.js中:
Page({
data: {
randomNum:Math.random()*10
}
})
.wxml中:
<view>{
{randomNum>=5?'数字大于等于5':'数字小于5'}}</view>
②算术运算。在双大括号内,可以进行基本的算术运算,会直接显示运算后的结果。
③逻辑判断。在双大括号内,可以进行逻辑运算,返回boolean类型的true或false,可以用于某些属性的控制。
④字符串运算。在双大括号内,可以做字符串的拼接运算。
⑤数据路径运算。对于数组和JSON对象类型的数据,在双大括号内可以通过索引的方式取其值。
(3)组合
①数组
②对象
2.列表渲染
(1)wx:for
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
.js中:
Page({
data: {
array:['a','b','c']
}
})
.wxml中:
<view wx:for="{
{array}}">
索引是:{
{index}},当前项是:{
{item}}
</view>
效果如图:
默认情况下,当前循环项的索引用 index 表示;当前循环项用 item 表示。
(2)手动指定索引和当前项的变量名*
- 使用 wx:for-index 可以指定当前循环项的索引的变量名
- 使用 wx:for-item 可以指定当前项的变量名
.wxml中:
<view wx:for="{
{array}}" wx:for-index="idx" wx:for-item="itemName">
索引是:{
{idx}},当前项是:{
{itemName}}
</view>
效果如图:
(3)wx:key
类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下:
.js中:
Page({
data: {
userList:[
{id:1,name:'冠军'},
{id:2,name:'亚军'},
{id:3,name:'季军'}
]
}
})
.wxml中:
<view wx:for="{
{userList}}" wx:key="id">{
{item.name}}</view>
效果如图: