微信小程序学习系列(6) 微信小程序视图层

前言

上一小结我们认识了，微信小程序的逻辑层。知道了两大实例。分别是App()实例用于注册一个小程序，Page()实例用于注册一个页面。

那接下来我们来认识一下什么事微信小程序的视图层。

微信小程序视图层

微信小程序的视图层是用.wxss和.wxml编写的，由组件进行展示。将逻辑层的数据在视图层中进行渲染，同时将视图层的事件发送给逻辑层。

其中wxml用于描述页面的构建，wxss用于描述页面的样式，组件是视图的基本组成单位。

绑定数据

微信小程序的视图层对数据绑定是通过双大括号{{}}将变量包裹起来的，最后在wxml页面中将数据值显示出来的。示例代码如下:

在index.wxml中

<view>{{Message}}</view>

在index.js中

Page({
    data:{
        message:"Hello World"
    }
});

组件属性绑定

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

在index.wxml中

<view id="item-{{id}}"></view>

在index.js中

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

控制属性绑定

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

在index.wxml中

<view wx:if="{{contition}}"></view>

在index.js中

Page({
    data:{
        contition:true
    }
});

关键字绑定

关键字绑定常用于组件一些关键字的绑定。示例代码如下:

在index.wxml中

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

注意：不要直接写成checked="false",否则其计算结果是一串字符串。

运算

可以在视图层内进行简单的运算，主要支持以下几种的运算。

三元运算

示例代码如下：

<view hidden={{flag?true:false}}>隐藏</view>

数学运算

示例代码如下：

<view>{{a+b}}+{{c}}</view>

逻辑判断

示例代码如下：

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

字符串运算

示例代码如下：

<view>{{"hellow"+name}}</view>

Page({
    data:{
        name:"DaLin"
    }
});

数据路径运算

示例代码如下：

<view>{{object.key}}{{array[0]}}</view>

Page({
    data:{
        object:{key:'Hellow'},
        array:["DaLin"]
    }
});

条件渲染

wx:if 单个组件

在微信小程序里，使用wx:if来判断是否需要渲染该模块。类似于if else 判断语句。示例代码如下：

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

多条件判断渲染语句。示例代码如下：

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

block wx:if 判断多个组件

当需要判断多个组件是否渲染时，可以使用 block wx:if进行多组件渲染。示例代码如下：

<block wx:if="{{true}}">
    <view>1</view>
    <view>2</view>
</block>

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

列表渲染

wx:for 列表渲染单个组件

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

其中,数组默认下标的标量是index,数组当前项的变量名为item。示例代码如下:

<view wx:for="{{array}}">
{{index}}:{{item.name}}
</view>

Page({
    data:{
        array:[{name:'李明'},{name:'张磊'}]
    }
});

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

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

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

渲染一个包括多个节点的结构块，可以在<block>标签上应用wx:for实现。示例代码如下：

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

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

如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特性和状态，需要使用wx:key来制定列表中的唯一标识符。

其中wx:key的值有两种方式表示。

方式1：字符串：代表在for循环的array中的item的某个属性，该属性的值需要列表中的唯一的字符串或数字，并且不能动态改变。
方式2：保留关键字：*this 代表在for循环中的item本身，这就需要item本身是唯一的字符串或数字。当数据改变触发渲染层重新渲染的时候，
会校正带有关键字的组件，框架会确保它们被重新的排序。而不是重新创建，确保组件自身的状态，并提高渲染时的效率。示例代码如下：

<switch wx:for="{{array}}" wx:key="unique">{{item.id}}</switch>

Page({
    data:{
        array:[
            {id:1,unique:'unique1'},
            {id:2,unique:'unique2'},
            {id:3,unique:'unique3'},
        ]
    }
});

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

定义模板

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

定义模板

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

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

使用模板

在wxml使用is属性声明需要使用该模板，然后将模板需要的data传入即可。示例代码如下：

<template is="msgItem" data="{{item}}"></template>

Page({
    data:{
        item:{index:0,msg:'这是一个模板',time:'2020-03-02'}
    }
});

is属性还可以使用三目运算符来动态渲染需要显示的组件。示例如下：

<template name="odd">
    <view>奇数</view>
</template>
<template name="even">
    <view>偶数</view>
</template>

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

引用功能

wxml提供import引用和include引用这两种方式。两者的区别在于前者是引用模板文件，后者是引用这个文件的(除了<template/>)。

impotrt 引用

可以在当前文件中引用目标文件定义的模板。示例代码如下：

在item.wxml声明一个模板

<template name="itme">
    <text>{{text}}</text>
</template>

在index.wxml使用定义的模板。

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

include 引用

include可以将整个目标文件整个代码导入<template/>除外。相当于是复制到include的位置上。示例代码如下：

在index.wxml页面

<include scr="header.wxml"></include>
<view>body</view>
<include scr="footer.wxml"></include>

在header.wxml页面

<view>header</view>

在footer.wxml页面

<view>footer</view>