微信小程序开发项目实战（微课版）教案 项目6 商品页面模块开发

《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称商品页面模块开发计划学时8学时内容分析在小程序开发中，商品模块一般包括商品分类列表、商品列表、商品详情、商品评价等，小程序提供了各类API和组件为实现商品模块提供了便利。掌握了这些API和组件的使用，即可完成商品模块功能的开发。本项目将通过“梅园-商品页面”，讲解商品分类的布局、组件的创建与使用、picker组件等各类商品页面所需要的功能。教学目标及基本要求小程序滑动事件的定义与使用。自定义组件的创建与使用。利用picker组件设置商品选项功能。iconfont图标库的使用方法和技巧。教学重点自定义组件的创建与使用。利用picker组件设置商品选项功能。教学难点自定义组件的创建与使用教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程修改页面产品分类左边页面下面的截图页面都是goodsCate步骤1：定义基础数据步骤2：将产品分类页，分成左右在布局步骤3：左边的布局，左边的布局代码如下：步骤4：左边样式获取小程序页面的高度小程序为我们提供了这样的wx.getSystemInfo(Objectobject)和同步Objectwx.getSystemInfoSync()接口可以获取系统信息。windowHeight属性可以获取可使用窗口高度，单位px。步骤1：获取小程序页面的高度步骤2：设置左边区域的高度左边分类点击事件步骤1:定义三个基础数据步骤2，绑定事件步骤3：handleCategory商品分类右边页面步骤1：右边布局步骤2：样式步骤3：获取每一个节点的高度值。步骤3：实现rightView事件商品列表页面步骤1：页面布局步骤2：星星组件的定义步骤1：新建组件页面步骤2：定义星星组件的属性列表步骤3：星星组件的布