程序基础实战 6

bindtapcatchtapnavigateToswitchTab第5章事件及页面路由课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》学习目标第5章事件及页面路由本章介绍事件、页面路由的相关内容。1熟练掌握事件的相关知识2熟练掌握页面路由3熟练掌握页面之间传递数据的方法25.1

事件第5章事件及页面路由事件是视图层与逻辑层的通信方式，事件可以将用户的行为反馈到逻辑层进行处理。事件通常绑定在组件上，当达到事件触发条件时，就会执行逻辑层中对应的事件处理函数。事件对象（EventObject）是在触发事件时自动创建的一个传递给事件处理函数的特殊对象。在微信小程序中，当用户进行单击、滑动等操作触发了组件事件时，框架会把一个事件对象（通常名为event）传入绑定的处理函数，以便获取上下文并执行逻辑。该对象封装了与事件相关的各类信息，是实现交互式响应的核心载体。它封装了与当前事件相关的详细信息，并可以携带许多额外的、有用的信息，以帮助开发者更精准地处理用户交互。35.1

事件（续）第5章事件及页面路由常见的携带信息如下。id：获取该元素的唯一标识符，如event.target.id。dataset：组件中以data-开头的自定义数据，在事件对象中以驼峰形式提供，如event.currentTarget.dataset.xxx。例如，data-id="123"可通过event.target.dataset.id获取，结果为"123"。detail：自定义或组件派发的额外信息，如表单值变化等。target：触发事件的源组件（可能是子元素）。currentTarget：当前事件处理函数所绑定的组件。45.1

事件（续）第5章事件及页面路由事件的使用步骤如下。（1）在组件中绑定一个事件处理函数，如<viewbindtap="tap1">，当用户单击该组件的时候，会在该页面对应的文件中找到相应的事件处理函数。（2）在相应的文件（page.js）中编写事件处理函数。事件分为冒泡事件和非冒泡事件。使用bind方式绑定的事件允许冒泡，使用catch方式绑定的事件可阻止冒泡。①冒泡事件：当一个组件上的事件被触发后，该事件会向其父节点传递。常用的冒泡事件有以下几个。touchstart：手指触摸动作开始。touchmove：手指触摸后移动。touchcancel：手指触摸动作被打断，如来电提醒、弹窗等事件。touchend：手指触摸动作结束。tap：手指触摸后马上离开。longpress：手指触摸后，超过350ms再离开。如果指定了事件回调函数并触发了这个事件，则tap事件将不会被触发。55.1

事件（续）第5章事件及页面路由②非冒泡事件：当一个组件上的事件被触发后，该事件不会向其父节点传递。常用的非冒泡事件如下。submit（form）：表单提交事件，当用户提交表单时触发。input（input）：输入框内容变化事件，当用户修改输入内容时触发。scroll（scroll-view）：滚动事件，当滚动视图内容时触发。这些额外信息使得开发者可以根据用户操作的具体上下文执行相应的逻辑，实现动态、交互性强的功能。因此，理解并善用事件对象及其携带的信息，是编写高效、灵活的交互代码的重要基础。65.1

事件（续）第5章事件及页面路由【演练5.1】编写代码，掌握使用事件的方法。1打开第2章中完成的项目。修改p1.wxml文件，将原有代码清除，编写如下代码。<viewbindtap="tapParent"><viewbindtap="tap1">test1</view><viewdata-stu-no="20200001"bind:tap="tap2">test2</view><viewcatchtap="tap3">test3</view></view>代码说明如下。①当绑定一个事件（这里以tap事件为例进行说明）时，bindtap和bind:tap两种语法格式都可以使用。②bind和catch的区别是catch会阻止事件向上冒泡。75.1

事件（续）第5章事件及页面路由【演练5.1】编写代码，掌握使用事件的方法。②bind和catch的区别是catch会阻止事件向上冒泡。具体来说，tap属于冒泡事件。使用bindtap会触发父节点的tap事件，即触发tapParent；而使用catchtap会阻止父节点的tap事件，即阻止tapParent执行。③在组件节点中可以附加一些自定义数据。这样，在事件中可以获取自定义的节点数据，用于事件的逻辑处理。在WXML中，自定义数据以data-开头，多个单词间用连字符“-”连接。在这种写法中，连字符写法会转换成驼峰写法。而大写字符会自动转换成小写字符。例如，data-stu-no最终呈现为event.currentTarget.dataset.stuNo，data-stuNo最终呈现为event.currentTarget.dataset.stuno。85.1

事件（续）第5章事件及页面路由【演练5.1】编写代码，掌握使用事件的方法。2修改p1.js文件，将原有代码清除，编写如下代码，编译运行。Page({tap1:function(){console.log("tap1");},tap2:function(event){console.log(event);console.log(event.currentTarget.dataset.stuNo);},tap3:function(){console.log("tap3");},tapParent:function(){console.log("parent...");}})图5-1

运行结果运行结果如图5-1所示。95.1

事件（续）第5章事件及页面路由图5-1

运行结果选中“test1”，执行“tap1”事件，由于使用的是bindtap，所以会触发父节点的tapParent事件，输出“tap1”和“parent...”。选中“test2”，执行“tap2”事件，由于使用的是bindtap，所以会触发父节点的tapParent事件。在tap2中，可以通过函数的参数event获取大量信息，这里通过自定义数据获取了“stuNo”，具体代码如下。105.1

事件（续）第5章事件及页面路由event.currentTarget.dataset.stuNo结果是输出event对象、“20200001”和“parent...”。选中“test3”，执行“tap3”事件，由于使用的是catchtap，所以不会触发父节点的tapParent事件，仅输出“tap3”。表：3个测试节点的绑定方式与运行输出操作事件绑定方式运行输出选中“test1”tap1bindtap“tap1”和“parent...”选中“test2”tap2bind:tapevent对象、“20200001”和“parent...”选中“test3”tap3catchtap仅“tap3”115.2

页面路由第5章事件及页面路由微信小程序的页面路由是指根据路由规则从一个页面跳转到另一个页面。本节将介绍如何实现页面跳转以及如何进行页面参数传递。15.2.1

navigator组件路由通过navigator组件实现页面跳转并完成页面之间的参数传递25.2.2

API路由通过页面路由API实现页面跳转共5个常用API125.2.1

navigator组件路由第5章事件及页面路由【演练5.2】通过navigator组件实现页面跳转。1修改p1.wxml文件，其内容如图5-2所示。图5-2

p1.wxml文件的内容135.2.1

navigator组件路由（续）第5章事件及页面路由【演练5.2】通过navigator组件实现页面跳转。2修改p3.js文件，将原有代码清除，编写如下代码，编译运行。Page({data:{title:""},onLoad(options){if(options.title!=null){this.setData({title:options.title});console.log(this.data.title);}}})145.2.1

navigator组件路由（续）第5章事件及页面路由【演练5.2】通过navigator组件实现页面跳转。3单击“跳转到新页面”链接，运行结果如图5-3所示。注意鼠标指针的位置，该页面中包含“返回”按钮。图5-3

跳转到新页面运行结果使用的URL为“../p3/p3?title=a”，这是页面之间传递参数的常用形式。通过该URL，p1页面将参数“title=a”传递给p3页面。在p3.js的onLoad()函数中，可以通过参数options获取p1页面传递过来的参数title的值，因此控制台输出了“a”。155.2.1

navigator组件路由（续）第5章事件及页面路由【演练5.2】通过navigator组件实现页面跳转。4单击“在当前页面打开”链接，运行结果如图5-4所示。该页面中包含“主页”按钮，控制台会输出“b”。5单击“切换Tab”链接，运行结果如图5-5所示。注意，此处使用了open-type="switchTab"，当一个页面和底部导航绑定后，只能使用switchTab方式进行页面切换；而没有和底部导航绑定的页面，要使用switchTab以外的方式进行页面跳转。图5-4

在当前页面打开运行结果图5-5

切换Tab链接运行结果165.2.2

API路由第5章事件及页面路由常用的页面路由API如下。wx.navigateTo：保留当前页面，跳转到小程序内的某个页面，但是不允许跳转到底部导航页面。使用wx.navigateBack可以返回到原页面。微信小程序中的页面栈最多为10层。wx.redirectTo：关闭当前页面，跳转到小程序内的某个页面，但是不允许跳转到底部导航页面。wx.navigateBack：关闭当前页面，返回到上一个页面或多级页面。可通过getCurrentPages获取当前的页面栈，并决定需要返回几层。wx.switchTab：跳转到底部导航页面，并关闭其他所有非底部导航页面。wx.reLaunch：关闭所有页面，打开小程序内的某个页面。175.2.2

API路由（续）第5章事件及页面路由【演练5.3】通过API路由实现页面跳转。1修改p1.wxml文件，其内容如图5-6所示。2修改p1.js文件，其内容如图5-7所示。图5-6

p1.wxml文件的内容图5-7

p1.js文件的内容185.2.2

API路由（续）第5章事件及页面路由【演练5.3】通过API路由实现页面跳转。3保存并运行文件，单击“navigateTo”链接，该页面中包含“返回”按钮。navigateTo()方法中的URL为“../p3/p3?title=1”，所以输出了“1”。wx.navigateToURL：../p3/p3?title=14单击“redirectTo”链接，该页面中包含“主页”按钮。redirectTo()方法中