小程序编程第17课

教程

各位战友，早上好。今天是第17课了，这节课是最后一个概念课，下节课就要开始做一个真实的项目了

这节课我们要讲的概念是：事件

什么是事件？

顾名思义，事件就是发生了某事

比如小明家着火了🔥，这就是个事件
疫情爆发了，这也是个事件
有人给你打电话，这也是个事件

在小程序里有很多种事件，比如用户点击了某个按钮，这就产生了一个事件。用户滑动了屏幕，这也是个事件。用户长按了某个区域，这也是个事件。用户正在输入东西，也是个事件。总而言之有很多种事件，最常用的是点击事件。

我们为什么需要事件？

我们需要用事件来和用户交互，比如小明家着火了，这个事件发生了，小明肯定是要采取某种行动的，比如立刻赶回家。

同样用户点击了某个按钮，产生了一个事件。你需要根据这个事件做点什么。然后再反馈给用户。

之前我们做过很多个计算的小程序，都是当用户点击的时候，我们就开始计算。

这就是事件的作用，事件就好像是一个导火索，点燃了这个导火索，然后就触发了对应的炸药桶。

炸药桶就是我们平时用来处理这些事件的函数。

现在我们打开开发者工具，新建一个项目，我们来试试各种事件。

打开index.wxml文件

我们在第12行后面增加一个按钮，然后绑定一个事件，再给这个事件传递一个处理函数

<button bindtap="handleTap">点我呀，我是按钮</button>

现在我们来看看这行代码，bindtap的意思是什么？bind的意思是绑定，tap在英文里面的意思：轻拍，那我们可以理解为：绑定点击

那handleTap又是什么意思呢？这个名字是我自己随便取的，你可以取其它的名字。这就是我们刚刚说的炸药桶。也就是事件处理函数。

bindtap="handleTap"

这句话的意思连起来就是，当点击事件发生时，执行handleTap函数

再把button结合起来理解

<button bindtap="handleTap">点我呀，我是按钮</button>

这行代码的意思是：当用户点击「点我呀，我是按钮」这个按钮时，就会执行handleTap函数

那现在的问题是，我们的handleTap函数并没有，所它能执行吗？

我们保存一下 ，试试看。

我们点击按钮，console面板出现了一行黄色的警告⚠️

VM38:1 Component “pages/index/index” does not have a method “handleTap” to handle event “tap”.

这行英文的意思是啥？

它说我们的组件index里面不存在handleTap这个方法来处理点击事件

也就是说，导火索已经点燃了，但是炸药桶没有找到

现在我们就要定义一个炸药桶，也就是定义这个处理函数

那它应该定义到哪呢？

之前我们定义过，要把它定义到index.js文件里面

打开index.js文件，这个文件里面的Page已经讲解过了。它就是一个函数而已。

我们调用这个函数，且给它传递了一个对象。这个对象东西有点多，有几十行代码。

我们的事件处理函数改定义到哪呢？

就是定义到这个参数对象里。实际上我们就是给这个函数增加属性而已。

在53行后面增加如下代码

 handleTap: function(){
   
    
 }

因为我们是增加属性，每对属性之间要用英文逗号分隔，所以我们要记得在53行后面增加一个逗号。

你可能还有疑问，为什么就一定要定义在这个参数对象的属性上呢？定义在其它位置行不行？

不行🚫，因为这是小程序规定的写法而已，所以我们遵照这个写法就可以了

当然这个属性的位置是可以变换的，比如你可以把这个函数定义到这个参数对象属性的第一行，也就是在第6行后面加上如下代码

 handleTap: function(){
   
    
 },

注意哦，这里有个逗号，因为要分隔每对属性。这个位置是不会影响结果的，因为在对象中只根据属性名称来找到属性值，不是根据位置来找的。

那现在我们定义好了一个处理函数。这个函数里面什么都没有做。我们保存一下，试试看。

我们点击了按钮，但是什么也没有发生，也没有弹出任何警告⚠️和错误❌

我们的handleTap函数有没有被执行呢？

执行了，只是因为函数里面什么东西都没有，执行完了也没有任何可以观察的东西。

为了让我们能够观察到它真的执行了，那我们可以加点料

比如打印一行字符串到console面板

handleTap: function(