小白的小程序开发之路（二）-事件

上一篇文章实现了第一个Hello World小程序，但这个小程序只实现了最简单的显示功能。在实践中，我们经常需要小程序来响应各种事件（如点击），以实现更丰富的交互功能。本文主要介绍一些简单响应事件在小程序中的实现。

1.什么是事件？微信公开文档中事件的定义如下：

·事件是从视图层到逻辑层的通信模式。

·事件可以将用户的行为反馈给逻辑层进行处理。

·事件可以绑定到组件。当到达触发事件时，将执行逻辑层中相应的事件处理功能。

·事件对象可以携带其他信息，如id、数据集和触摸。

从上面的定义可以看出，要实现事件，我们需要完成以下两个步骤：将事件绑定到组件和编写事件处理函数（回调函数）。

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

气泡事件：当组件上的事件被触发时，该事件将传递给父节点。

非气泡事件：当组件上的事件被触发时，该事件不会传递给父节点。

2.绑定事件有两种方法：bind和catch。不同的是，后者将防止事件向上冒泡，也就是说，它将不再传递给父节点。

以点击事件为例，我们将介绍如何绑定常见事件。

首先，我们需要选择触发事件的组件。这里，我们将使用最后一个小程序显示的行“Hello World”作为绑定单击事件的组件，并修改索引。wxml文件，如下所示。

索引.wxml

其中，catchtap和class是文本元素Hello World的两个属性，它们的值分别为“click”和“{{color}}”。与HTML类似，WXML的属性设置也采用键值的形式。

注意：值的值必须用双引号括起来。

Catchtap由catch和tap组成。Catch表示防止事件冒泡，tap表示触发条件为“触摸后立即离开”。具体气泡事件列表如下。

气泡事件列表

这里，此点击事件的值设置为“点击”。当用户单击Hello World时，将调用页面中的单击。

类表示为wxml元素定义一个或多个类名（类名从样式文件中引入）。这里我们将其设置为索引J。｛｛｝｝符号通常表示可以在内部执行操作，并表示这是一个数据绑定。在这一点上，这个。data Color必须是一个字符串，指定事件处理函数的名称；如果是空字符串，则绑定将无效（您可以使用此功能暂时禁用某些事件）。该变量将在下面定义。

3.上述事件处理功能。我们将click事件的属性值设置为“click”，因此需要为index.js中的变量click指定一个事件处理函数。此事件处理函数可以编写如下：

索引.js

我们重点介绍添加的click:fucntion（）函数，它是click事件的处理程序。当您单击Hello World时，控制台将显示诸如“单击”之类的单词，并伴随着功能中写入的颜色更改操作。

如何实现颜色变化操作？首先，我们可以从上图中看到，我们在索引中。js中设置了两个全局变量，即flag和color。标志用于记录单击状态，颜色用于指示颜色状态。这里，颜色在不同的条件下被分配了两个不同的值——“window”和“window change_color”。]

正如我们在上一篇文章中提到的，wxss文件用于表示小程序中内容的显示样式。因此，我们应该在索引中定义颜色。wxss文件Class是一个选择器。例如窗口意味着选择窗口类的所有对象，并将其颜色属性设置为#c32f20。

索引.wxss

回到index在js文件中，在Page的数据部分，我们应用了一个属性值为“window”的颜色变量，即index wxss中的样式名。setData函数用于将数据从逻辑层发送到视图层，并更改相应的this data。通过这种方式，我们可以修改文本颜色。