教程
各位战友,早上好。今天是第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(