还剩23页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
《微信小程序开发实战(第2版)》教学设计课程名称授课年级授课学期教师袅名年月3编写视频区域的样式知识点9-1案例2・3】婚礼邀请函.实现“宾客信息”页面的结构教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“宾客信息”页面结构的实现1实现“宾客信息”页面的背景图片2编写内容区域的整体页面结构3编写姓名区域的结构4编写手机号码区域的结构5编写性别区域的结构6编写需要的点心区域的结构知识点10-1案例2・3】婚礼邀请函.实现“宾客信息”页面的样式教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“宾客信息”页面样式的实现1编写背景图片的样式2编写内容区域中外层容器的样式3编写姓名和手机号码区域的样式4编写性别区域的样式5编写点心区域的样式6编写“提交”按钮的样式
四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第
九、十课时上机练习上机练习主要针对上节课中需要重点掌握的知识点,结合”婚礼邀请函”微信小程序的“邀请函”“照片”“美好时光”“宾客信息”页面进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机一考察知识点为【案例2・3】婚礼邀请函.准备工作、【案例2・31婚礼邀请函•项目初始化、【案例2-3]婚礼邀请函.实现“邀请函”页面的结构、【案例2・3】婚礼邀请函.实现“邀请函”页面的样式形式单独完成题目“婚礼邀请函”微信小程序“邀请函”页面的开发具体要求1创建项目、配置页面以及复制素材2项目初始化3实现“邀请函”页面的结构4实现“邀请函”页面的样式上机二考察知识点为【案例2・3】婚礼邀请函.实现“照片”页面的结构、【案例2・3】婚礼邀请函.实现“照片”页面的样式、【案例2・3】婚礼邀请函•实现“美好时光”页面的结构、【案例2-3]婚礼邀请函.实现“美好时光”页面的样式、【案例2・3】婚礼邀请函.实现“宾客信息”页面的结构、【案例《微信小程序开发实战第2版》教学设计课程名称授课年级授课学期教师发名教师通过PPT的方式讲解Page函数1什么是Page函数2通过示例代码演示Page函数的使用Page函数的参数页面的初始数据页面生命周期回调函数页面事件处理函数知识点
2.数据绑定教师通过PPT结合实际操作的方式讲解数据绑定1什么是数据绑定2通过示例代码演示数据绑定知识点
3.事件绑定教师捻过PPT结合实际操作的方式讲解事件绑定1什么是事件2常见的事件3事件的分类4为组件绑定事件的方法5通过示例代码演示如何为组件绑定事件6事件处理函数的简写形式知识点
4.事件对象教师通过PPT结合实际操作的方式讲解事件对象1事件对象的作用2事件对象的属性3通过示例代码演示事件对象的使用4事件对象属性中的target和currentTarget属性的区别5通过示例代码演示事件对象属性中的target和currentTarget属性的区别知识点5-this关键字教师通过PPT结合实际操作的方式讲解this关键字1this关键字的作用2通过示例代码演示this关键字的使用
四、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第二课时setData方法、条件渲染、vblock>标签、hidden属性、【案例3・11比较数字大小.准备工作、【案例3・1】比较数字大小•实现“比较数字大小”微信小程序的页面结构、【案例比较数字大小•获取并保存用户输入的数字、【案例3・1】比较数字大小.判断数字大小并显示结果
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过直接引入的方式导入新课在上节课学习了“比较数字大小”微信小程序用到的部分知识点包括Page函数、数据绑定、事件绑定、事件对象、this关键字本节课中将详细讲解“比较数字大小”微信小程序的相关知识点和开发
三、新课讲解知识点LsetData方法教师通过PPT的方式讲解setData方法setData方法的作用setData方法的基本语法setData方法的参数dataocallbacko4通过示例代码演示setData方法的使用知识点
2.条件渲染教师通过PPT结合实际操作的方式讲解条件渲染1条件渲染的作用⑵实现条件渲染的3个控制属性wx:ifowx:elifowx:elseo知识点3・vblock>标签教师通过PPT结合实际操作的方式讲解〈block〉标签1〈block〉标签的作用2通过示例代码演示〈block标签的使用知识点4-hidden属性教师通过PPT结合实际操作的方式讲解hidden属性以及hidden属性与wx:if控制属性的区别hidden属性的作用hidden属性的示例代码hidden属性与wx:if控制属性的区别知识点
5.【案例比较数字大小■准备工作教师通过PPT结合实际操作的方式讲解开发“比较数字大小”微信小程序的准备工作6创建项目7配置导航栏8复制素材知识点
6.【案例3-1]比较数字大小•实现“比较数字大小”微信小程序的页面结构教师通过PPT结合实际操作的方式讲解“比较数字大小”微信小程序页面结构的实现⑴通过代码实现“比较数字大小”微信小程序的页面结构2运行程序,查看页面结构知识点7-1案例3-1]比较数字大小•获取并保存用户输入的数字教师通过PPT结合实际操作的方式讲解如何获取并保存用户输入的数字1通过代码实现对用户输入的数字的获取以及保存2运行程序,查看运行结果知识点
8.【案例比较数字大小.判断数字大小并显示结果教师通过PPT结合实际操作的方式讲解如何判断数字大小并显示结果1通过代码实现数字大小的判断以及结果的显示2运行程序,查看运行结果
四、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第三课时上机练习上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机考察知识点为Page函数、数据绑定、事件绑定、事件对象、this关键字、setData方法、条件渲染、【案例比较数字大小•准备工作、【案例比较数字大小•实现“比较数字大小”微信小程序的页面结构、【案例3・1】比较数字大小•获取并保存用户输入的数字、【案例比较数字大小•判断数字大小并显示结果形式单独完成题目完成【案例3”】比较数字大小的开发具体要求1创建项目、配置导航栏和复制样式素材2实现“比较数字大小”微信小程序的页面结构3获取并保存用户输入的数字4判断数字大小并显示结果第四课时data,自定义属性、模块、【案例3・2】计算器.准备工作、【案例3・2】计算器.实现“计算器”微信小程序的页面结构、【案例3-2]计算器.实现“计算器”微信小程序的页面逻辑、【案例3・2】计算器•特殊情况处理
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过情景引入的方式导入新课在日常生活中,计算器是人们广泛使用的工具,可以帮助我们快速且方便地计算金额、成本、利润等本节课将详细讲解“计算器”微信小程序的相关知识点和开发
三、新课讲解知识点1-data-*自定义属性教师通过PPT结合实际操作的方式讲解data-*自定义属性⑴什么是data-*自定义属性data-*自定义属性在事件处理函数中的获取方法targetocurrentTarget对象的dataset属性3通过示例代码演示data-*自定义属性如何实现参数的传递知识点
2.模块教师通过PPT的方式讲解模块1什么是模块2模块化开发语法使用module.exports语法对外暴露接口通过require语法引入模块3通过示例代码演示如何创建和引用模块知识点
3.【案例3-2]计算器.准备工作教师通过PPT结合实际操作的方式讲解开发“计算器”微信小程序的准备工作1创建项目2配置导航栏3复制素材知识点
4.【案例3-2]计算器.实现“计算器”微信小程序的页面结构教师通过PPT结合实际操作的方式讲解“比较数字大小”微信小程序页面结构的实现1编写页面整体结构2编写结果区域的结构3编写按钮区域第1行按钮的结构4编写按钮区域第2行按钮的结构5编写按钮区域第3行按钮的结构6编写按钮区域第4行按钮的结构7编写按钮区域第5行按钮的结构知识点
5.【案例3-2]计算器.实现“计算器”微信小程序的页面逻辑教师通过PPT结合实际操作的方式讲解“比较数字大小”微信小程序页面逻辑的实现1引入calcjs文件,获得计算器对象2编写页面中所需的数据3编写数字按钮的事件处理函数numBtno4编写运算符按钮的事件处理函数opBtno5解决在点击数字按钮之后点击运算符按钮,再次输入的数字会拼接到第1个数字后面,而不是输入第2个数字的问题6编写“=”按钮的事件处理函数execBtno7编写按钮重置按钮的事件处理函数resetBtn8编写“按钮小数点按钮的事件处理函数dotBtn9编写“DEL”按钮册IJ除按钮的事件处理函数delBtn10编写“+//按钮正负切换按钮的事件处理函数negBtn知识点
6.【案例3-2]计算器.特殊情况处理教师通过PPT结合实际操作的方式讲解特殊情况的处理1解决不能进行连等计算的问题2解决数字拼接的问题3解决没有输入第2个数字时不能按按钮执行计算的问题4解决无法通过运算符按钮实现连续计算的问题
四、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第五课时上机练习上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机考察知识点为data#自定义属性、模块、【案例3・21计算器.准备工作、【案例3-2计算器.实现“计算器”微信小程序的页面结构、【案例3-2]计算器.实现“计算器”微信小程序的页面逻辑、【案例3・2】计算器.特殊情况处理形式单独完成题目完成【案例3・2】计算器的开发具体要求4创建项目、配置导航栏和复制素材5实现“计算器”微信小程序的页面结构6实现“计算器”微信小程序的页面逻辑7特殊情况处理第六课时列表渲染、网络请求、提示框、WXS.上拉触底、下拉刷新
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过场景引入的方式导入新课在日常生活中,人们线上进行线上点餐时,会注意到商家通过列表的形式来展示美食名称、美食图片以及美食商家的电话、地址和营业时间等信息,方便人们查找多种美食信息本节课将详细讲解“美食列表”微信小程序用到的相关知识点
三、新课讲解知识点1•列表渲染教师通过PPT结合实际操作的方式讲解列表渲染1什么是列表渲染2列表渲染的控制属性的使用方法wx:forowx:keyo3通过示例代码演示列表渲染的使用数组的列表渲染数组中包含对象情况下的列表渲染知识点
2.网络请求教师通过PPT的方式讲解网络请求1什么是网络请求2微信小程序官方对服务器接口的请求的限制只能请求HTTPS协议的服务器接口必须登录微信小程序管理后台,将服务器接口的域名添加到信任列表中3发起网络请求的实现方法wx.request方法的常见选项5取消请求任务的方法6通过示例代码演示如何调用wx.request方法发起一个GET方式的请求知识点
3.提示框教师通过PPT结合实际操作的方式讲解提示框1实现提示框的方法wx.showLoading方法wx.showToast方法2wx.showLoadingO方法的作用3列举wx.showLoadingO方法的常用选项4通过示例代码演示wx.showLoadingO方法的使用wx.showToast方法的作用6列举wx.showToast方法的常用选项7通过示例代码演示wx.showToast方法的使用知识点4-WXS教师通过PPT结合实际操作的方式讲解WXSo1什么是WXSWXS的应用场景WXS的特点WXS与JavaScript不同WXS不能作为组件的事件回调具有隔离性在iOS设备上效率高WXS脚本的分类内嵌WXS脚本若想开发一个微信小程序,首先应学习如何进行页面制作,也就是学习如何搭建微信小程序的页面结构并实现美观的页面样式效果为了使初学者快速掌握微信小程序的页面制作,本章将从微信小程序常用组件、页面样式等方面进行详细讲解使学生了解WXML的概念,能够说出WXML的特点、WXML与HTML的区别使学生了解WXSS的概念,能够说出WXSS的特点、WXSS与CSS的区别使学生了解组件的概念,能够说出组件的特点及常用的组件使学生掌握页面路径的配置方法,能够运用该方法进行页面管理使学生掌握View组件的使用方法,能够灵活运用view组件实现页面的布局效果使学生掌握image组件的使用方法,能够灵活运用image组件完成图片插入操作使学生掌握rpx单位的使用方法,能够灵活运用rpx单位解决屏幕适配的问题使学生掌握页面样式的导入方法,能够灵活运用该方法导入公共样式使学生掌握swiper和swiper-item组件的使用方法,能够灵活运用swiper和swiper-item组件完成轮播图的制作使学生掌握text组件的使用方法,能够灵活运用text组件定义行内文本使学生掌握Flex布局的使用方法,能够使用Flex布局的相关属性完成页面布局使学生掌握导航栏的配置方法,能够完成导航栏标题颜色、背景颜色等页面效果的设置使学生掌握标签栏的配置方法,能够完成页面标签栏的配置使学生掌握VW、Vh单位的使用方法,能够灵活运用VW、vh单位设置宽度和高度使学生掌握Video组件的使用方法,能够灵活运用video组件实现页面中视频的处理使学生掌握表单组件的使用方法,能够灵活运用表单组件完成表单页面的制作•页面路径配置•view组件image组件【案例2-11个人信息-实现“个人信息”微信小程序页面结构swiper和swiper-item组件•表单组件教学难点image组件教学方式课堂教学以PPT讲授为主,并结合多媒体进行教学•外联WXS脚本5内嵌WXS脚本的使用方法6外联WXS脚本的使用方法7通过示例代码演示如何使用内嵌WXS脚本和外联WXS脚本知识点
5.上拉触底教师通过PPT结合实际操作的方式讲解上拉触底1什么是上拉触底2实现上拉触底的方法onReachBottom事件处理函数的示例代码4修改上拉触底距离的方法5通过示例代码演示如何配置上拉触底的距离知识点
6.下拉刷新教师通过PPT结合实际操作的方式讲解下拉刷新1什么是下拉刷新2启用下拉刷新有2种方式•全局开启下拉刷新•局部开启下拉刷新3开始下拉刷新的方法4停止下拉刷新的方法
四、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第七课时【案例3・3】美食列表•准备工作、【案例3・3】美食列表•获取初始数据、【案例3・3】美食列表.实现页面渲染、【案例3・3】美食列表.处理电话格式、【案例3-3]美食列表.实现上拉触底、【案例3-3]美食列表.实现下拉刷新
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过直接引入的方式导入新课在上节课中学习了“美食列表”微信小程序用到的相关知识点,包括列表渲染、网络请求、提示框、WXS、上拉触底、下拉刷新相关内容,本节课中将详细讲解“美食列表”微信小程序的开发
三、新课讲解知识点1•【案例3-3]美食列表.准备工作教师通过PPT结合实际操作的方式讲解开发“美食列表”微信小程序的准备工作1创建项目2配置页面3配置导航栏4复制样式素材5启动服务器知识点
2.【案例3・3】美食列表•获取初始数据教师通过PPT结合实际操作的方式讲解获取初始数据的实现1通过代码定义页面所需的数据2运行程序,测试是否成功获取初始数据知识点
3.【案例3・3】美食列表.实现页面渲染教师通过PPT结合实际操作的方式讲解页面渲染的实现1通过代码实现“美食列表”微信小程序的页面渲染2运行程序,测试是否实现页面渲染知识点
4.【案例3-3]美食列表•处理电话格式教师通过PPT结合实际操作的方式讲解处理电话格式的实现1通过代码实现将电话号码进行处理之后显示在页面上2运行程序,测试是否成功处理电话格式知识点
5.【案例3・3】美食列表.实现上拉触底教师通过PPT结合实际操作的方式讲解上拉触底的实现1通过代码实现是用户在进行上拉操作时,当页面即将到达底部时加载下一页数据2运行程序,测试是否实现该功能知识点
6.【案例3・31美食列表.实现下拉刷新教师通过PPT结合实际操作的方式讲解下拉刷新的实现1通过代码实现当用户进行下拉操作时,如果到达了顶部,再进行下拉,可以刷新页面2运行程序,测试是否实现该功能
四、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第八课时上机练习上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机考察知识点为列表渲染、网络请求、提示框、WXS、上拉触底、下拉刷新、【案例3・3】美食列表.准备工作、【案例3・31美食列表■获取初始数据、【案例3・3】美食列表.实现页面渲染、【案例3-3]美食列表•处理电话格式、【案例3-3]美食列表.实现上拉触底、【案例3・3】美食列表.实现下拉刷新形式单独完成题目完成【案例3・3】美食列表的开发具体要求1创建项目、配置页面、配置导航栏、复制样式素材和启动服务器2获取初始数据3实现页面渲染4处理电话格式5实现上拉触底6实现下拉刷新第九课时双向数据绑定、【案例3・4】调查问卷.准备工作、【案例3・4】调查问卷•获取初始数据、【案例3・4】调查问卷.实现页面渲染
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过情景引入的方式导入新课假设有一位大学老师,想通过调查问卷来了解同学们的专业技能、对开设公开课的意见等信息,从而根据同学们的建议制订下一步的教学计划在本节课中将详细讲解“调查问卷”微信小程序的开发
三、新课讲解知识点1•双向数据绑定教师通过PPT的方式讲解双向数据绑定1什么是单向数据绑定2什么是双向数据绑定3双向数据绑定的示例代码知识点
2.【案例3・4】调查问卷.准备工作教师通过PPT结合实际操作的方式讲解开发“调查问卷”微信小程序的准备工作1创建项目2配置页面3配置导航栏4复制样式素材5启动服务器知识点
3.【案例3・4】调查问卷•获取初始数据教师通过PPT结合实际操作的方式讲解获取初始数据的实现1通过代码定义页面所需的数据2运行程序,测试是否成功获取初始数据知识点
4.【案例3・4】调查问卷.实现页面渲染教师通过PPT结合实际操作的方式讲解页面渲染的实现1通过代码实现“调查问卷”微信小程序的页面渲染2运行程序,测试是否实现页面渲染
四、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台(http://tch.ityxb.com)布置本节课作业以及下节课的预习作业第十课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机(考察知识点为双向数据绑定、【案例3・4】调查问卷・准备工作、【案例3・4】调查问卷.获取初始数据、【案例3・4】调查问卷•实现页面渲染)形式单独完成题目完成【案例3・4】调查问卷的开发具体要求
(1)创建项目、配置页面、配置导航栏、复制样式素材和启动服务器
(2)获取初始数据
(3)实现页面渲染教学后记第一课时WXML简介、WXSS简介、常用组件、页面路径配置、view组件
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过情景引入的方式导入新课大学毕业后,许多大学生都将迈出校园去求职,为了让招聘人员快速地认识自己,可以做一个“个人信息”微信小程序,展示自己的个人信息本节课将详细讲解“个人信息”微信小程序用到的相关知识点
三、新课讲解知识点1-WXML简介教师通过PPT的方式讲解WXML简介WXML作用WXML与HTML的区别知识点2-WXSS简介教师通过PPT的方式讲解WXSSoWXSS作用WXSS与CSS的区别知识点
3.常用组件教师通过PPT的方式讲解常用组件1组件的概念2常用组件view组件text组件button组件image组件form组件video组件checkbox组件radio组件input组件audio组件知识点4-页面路径配置教师通过PPT结合实际操作的方式讲解页面路径配置1页面路径配置的方法2通过示例代码演示如何配置页面路径pages数组中每个元素的含义4创建一个新页面的方法知识点5-view组件教师通过PPT结合实际操作的方式讲解view组件view组件的作用2定义view组件的示例代码3列举view组件的常用属性4通过示例代码演示以hover-classhover-start-time和hover-stay-time属性的使用
四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第二课时image组件、rpx单位、样式导入、【案例个人信息.准备工作、【案例2・11个人信息.实现“个人信息”微信小程序的页面结构、【案例2・11个人信息•实现“个人信息”微信小程序的页面样式
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过直接引入的方式导入新课在上节课中学习了“个人信息”微信小程序用到的相关知识点,包括WXML简介、WXSS简介、常用组件、页面路径配置、view组件的相关内容,在本节课中将继续详细讲解剩余的知识点及“个人信息”微信小程序的开发
三、新课讲解知识点1-image组件教师通过PPT结合实际操作的方式讲解image组件image组件作用2定义image组件的示例代码3列举image组件的常用属性4列举image组件mode属性常用的mode合法值5通过示例代码演示aspectFit缩放模式和top裁剪模式的使用知识点2-rpx尺寸单位教师通过PPT的方式讲解rpx尺寸单位rpx单位的作用rpx单位的设计思想3不同屏幕宽度的rpx与px的换算知识点3-样式导入教师通过PPT结合实际操作的方式讲解样式导入1样式导入的作用2样式导入的语法格式3通过示例代码演示如何创建公共样式文件并进行公共样式文件导入知识点4-【案例21】个人信息.准备工作教师通过PPT结合实际操作的方式讲解开发“个人信息”微信小程序的准备工作1创建项目2复制素材知识点
5.【案例个人信息.实现“个人信息”微信小程序的页面结构教师通过PPT结合实际操作的方式讲解“个人信息”微信小程序页面结构的实现1编写“个人信息”微信小程序的页面结构知识点
6.【案例2・2】个人信息.实现“个人信息”微信小程序的页面样式教师通过PPT结合实际操作的方式讲解“个人信息”微信小程序页面样式的实现1编写头像区域的页面样式2编写详细信息区域的页面样式
三、归纳总结教师回顾本节课所讲的知识,并通过测试题的方式引导学生解答问题并给予指导
四、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第三课时上机练习上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机考察知识点为WXML简介、WXSS简介、常用组件、页面路径配置、view组件、image组件、rpx单位、样式导入、【案例2・1】个人信息•准备工作、【案例个人信息.实现“个人信息”微信小程序的页面结构、【案例2・11个人信息.实现“个人信息”微信小程序的页面样式形式单独完成题目完成【案例2・1】个人信息的开发具体要求1创建项目和复制素材2实现“个人信息”微信小程序的页面结构3实现“个人信息”微信小程序的页面样式第四课时swiper和swiper-item组件、text组件、Flex布局、【案例221本地生活.准备工作、【案例2-2]本地生活.实现“本地生活”微信小程序的页面结构、【案例2-2]本地生活.实现“本地生活”微信小程序的页面样式
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过直接引入的方式导入新课“本地生活”微信小程序是一个介绍本地美食、装修、工作等信息的微信小程序,微信小程序的首页包含轮播图区域和九宫格区域本节课将详细讲解“本地生活”微信小程序用到的相关知识点及开发
三、新课讲解知识点1-swiper和swiper-item组件教师通过PPT结合实际操作的方式讲解swiper和swiper-item组件swiper和swiper-item组件的作用swiper和swiper-item组件的示例代码3列举swiper组件的常用属性4通过示例代码演示swiper和swiper-item组件的使用知识点2-text组件教师通过PPT结合实际操作的方式讲解text组件text组件的作用text组件的示例代码3列举text组件的常用属性4通过示例代码演示text组件的使用知识点3-Flex布局教师通过PPT结合实际操作的方式讲解Flex布局Flex布局概念及作用Flex布局的使用方法3列举Flex容器的常用属性4列举Flex项目的常用属性5通过示例代码演示flex-directionjustify-contentalign-items和flex-wrap属性的使用知识点
4.【案例2・2】本地生活.准备工作教师通过PPT结合实际操作的方式讲解开发“本地生活”微信小程序的准备工作1创建项目2配置页面3复制素材知识点
5.【案例2・2】本地生活.实现“本地生活”微信小程序的页面结构教师通过PPT结合实际操作的方式讲解“本地生活”微信小程序页面结构的实现1编写轮播图区域的页面结构2编写九宫格区域的页面结构知识点
6.【案例2・2】本地生活.实现“本地生活”微信小程序的页面样式教师通过PPT结合实际操作的方式讲解“本地生活”微信小程序页面样式的实现1编写轮播图区域的页面样式2编写九宫格区域的页面样式
四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作业第五课时上机练习上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度上机考察知识点为swiper和swiper・item组件、text组件、Flex布局、【案例2-2]本地生活.准备工作、【案例2-21本地生活.实现“本地生活”微信小程序的页面结构、【案例2-2]本地生活•实现“本地生活”微信小程序的页面样式形式单独完成题目完成【案例2・21本地生活的开发具体要求1创建项目、配置页面和复制素材2实现“本地生活”微信小程序的页面结构3实现“本地生活”微信小程序的页面样式第六课时导航栏配置、标签栏配置、vw、vh单位、video组件、表单组件
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过需求引入的方式导入新课当一对新人即将举办婚礼时,通常会向他们的亲朋好友发送一些邀请函相比于传统的纸质邀请函,通过微信小程序发送邀请函会让人眼前一亮,给人们不一样的便捷体验本节课将详细讲解“婚礼邀请函”微信小程序用到的相关知识点
三、新课讲解知识点1-导航栏配置教师通过PPT结合实际操作的方式讲解导航栏配置1导航栏配置的作用2列举导航栏的相关配置项3通过示例代码演示如何在页面配置文件和全局配置文件中对导航栏进行配置知识点2-标签栏配置教师通过PPT结合实际操作的方式讲解标签栏配置1配置标签栏的作用2配置标签栏的方法3列举tabBar配置项的属性4通过示例代码演示tabBar配置项的属性的使用5list属性的相关概念6标签按钮的相关属性7通过示例代码演示tabBar配置项中list属性的使用知识点3-vw、vh单位教师通过PPT的方式讲解vw、vh单位vwvh单位作用vw、vh单位的换算思想知识点4-video组件教师通过PPT结合实际操作的方式讲解video组件video组件的作用video组件的示例代码3列举video组件的常用属性4通过示例代码演示video组件的使用知识点5-表单组件教师通过PPT结合实际操作的方式讲解表单组件I表单组件作用2常见的表单组件form组件button组件input组件checkbox和checkbox-group组件radio和radio-group组件radio组件
四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导
五、布置作业教师通过高校教辅平台http://tch.ityxb.com布置本节课作业以及下节课的预习作也第
七、八课时【案例2・3】婚礼邀请函•准备工作、【案例2・3】婚礼邀请函•项目初始化、【案例2・3】婚礼邀请函•实现“邀请函”页面的结构、【案例2・3】婚礼邀请函.实现“邀请函”页面的样式、【案例23]婚礼邀请函.实现“照片”页面的结构、【案例2・3】婚礼邀请函.实现“照片”页面的样式、【案例2・3】婚礼邀请函・实现“美好时光”页面的结构、【案例2・3】婚礼邀请函.实现“美好时光”页面的样式、【案例2-3]婚礼邀请函.实现“宾客信息”页面的结构、【案例2-3]婚礼邀请函•实现“宾客信息”页面的样式
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过直接引入的方式导入新课上节课对“婚礼邀请函”微信小程序中将要用到的知识点进行详细讲解,本节课中将详细讲解“婚礼邀请函”微信小程序的开发
三、新课讲解知识点1•【案例2-3]婚礼邀请函.准备工作教师通过PPT结合实际操作的方式讲解开发“婚礼邀请函”微信小程序的准备工作1创建项目2配置页面3复制素材4安装Node.js5启动服务器知识点2-1案例2・3】婚礼邀请函.项目初始化教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序的项目初始化1标签栏的配置2各个导航栏标题的配置3全局样式文件中导航栏样式的配置4公共样式的编写知识点3-1案例2-3]婚礼邀请函.实现“邀请函”页面的结构教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“邀请函”页面结构的实现1实现“邀请函”页面的背景图片2编写内容区域的整体结构3编写新郎和新娘的姓名区域的结构4编写婚礼信息区域的结构知识点4-1案例2・3】婚礼邀请函.实现“邀请函”页面的样式教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“邀请函”页面样式的实现1编写背景图片的样式2编写内容区域中外层容器的样式3编写顶部图片区域的样式4编写标题区域的样式5编写合照区域的样式6编写新郎和新娘姓名区域的样式7编写新郎和新娘姓名区域中姓名的样式8编写新郎和新娘姓名区域中电话图片的样式9编写新郎和新娘姓名区域中“喜”字图片的样式10编写婚礼信息区域的样式知识点5-1案例2・3】婚礼邀请函.实现“照片”页面的结构教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“照片”页面结构的实现1通过代码实现“照片”页面的结构知识点6-1案例2・3】婚礼邀请函.实现“照片”页面的样式教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“照片”页面样式的实现1通过代码实现“照片”页面的样式知识点7-【案例2・3】婚礼邀请函.实现“美好时光”页面的结构教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“美好时光”页面结构的实现1通过代码实现“美好时光”页面的结构知识点8-【案例2・3】婚礼邀请函•实现“美好时光”页面的样式教师通过PPT结合实际操作的方式讲解“婚礼邀请函”微信小程序“美好时光”页面样式的实现1编写“美好时光”页面中的3个外层view组件的样式2编写标题和拍摄日期区域的样式课题名称第2章微信小程序页面制作计戈IJ课U寸10课时2-3]婚礼邀请函.实现“宾客信息”页面的样式形式单独完成题目“婚礼邀请函”微信小程序“照片”“美好时光”“宾客信息”页面的开发具体要求1实现“照片”页面的结构2实现“照片”页面的样式3实现“美好时光”页面的结构4实现“美好时光”页面的样式5实现“宾客信息”页面的结构6实现“宾客信息”页面的样式教学后记课题名称第3章微信小程序页面交互*瞿10课时课时教学引入通过第2章的学习,读者已可以在微信小程序项目中实现页面结构和样式效果,但是这些页面并不能进行交互在实际的微信小程序项目中,用户是可以与微信小程序页面发生交互的,即可以通过触摸、长按等操作实现各种各样的功能本章将对微信小程序页面交互的相关知识进行详细讲解教学目标使学生熟悉Page函数,能够归纳Page函数及其各个参数的作用使学生掌握数据绑定,能够运用数据绑定实现页面中数据的显示与修改使学生掌握事件绑定,能够在组件触发时执行对应的事件处理函数使学生熟悉事件对象,能够总结事件对象的属性及其作用使学生掌握this关键字的使用,能够运用this关键字访问当前页面中的数据或者函数使学生掌握setData方法的使用能够完成数据的设置与更改使学生掌握条件渲染,能够运用条件渲染根据不同的判断结果显示不同的组件使学生掌握<block>标签,能够运用<block>标签同时显示或隐藏多个组件使学生熟悉hidden属性,能够区分其与wx:if控制属性的区别使学生掌握data-*自定义属性,能够完成data-*自定义数据的设置与获取使学生掌握模块的使用,能够完成模块的创建和引入使学生掌握列表渲染,能够运用列表渲染将数组中的数据渲染到页面中使学生掌握网络请求的实现,能够通过网络请求与服务器进行交互使学生掌握提示框的实现,能够在页面中显示消息提示框使学生掌握WXS的使用,能够运用WXS处理页面中的数据使学生掌握上拉触底的实现,能够运用上拉触底实现数据的动态加载使学生掌握下拉刷新的实现,能够运用下拉刷新实现数据的重新加载使学生掌握双向数据绑定,能够运用双向绑定实现数据的动态更改教学重点Page函数事件绑定setData方法条件渲染列表渲染网络请求WXS双向数据绑定教学难点•【案例3-2]计算器-特殊情况处理教学方式课堂教学以PPT讲授为主,并结合多媒体进行教学教学过程第一课时Page函数、数据绑定、事件绑定、事件对象、this关键字
一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解
二、通过直接引入的方式导入新课本案例将实现“比较数字大小”微信小程序,它的功能是当用户输入两个数字后,点击“比较”按钮可以自动比较这两个数字的大小本节课将详细讲解“比较数字大小”微信小程序用到的相关知识点
三、新课讲解知识点LPage函数。