微信小程序视图层介绍：组件属性、控制及关键字绑定数据方法

<线上配资平台>微信小程序视图层介绍：组件属性、控制及关键字绑定数据方法

1.5 微信小程序视图层

视频课程

微信小程序视图层

微信小程序框架的视图层用WXML 和WXSS 编写微信小程序视图层介绍：组件属性、控制及关键字绑定数据方法，由组件来进行展示。将逻辑层的数据在视图层中进行渲染，同时将视图层的事件发送给逻辑层。WXML（ ）用于描述页面的结构，WXSS（ Style Sheet）用于描述页面的样式，组件（）是视图的基本组成单元。

1.5.1 绑定数据

WXML页面中的动态数据都是来自．js文件Page下的data。数据绑定就是通过双大括号（{{}}）将变量包起来，在WXML页面中将数据值显示出来。

示例代码如下：

    index.wxml
     {{ message }} 
    index..js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

1．组件属性绑定

组件属性绑定是将data中的数据绑定到微信小程序的组件上，示例代码如下：

     
    Page({
      data: {
        id: 0
      }
    })

2．控制属性绑定

控制属性绑定是用来进行if语句条件判断，如果满足条件，则执行，否则不执行，示例代码如下：

     
    Page({
      data: {
        condition: true
      }
    })

3．关键字绑定

关键字绑定常用于组件的一些关键字。像复选框组件，关键字如果等于true，则代表复选框选中，false代表不选中复选框，示例代码如下：

不要直接写成="false"，否则其计算结果是一个字符串，转成 类型后代表真值。

4．运算

在{{}} 内可以进行简单的运算，主要支持以下几种方式的运算。

1 三元运算

2 数学运算

     {{a + b}} + {{c}} + d 
    Page({
      data: {
        a: 1,
        b: 2,
        c: 3
      }
    })

view中的显示内容为3+3+d。

3 逻辑判断

4 字符串运算

    {{"hello" + name}}
    Page({
      data:{
        name: 'MINA'
      }
    })

5 数据路径运算

    {{object.key}} {{array[0]}}
    Page({
      data: {
        object: {
          key: 'Hello'
        },
        array: ['MINA']
      }
    })

1.5.2 条件渲染

1．wx:if 判断单个组件

在微信小程序框架中，使用wx:if=”{{}}”来判断是否需要渲染该代码块，示例代码如下：

     True 

使用wx:elif 和wx:else 来添加一个else 块，示例代码如下：

     1 
     2 
     3 

2．block wx:if 判断多个组件

wx:if 是一个控制属性，需要将它添加到一个标签上。如果想一次性判断多个组件标签，可以使用 标签将多个组件包起来，并在中使用wx:if 控制属性微信小程序视图层介绍：组件属性、控制及关键字绑定数据方法，示例代码如下：

    
       view1 
       view2 
    

并不是一个组件，其仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

1.5.3 列表渲染

1．wx:for 列表渲染单个组件

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组当前项的下标变量名为index，数组当前项的变量名为item，示例代码如下：

    
      {{index}}: {{item.message}}
    
    Page({
      data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
      }
    })

使用wx:for-item 可以指定数组当前元素的变量名，使用wx:for-index 可以指定数组当前项下标的变量名，示例代码如下：

    
      {{idx}}: {{itemName.message}}
    

2．block wx:for 列表渲染多个组件

如果想渲染一个包含多节点的结构块，这时wx:for需要应用在标签上，示例代码如下：

    
       {{index}}: 
       {{item}} 
    

3．wx:key 指定唯一标识符

如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容微信小程序组件传值，的选中状态）微信小程序视图层介绍：组件属性、控制及关键字绑定数据方法，需要使用wx:key 来指定列表中项目的唯一标识符。

wx:key 的值可以两种形式表示。

1 字符串：代表在for循环的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变。

2 保留关键字：*this 代表在for循环中的item本身，这种表示需要item本身是唯一的字符串或数字。当数据改变触发渲染层重新渲染的时候，会校正带有关键字的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态微信小程序组件传值，并且提高列表渲染时的效率。

示例代码如下：

     {{item.id}} 
    Page({
      data: {
        objectArray: [
          {id: 5, unique: 'unique_5'},
          {id: 4, unique: 'unique_4'},
          {id: 3, unique: 'unique_3'},
          {id: 2, unique: 'unique_2'},
          {id: 1, unique: 'unique_1'},
          {id: 0, unique: 'unique_0'},
        ]
      }
    }

注意：若不提供wx:key，会提示警告。如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

1.5.4 定义模板

WXML提供模板（）功能，允许将一些共用的、复用的代码在模板中定义成代码片段，然后在不同的地方调用，以达到一次编写，多次直接使用的效果。

1 定义模板

在内定义代码片段，使用name属性指定模板的名称，示例代码如下：

2 使用模板

在WXML文件中，使用is属性声明需要使用的模板微信小程序组件传值，然后将模板所需要的data传入，示例代码如下：