《微信小程序开发图解案例教程》教学教案—第8章教案仿中国婚博会微信小程序.docxVIP

第8章综合案例：仿中国婚博会微信小程序 课程名称 微信小程序开发图解案例 _ L 教程 项目名称 仿中国婚博会微信小程序 任务名称 仿中国婚博会微信小程序 课时 6 项目性质 □演示性 □验证性 J设计性 □综合性 授课班级 授课日期 授课地点 教学目标 （1） 学会利用微信小程序来完成界面布局以及给界而添加相关的布局样式。 （2） 学会底部标签导航、海报轮播效果、宫格导航的设计。 （3） 学会在界而布局的时候，如果有类似或者相同的布局，先设计一个布局和样式，然后再 复用这个布局和样式，以提髙开发效率。 （4） 学会制作下拉菜单筛选条件，动态地切换不同下拉菜单的显不。 （5） 学会表单制作，设计表单样式以及表单组件的使用。 （6） 学会弹出窗设计，动态地控制显示与隐藏效果。 教学内容 （1） 底部标签导航设计 （2） 海报轮播效果设计 （3） 宫格导航设计 （4） 全部分类导航设计 （5） 现金券下拉菜单筛选条件设计 （6） 现金券列表页设计 （7） 婚博会索票界而设计 （8） 获知渠道弹出层设计 教学重点 底部标签导航、海报轮播效果、导航、现金券页而、索票界而、获知渠道弹岀层设计 教学难点 底部标签导航、海报轮播效果、导航、现金券页而、索票界而、获知渠道弹出层设计 教学准备 装有微信小程序的开发工具的电脑 教学课件PPT 教材：《微信小程序开发图解案例教程（附精讲视频）（第2版）》 作业设计  教学过程 教学环 节 教学内容与过程 （教学内容、教学方法、组织形式、教学手段） 课前组 织 做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位豊、打开授课 计划、教案等），吸引学生注意力。 课程说 明 【课前说明】 回顾VieW视图容器组件、image图片组件、SWiPer滑块视图容器组件、icon图标组件、form表单组 件、radio单项选择器组件、CheCkbOX多项选择器组件、WXSS样式、wx. SetStOrageSynCAPl接口、 navigateTo这个APl接口等知识点，了解仿中国婚博会微信小程序的功能与结构。 【目的】 使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。 8. 1需求描述 仿中国婚博会微信小程序需要完成以下主要功能: （1）完成底部标签导航设汁、首页海报轮播效果设计和宫格导航设计。 新风尚 新风尚 课程内容描述 课程内容描述 Θ Θ @ @ oo .wa t2β≡ 坤Ir 鱼弟兮矗 ■ ■9 田M 首页设讣图 （2）在首页里，单击全部分类宫格导航的时候，会进入到全部分类导航界面，把婚博会相关内容 的导航集成到一个界而里。 免费索葉 Λ □ ?? GA W BMt. 吕 CS 呦 免费索票 （5）在填写表单选择获知渠道时，以弹出窗口的形式提供单选列表，供用户选择获知婚博会渠道 的情况。 α （3 * 8 α 呕 u±n tE 获知渠逍 B. 2设计思路及相关知识点 8. 2. 1设计思路 （1） 设计底部标签导航时，准备好底部标签导航的图标，并建立5个相应的页而；设置默认时图 片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色； （2） 设计幻灯片轮播效果时，准备好幻灯片需要轮播的图片： （3） 设讣宫格导航的时候，先把宫格导航的图标和导航拿称存放在js后台里，然后动态循环展现 出宫格导航； （4） 在设计全部分类导航的时候，有3块区域内容：玩转婚博会、特色分类、我的婚博会。由于 送3个区域布局方式一样，可以先设计岀一个区域，英余的两个区域直接复制使用即可： （5） 现金券界而设计难点在于下拉菜单筛选条件设计，需要把筛选条件垃于页而顶层，在样式里 设置z-index：999就可以将其置于最顶层： （6）婚博会索票界面是常规的表单界而，需要把表单数据提交给后台，保存到本地里。 8. 2. 2相关知识点 （1） 在界而布局的时候，会用到微信小程序的组件，包括VieW视图容器组件、image图片组件、 SWiPer滑块视图容器组件、icon图标组件、form表单组件、radio单项选择器组件、CheCkbOX多项选 择器组件等组件的使用： （2） 界面样式设计，需要写一些WXSS样式进行界而的美化和渲染： （3） 将数据缓存到本地，需要调用wx. SetStOrageSynC这个APl接口，进行缓存数据； （4） 界而跳转需要使用wx. navigateTo这个APl接口，进行界面跳转。 B. 3准备工作 （1） 我们首先需要准备一个AppID,如果没有APPID也没有关系，只不过不能在手机上进行项目的 预览，但是在开发工具上开发是没有任何问题的。 （2） 底部标签导航，需要有选中图标和默认图标，放置在images/bar