小程序的视图层，分为WXML、WXSS和基础组件

正文 | 恶狼

小程序的视图层分为WXML、WXSS和基本组件。今天，我们将详细解析 WXML 和 WXSS。

WXML

WXML（WeiXin Markup Language）是一种为applet MINA 框架设计的语言。它结合了基本组件和事件系统来构建页面的结构。

通俗地说，WXML 有点类似于 HTML，相当于一个最终的整理设计师。它可以告诉你这个地方有一张图片，然后图片的地址是什么；然后它可以告诉你这里有一个按钮，以及这个按钮控制什么的开关。

说了这么多，我也觉得做小程序就像盖房子一样。有人负责为房子打开各种通道（JavaScript），有人负责指定房子的布局（JSON，WXSS），还有人负责连接各个地方的线路。人（WXML）。

所有事物都有其相似之处。

WXML 具有以下功能：

1. 数据绑定

这意味着在视图上指定一个动态变量并在 JavaScript 脚本中定义它。本例中，数据源为js文件中的motto变量，样式为user-motto。

同时，在对应的js文件中小程序展示文章，定义了一个变量motto。

最后，在WXSS中，为它写一个样式，动态数据就可以显示在视图上。

当网页设计师看到这个时，他们可能会感到似曾相识。是的，微信小程序中的WXSS文件和CSS很像；而小程序的开发语言就是HTML+CSS+Javascript。

2. 列表渲染

首先在对应的 JavaScript 中，定义一个列表变量，然后在 WXML 中，我们可以使用 wx:for 来引用它。

由于无法在原始数据中定义数组变量，因此我定义了一个新数据并将座右铭放入其中。

我们先定义一个列表变量：

然后在 WXML 中，将视图连接到相应的列表变量：

使用这些，我们可以制作一个九九乘法表。

3. 条件渲染

在小程序中小程序展示文章，我们可以使用 wx:if 来设置渲染判断条件。如果匹配，则渲染部分内容。使用此函数的方式与使用 if 函数打印其他语言的内容相同。

首先在WXML中定义if判断条件（视图变量在JS中定义）：

然后，在相应的脚本代码中，定义一些你需要的变量：

之后，视图层将根据条件选择要渲染的部分。

4. 模板

在 WXML 中，模板意味着引用相同或相似的部分。需要在 WXML 中定义和使用模板，引用 JS 数据，然后显示给用户。

5. 事件

事件是视图层到逻辑层的通信方式，可以将用户的行为反馈给逻辑层进行处理。

事件可以绑定到组件上，当触发事件到达时，会执行逻辑层对应的事件处理函数。事件对象可以携带额外的信息，例如 id、dataset、touches。

在 WXML 中创建事件作为使用其他编程语言中的函数的过程。原文是一个视图，我觉得这种输入还是用按钮比较好。

首先，在 WXML 中定义需要触发事件的元素：

在JS脚本文件中写一个方法（函数），绑定其中一个数据：

6. 引用

WXML 提供了两种文件引用方法，导入和包含。

import 可以在这个文件中使用目标文件中定义的模板。

例如，我们可以在 item.wxml 中定义一个名为 item 的模板，并在 index.wxml 中引用 item.wxml，那么我们就可以使用 index.wxml 中的 item 模板了。