微信小程序开发实战教程课件

第5章事件及数据传递微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标熟练掌握进行事件处理的方法理解事件冒泡机制在事件中获取组件绑定的附加信息熟练掌握路由机制熟练掌握页面之间进行数据传递的方法123455.1事件事件是视图层到逻辑层的通信方式，事件可以将用户的行为反馈到逻辑层进行处理。事件通常绑定在组件上，当达到事件触发条件时，就会执行逻辑层中对应的事件处理函数。12在组件中绑定一个事件处理函数，如bindtap，当用户单击该组件的时候，会在该页面对应的Page中找到相应的事件处理函数。在相应的page.js中编写相应的事件处理函数。5.1事件当一个组件上的事件被触发后，该事件会向父节点传递。冒泡事件touchstart：手指触摸动作开始。touchmove：手指触摸后移动。touchcancel：手指触摸动作被打断，如来电提醒、弹窗等。touchend：手指触摸动作结束。tap：手指触摸后马上离开。longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，则tap事件将不被触发。longtap：手指触摸后，超过350ms再离开（推荐使用longpress事件）。5.1事件非冒泡事件当一个组件上的事件被触发后，该事件不会向父节点传递。常用的非冒泡事件有：form的submit事件、input的input事件、scroll-view的scroll事件。5.1事件【演练】编写代码以掌握使用事件的方法打开第2章中完成的项目。修改p1.wxml文件，将原有代码清除，编写如下代码，保存文件。<viewbindtap="tapParent"><viewbindtap="tap1">test1</view><viewdata-stu-no="20200001"bind:tap="tap2">test2</view><viewcatchtap="tap3">test3</view></view>5.1事件修改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.2页面路由5.2.1navigator组件路由【演练】通过navigator组件实现页面跳转修改p1.wxml文件，其内容如图所示。5.2.1navigator组件路由修改p1.wxss文件，将原有代码清除，编写如下代码，保存文件。.navigator-hover{color:blue;}.other-navigator-hover{color:red;}5.2.1navigator组件路由修改p3.js文件，将原有代码清除，编写如下代码，保存文件。Page({onLoad:function(options){this.setData({title:options.title});console.log(this.data.title);}})5.2.1navigator组件路由单击“跳转到新页面”链接，运行结果如图所示，注意鼠标指针的位置，该页面中包含“返回”按钮。5.2.1navigator组件路由单击“在当前页打开”链接，运行结果如图所示，注意鼠标指针的位置，该页面中包含“主页”按钮，控制台会输出“redirect”。5.2.1navigator组件路由单击“切换Tab”链接，运行结果如图所示。注意，此处使用了open-type="switchTab"，当一个页面和底部导航绑定后，只能使用switchTab方式进行切换，而没有和底部导航绑定的页面，要使用除switchTab之外的方式进行页面跳转。5.2.2API路由常用的页面路由API如下。wx.navigateTo：保留当前页面，跳转到应用内的某个页面上，但是不能跳到tabBar页面。使用wx.navigateBack可以返回到原页面。微信小程序中的页面栈最多为10层。wx.redirectTo：关闭当前页面，跳转到应用内的某个页面上，但是不允许跳转到tabBar页面。wx.navigateBack：关闭当前页面，返回到上一页面或多级页面。可通过getCurrentPages获取当前的页面栈，并决定需要返回几层。wx.switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面。wx.reLaunch：关闭所有页面，打开到应用内的某个页面。5.2.2API路由【演练】通过API路由实现页面跳转修改p1.wxml文件，其内容如图所示。5.2.2API路由修改p1.js文件，其内容如图所示。保存并运行文件，单击“navigateTo”链接，该页面中包含“返回”按钮。navigateTo方法中的URL为“../p3/p3?title=1”，所以输出了“1”。单击“redirectTo”链接，该页面中包含“主页”按钮。redirectTo方法中的URL为“../p3/p3?title=2”