《微信小程序开发 教案 3.13 教案-事件绑定.docx》由会员分享，可在线阅读，更多相关《微信小程序开发 教案 3.13 教案-事件绑定.docx（2页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第3章 微信小程序概述任务3.13事件绑定课时内容事件绑定课时1教学目标掌握事件绑定的方法教学重点事件绑定教学难点事件绑定教学设计1 .教学思路：通过实训任务来让学生掌握事件绑定的内容。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一 任务描述编写一个小程序，单击文字“请点击我！，时，能运行编写的自定义函数onViewClick()的绑定事 件；单击“单击按钮，按钮时，能运行编写的自定义函数myTap()的绑定事件，最后在console控制 台上显示对应的结果。二、导入知识点事件是视图层到逻辑层的通信方式，有以下特点：(1)事件可以将用户的行为反馈到逻辑层进行处理；(2
2、)事件可以绑定在组件上，当触发事件时就会执行逻辑层中对应的事件处理函数；事件中还可以 定义额外的对象信息，例如id、dataset toucheso三、实现效果根据任务描述可以做出如图3.24、3.25和3.26所示的事件绑定效果。 WeChatT14:12100%Weixin,*I 事件绑定 I请点击我！图3.24事件绑定图H 0 top O FilterDefault levels A sitemap索引情况提示根据sitemap的规则0，当前页面pages/index/index将被索引1 hidden QHello/老师 type: tap, timestamp: 133676, ta
3、rget: &, currentTarget: J, mark:“index.is:5 index.is:9诺H器问题喊出终请八 xQ Wxml Console Sources Network Security Mock Memory AppData Audits A 1 O图3.25事件绑定console控制台图3.26事件绑定console控制台细节信息四,任务实现(1 )需要在 WXML页面为组件绑定了两个事件处理函数，如：view class=onClick bindtapdonViewClick1请点击我！ /view和button id=myBtn bindtap二,myTap1 data-my=,hello1按 钮组件(/button上述代码表示分别为文字和按钮绑定了一个单击触摸事件，用手指触摸后将执行自 定义函数分别为onViewClick()和myTap()。其中data-*为事件附加属性，可以由用户自定义或省略 不写。(2)编写index.wxss文件代码。本任务定义了.box和.title样式，index.wxss文件见附件；(3)编写index.js文件代码。文件定义myTap:function()函数，本任务中要求在console调试器展示 出执行结果。其中，需要注意的是必须在对应的JS文件中添加同名函数，若函数不存在，则会在触 发时报错。练习