微信小程序学习系列(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>
