视图层
- MINA的视图层由WXML与WXSS编写。
- 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
- WXML(WeiXin Markup language)用于描述页面的结构。
- WXSS(WeiXin Style Sheet)用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML
数据绑定
- WXML中的动态数据均来自对应Page的data。
- 数据绑定使用”Mustache”语法(双大括号)将变量包起来
- 支持运算
- 算数运算
- 三元运算
- 逻辑运算
- 字符串运算
- 数据路径运算
- 组合
- 数组
<view wx:for-items="{
{[zero, 1, 2, 3, 4]}}"> {
{item}} </view>
- 对象
<template is="objectCombine" data="{
{for: a, bar: b}}"></template>
- …拓展运算符:将一个对象展开,复制到一个新的对象
<template is="objectCombine" data="{
{...obj1, ...obj2, e: 5}}"></template>
<view> {
{message}} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
- 在组件上使用
wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
- 使用
wx:for-item
可以指定数组当前元素的变量名
- 使用
wx:for-index
可以指定数组当前下标的变量名
- 可以嵌套
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如<input/>
中的输入内容,<switch/>
的选中状态),需要使用wx:key
来指定列表中项目的唯一的标识符。
<view wx:for-items="{
{array}}"> {
{item}