微信小程序的渲染层开发

微信小程序的渲染层由 WXML（WeiXin Markup Language）与 WXSS（WeiXinStyle Sheet）编写，并由组件来进行展示。将逻辑层的数据渲染成视图，同时将渲染层的事件发送给逻辑层。WXML 用于描述页面的结构，WXS（WeiXin Script）是微信小程序的一套脚本语言，结合 WXML 可以构建出页面的结构。WXSS是用于描述页面的样式。

一、微信框架组件

组件是微信小程序渲染层的基本组成单元。微信小程序 MINA 框架为开发者提供了一系列基础组件，例如图标（icon）、进度条（progress）、富文本（rich-text）、文本（text）、表单组件（button、checkbox、checkbox-group、form、input、label、picker、picker-view、radio、slider、switch、textarea）等。开发者可以通过组合这些基础组件，开发一些与微信风格类似的样式，从而可以大大节省UI 开发成本，也使得微信小程序风格一致。此外，微信小程序还提供了一些手机应用中常见的组件，如视图容器、基础组件、表单组件、导航与媒体组件、地图与画布组件、开放能力组件、原生组件等。

        一个组件通常由一个开始标签和一个结束标签组成，每个组件都包含用来修饰这个组件的属性。例如我们常用的视图容器组件 view：

二、视图容器

        视图容器组件是包裹其他组件的容器，主要用于界面的布局与展示。常用的组件内容包括 view 与 scroll-view、swiper 与 swiper-item、movable-area 与movable-view、cover-view 与 cover-image。

2.1 view 组件

        view 是最常用也是最简单的视图窗口组件，它相当于 HTML 页面的 div 标签，包含了以下 4 个基本属性。hover-class 属性，代表按住的样式类，用于设置是否启用点击效果和设置点击的效果。默认值是 none，代表没有点击态效果。hover-stop-propagation 属性，代表是否阻止本节点的祖先节点出现点击态，默认是不阻止的。hover-start-time 属性，代表按住后多久出现点击态，单位为毫秒（ms），默认为 50ms。hover-stay-time 属性，代表手指松开后点击态的保留时间，单位为 ms，默认为400ms。hover-class 属性不仅在 view 组件中会用到，在 button、navigator 等组件中也可以看到这个属性的身影。如果 view 没有 hover 属性，则代表hover="false"。通过指定 hover-class，我们可以轻松指定按住的样式类。

 

 

        hover-stop-propagation 用于指定是否阻止本节点的祖先节点出现点击态，这与事件冒泡有关。如果 view 没有指定 hover-stop-propagation 属性，则说明不阻止本节点的祖先节点出现点击态。事件冒泡是说当一个元素上的事件被触发时，同样的事件将会在该元素的所有祖先元素中被触发。而从事件的表现形式来讲，这个事件从原始元素开始一直冒泡到 DOM 树的最上层。

        hover-start-time 和 hover-stay-time 与点击效果的展示延时有关，分别设置按住后多久出现点击态和手指松开后点击态的保留时间，单位都是毫秒。如果view 没有 hover-start-time 和 hover-stay-time 属性，延迟时间默认为50ms，持续时间默认为 400ms。

2.2 scroll-view 组件

        scroll-view 又称为可滚动视图区域。如果内部组件的高度或宽度超过了 scroll-view，那么就会通过展示水平、垂直滚动条来显示内部组件。

        scroll-x 属性。如果要允许可视区域横向滚动，就可以设置属性 scroll-x="true"。它的默认值是 false，也就是默认不允许横向滚动。

        scroll-y 属性和 scroll-x 类似，如果要允许可视区域纵向滚动，可以设置属性 scroll-y="true"。它的默认值也是 false，也就是默认不允许纵向滚动。

        upper-threshold 属性与 lower-threshold 属性。它们分别控制距边缘多远时，触发 scrolltoupper 事件和 scrolltolower 事件。当页面是纵向滚动时，控制距离顶部和底部的距离；当页面是横向滚动时，控制距离左边和右边的距离。scroll-top 属性与 scroll-left 属性。分别用来设置竖向滚动条和横向滚动条的位置。以竖向滚动条为例，对于垂直方向来说，一般它的滚动条是在最上方的（也就是 scroll-top 为 0），我们可以通过设置 scroll-top 属性的值来改变页面的滚动条的高度位置，从而让滚动条不出现在容器视图的最顶部。

        scroll-into-view 属性。在实际开发中，如果我们需要滚动容器在最开始就滑动到页面的某个位置，就可以使用这个属性。该属性要求我们先指定一个子元素的 ID（注意：这里的 ID 不能以数字开头），从而使得容器一开始就滚动到该元素的位置。

        enable-back-to-top 属性。在大部分原生应用中，我们可以通过 iOS 点击顶部状态栏或者通过 Android 双击标题栏时快速返回顶部。借助这个属性，我们就可以在小程序中实现这个操作。这个属性默认是关闭的，也就是 false，我们可以设置为 true 来开启。当然，这个属性只支持竖向滚动。

        bindscrolltoupper 属性、bindscrolltolower 属性和 bindscroll 属性。这 3个属性可以用来绑定事件，分别对应滚动到顶部/左边时、滚动到底部/右边时和滚动就触发。对于前两个属性，
可以通过配合属性 upper-threshold 和 lower-threshold 来控制到底距离边缘多少像素才算是到达边缘。

        组件属性的长度单位默认为 px，从基础库 2.4.0 起支持传入单位（rpx/px）。这样 scroll-view 就可以用来展示大量的内容，并且可以通过滚动查看所有的内容。示例代码如下：

        横向滚动稍微麻烦一些，首先还是需要设置滚动方向为 scroll-x="true"，然后给 <scroll-view></scroll-view> 设置 white-space 为 nowrap 不换行，最后需要将容器中包裹的标签的 display 属性设置为 inline-block。示例代码如下： 

2.3 swiper 组件与 swiper-item 组件

        swiper 组件又称为滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为（放其他组件会被自动删除）。内置的 swiper-item 组件宽高会被自动设置为 100%，它是微信小程序中用于轮播功能的组件，类似于 Web 开发中常用的第三方组件 swiper.js。开发者只需通过简单的配置参数，就能完成一个幻灯片滑动需求。示例如下：

        其中 indicator-dots 属性用于控制是否显示面板指示点，autoplay 属性用于控制组件是否需要自动切换页面，interval 属性用来指示自动切换时的时间间隔，duration 属性用来控制滑动动画的时长，最后的 current 属性指示当前轮播模块所在的滑块索引。通过简单的配置即可实现一个轮播组件的效果。开发者如果需要关注轮播组件的事件，小程序也提供了事件的回调函数属性 bindchange、bindtransition 和 bindanimationfinish，分别用于监听页面发生轮播、swiper-item 的位置发生改变和动画结束时间。

2.4 图标组件

        icon 又称图标组件。组件属性的长度单位默认为 px，自版本 2.4.0 起支持传入单位（rpx/px）。图标组件包含了微信官方提供的一系列可以直接使用的图标库，开发者可以先用 type 指定要使用的 icon 类型，然后按照需求去修改对应的大小（size）和颜色（color）即可。

2.5 进度条组件

        progress 又称进度条组件。组件属性的长度单位默认为 px，自版本 2.4.0 起支持传入单位（rpx/px）。进度条组件可以用来展示加载的进度，例如在进行大文件下载展示时就可以使用进度条组件展示当前的进度（其中最重要的是 percent 属性，它标识了当前进度条所在的百分比位置；其余属性主要用来对进度条的细节进行调整，用于适配当前小程序的整体风格。）。

2.6 富文本组件

        rich-text 又称富文本。富文本组件用于在小程序中直接展示富文本内容。例如对于小程序的公告系统，在管理端配置时为了方便运营人员，我们会使用如 UEditor等所见即所得的富文本编辑器编辑。但是如果后端不返回富文本，前端在小程序中处理是比较麻烦的，需要做描述语言的语法定义。小程序在实现 rich-text 功能前是无法识别富文本的，只能依赖第三方库解决。在有了 rich-text 组件后，小程序开始支持富文本解析。因此我们可以直接将 HTML 内容传入属性 nodes，即可按照需求进行展示了。

2.7 文本组件

        text 文本组件也是小程序中常用的组件之一。组件内只支持嵌套。text 组件包含以下 3 个属性。
(1)selectable 属性，代表文本是否可选。text 组件是唯一可以长按选中/复制的文本，但是该功能要求微信小程序的文本必须满足文本在标签内并且标签要有selectable 属性。

(2)space 属性，代表是否显示连续空格。需要注意的是，各个操作系统的空格标准并不一致。

(3)decode 属性，代表是否解码，可以解析的有 <>&&apos;。

2.8 button 组件

        button 组件是小程序开发中最常用的表单组件。它代表一个操作单元。

2.9 checkbox 组件与 checkbox-group 组件

        checkbox-group 是多项选择器组件，内部由多个 checkbox 组成。checkbox 为多选组件，可以用来实现复选框的功能。开发者通过定义一个 checkbox-group组件并包裹多个 checkbox 标签，可以实现复选功能。示例如下：

3.0 form 组件

        form 组件又称表单组件，主要用来提交组件内的用户输入的 switch、input、checkbox、slider、radio、picker 等组件内容。当点击表单中 form-type 为submit 的组件时，系统会将表单组件中的 value 值进行提交。需要注意的是，表单组件需要在待提交的子表单组件中加上 name 属性，作为 key 才能进行提交，否则会自动忽略这个组件内容。

三、WXML 标签语言

        WXML 是用来编写页面结构的标签语言。

3.1 数据绑定

        其数据绑定使用 Mustache 语法（双大括号）将变量包起来。一般来说，我们可以绑定内容和组件属性（class 类等），还可以把数据绑定用在控制语句中。

        需要注意，控制变量要放在双引号内。否则，会导致变量不生效。

3.2 数据绑定

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

        如果列表中项目的位置会动态改变，或者有新的项目添加到列表中，并且希望列表中的项目保持其特征和状态（如 input 中的输入内容、switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一标识符。wx:key 的值有两种形式。一种是使用字符串，代表在 for 循环的 array 中 item的某个 property，该 property 的值必须是列表中唯一的字符串或数字，且不能动态改变。另一种是使用保留关键字 *this，代表在 for 循环中的 item 本身，item必须是唯一的字符串或数字。当数据改变触发渲染层重新渲染的时候，会校正带有key 的组件，框架会确保它们重新排序，而不是重新创建，以确保组件保持自身的状态，并提高列表渲染时的效率。如果不提供 wx:key，就会报一个 warning。如果明确知道该列表是静态的，或者不关注其顺序，则可以选择忽略。

3.3 条件渲染

        wx:if 条件渲染这个关键词，在框架中，你可以使用 wx:if 来判断是否需要渲染该代码块，也可以用 wx:elif和 wx:else 来添加一个 else 块。

        和所有前端模板语言类似，wx:if 与 hidden 有着不小的区别。wx:if 中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，它会确保条件块在切换时销毁或重新渲染。同时，wx:if 也是惰性的，如果初始渲染条件为 false，框架就什么也不做，而是在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单得多，组件始终会被渲染，只是简单地控制显示与隐藏。一般来说，wx:if 会有更高的切换消耗，而 hidden 会有更高的初始渲染消耗。因此，在需要频繁切换的情景下，使用 hidden 会更好；如果在运行时条件不大可能改变，则使用 wx:if 较好。

3.4 模板

        WXML 提供了模板（template），我们可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性作为模板的名字，使用 is 属性声明需要使用的模板，然后将模板所需要的 data 传入。

3.5 事件

        事件是渲染层到逻辑层的通信方式，可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当触发事件时，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id、dataset、touches。

        事件分为冒泡事件和非冒泡事件。

(1)冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

(2)非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

 

四、WXSS 样式语言

        WXSS（WeiXin style sheets）是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 的大部分特性，同时为了更适合开发微信小程序，WXSS 对 CSS进行了扩充和修改，扩展的特性有：尺寸单位和样式导入。

4.1 尺寸单位

        微信小程序的尺寸单位是 rpx（responsive pixel），你可以根据屏幕宽度进行自适应。小程序规定了屏幕宽为 750rpx，根据设备屏幕实际宽度的不同，其 1rpx 所代表的实际像素值也是不一样的。例如在设备 iPhone 6 上，屏幕的实际宽度为375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx =0.5px = 1 物理像素。

4.2 样式导入

        CSS 最被人诟病的恐怕就是它薄弱的计算能力了，因此后面会产生 less、sass 等语言。不过，小程序吸收了 CSS 的一些精华，我们可以使用 @import 语句导入外联样式表。@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

4.3 渲染层布局

        任何客户端技术的基础都是 UI 布局。在过往 Web 页面的开发中，我们最熟悉的布局方式其实是 CSS 的布局方式，小程序的布局与 Web 页面的 CSS布局方案十分类似。一般来说，布局包含 3 个最基础的概念：浮动、定位以及外边距操纵。

        盒子模型盒子模型是 Web 布局的基础，它假定每个元素都会生成一个或多个矩形框，我们称为“元素框”。每个元素框中心都有一个内容区（contentarea），内容区周围有内边距（padding）、边框（border）和外边距（margin），它们的含义如下。外边距：边框外的区域，是透明的，可以是负值。边框：围绕在内边距和内容外的部分。内边距：填充属性，内容周围的区域，是透明的，不能是负值。内容：盒子的实际内容，用于展示页面组件。我们可以用多种属性设置外边距、边框和内边距。

 

        在盒子模型中，元素按显示方式主要分为块级元素和行内元素。元素的显示方式是由 display 属性控制的，通过 margin 和 padding 这两个属性来确定盒子的位置，而常用的 top、bottom、left、right 等距离属性在盒子模型中是失效的。

        在布局与显示方式（display）中，块级元素块级元素总是在新行上开始，新的块级元素被添加时会自动换行显示，默认占用一行的高度。因此，一般来说，一行内只会有一个块级元素（除非使用了浮动）。一个块级元素的元素框与其父元素的宽度相同（所以在小程序中，如果不设置宽，则默认为屏幕宽度），块级元素的width+marginLeft+marginRight+paddingLeft+paddingRight 刚好等于父级元素的内容区宽度，显示时默认撑满父元素内容区。在盒子模型中，一个块级元素可以容纳行内元素和其他块级元素，而块级元素高度由其子元素决定，父级元素高度会随内容元素变化而变化。

        在小程序中，一些元素默认是块级元素，如 <view/>、<scroll-view/>、<textarea/> 组件，而一些则默认是行内元素，我们可以通过修改元素 display属性为 block，将一个元素强制设置为块级元素；可以通过设置 display 属性为 inline，将一个元素强制设置为行内元素。

 

--------------------------------------

本篇文章同步发表在博主微信公众号：