1.5 微信小程序视图层

视频课程

微信小程序视图层

微信小程序框架的视图层用WXML 和WXSS 编写，由组件来进行展示。将逻辑层的数据在视图层中进行渲染，同时将视图层的事件发送给逻辑层。WXML（WeiXin Markup Language）用于描述页面的结构，WXSS（WeiXin Style Sheet）用于描述页面的样式，组件（Component）是视图的基本组成单元。

1.5.1 绑定数据

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

示例代码如下：

    index.wxml
    <view> {{ message }} </view>

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

1．组件属性绑定

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

    <view id="item-{{id}}"> </view>
    Page({
      data: {
        id: 0
      }
    })

2．控制属性绑定

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

    <view wx:if="{{condition}}"> </view>
    Page({
      data: {
        condition: true
      }
    })

3．关键字绑定

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

    <checkbox checked="{{false}}"> </checkbox>

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

4．运算

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

1 三元运算

    <view hidden="{{flag ? true : false}}"> Hidden </view>

2 数学运算

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

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

3 逻辑判断

    <view wx:if="{{length > 5}}"> </view>

4 字符串运算

    <view>{{"hello" + name}}</view>
    Page({
      data:{
        name: 'MINA'
      }
    })

5 数据路径运算

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

1.5.2 条件渲染

1．wx:if 判断单个组件

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

    <view wx:if="{{condition}}"> True </view>

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

    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>

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

wx:if 是一个控制属性，需要将它添加到一个标签上。如果想一次性判断多个组件标签，可以使用<block> </block> 标签将多个组件包起来，并在<block>中使用wx:if 控制属性，示例代码如下：

    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>

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

1.5.3 列表渲染

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

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

    <view wx:for="{{array}}">
      {{index}}: {{item.message}}
    </view>
    Page({
      data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
      }
    })

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

    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
      {{idx}}: {{itemName.message}}
    </view>

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

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

    <block wx:for="{{[1, 2, 3]}}">
      <view> {{index}}: </view>
      <view> {{item}} </view>
    </block>

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

如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如<input/> 中的输入内容，<switch/> 的选中状态），需要使用wx:key 来指定列表中项目的唯一标识符。

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

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

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

示例代码如下：

    <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block; "> {{item.id}} </switch>
    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'},
        ]
      }
    }

1.5.4 定义模板

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

1 定义模板

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

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>

2 使用模板

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

    <template is="msgItem" data="{{item}}"/>
    Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

is属性可以使用三元运算语法来动态决定具体需要渲染哪个模板，示例代码如下：

    <template name="odd">
      <view> odd </view>
    </template>
    <template name="even">
      <view> even </view>
    </template>

    <block wx:for="{{[1, 2, 3, 4, 5]}}">
        <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
    </block>

1.5.5 引用功能

WXML提供import引用和include引用两种文件引用方式。两者的区别在于：import引用模板文件，include引用整个文件（除了<template/>）。

1．import引用

import可以在当前文件中引用目标文件定义的模板。

假如在item.wxml 中定义一个叫item的模板，示例代码如下：

    <! -- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>

在index.wxml 中引用item.wxml，就可以使用item模板，示例代码如下：

    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>

2．include引用

include可以将目标文件（除了<template/>）的整个代码引入，相当于是复制到include位置，示例代码如下：

    <! -- index.wxml -->
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    <! -- header.wxml -->
    <view> header </view>
    <! -- footer.wxml -->
    <view> footer </view>