7.0 教案-中国国旅小程序.docx

7.0 教案-中国国旅小程序YOUR LOGO原 创 文 档 请 勿 盗 版第一章 微信小程序入门任务7.0 中国国旅小程序课时内容中国国旅小程序课时8教学目标能使用tabBar对象配置底部标签导航；能使用swiper组件实现景点轮播效果；能使用wx:for列表渲染的方式实现宫格导航图标；能定义宫格导航navBtn事件以实现导航链接跳转；能使用dl、dt、dd进行筛选条件布局；能定义菜单切换单击事件tapMainMenu；能使用表单组件制作表单页面。教学重难点能使用tabBar对象配置底部标签导航；能使用swiper组件实现景点轮播效果；能使用wx:for列表渲染的方式实现宫格导航图标；能定义宫格导航navBtn事件以实现导航链接跳转；能使用dl、dt、dd进行筛选条件布局；能定义菜单切换单击事件tapMainMenu；能使用表单组件制作表单页面。 教学设计1.教学思路：设计一个小程序中国国旅，参加文博会需要使用中国国旅App订机票、领签到礼、兑好礼等，制作完成对应的功能。 2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、项目需求分析1. 项目描述 参加文博会需要使用中国国旅App订机票、领签到礼、兑好礼等。由于中国国旅App软件使用频率不是很高，因此我们可以做一个具有中国国旅App功能的微信小程序，需要的时候搜索出来使用，主要界面如图所示。2. 项目分析中国国旅微信小程序需要完成以下主要功能：（1）完成底部标签导航功能、首页景点轮播功能和宫格导航功能；（2）在首页里，单击“更多”分类导航，进入到全部分类导航界面，把国旅相关内容的导航集成到一个界面里；（3）在景点界面里，将各个景点以列表的形式展现出来，提供全部、默认下拉菜单效果显示；（4）在中国国旅微信小程序界面里，提供购票的界面，填写个人相关信息，可以进行购票；（5）在填写表单选择获知渠道时，以弹出窗口的形式提供单选列表，供用户选择获知国旅渠道的情况。 二、项目准备1.设计思路（1）设计底部标签导航时，准备好底部标签导航的图标，并建立5个相应的页面；（2）设计中国国旅首页轮播效果时，准备好首页中需要轮播的图片；（3）动态循环展现出宫格导航；（4）设计全部分类导航3块区域内容：玩转旅游、特色游玩、我的旅游；（5）现金券界面设计难点在于下拉菜单筛选条件设计，将其置于最顶层；（6）把表单数据提交给后台，保存到本地里。2.相关知识点（1）在界面布局的时候，微信小程序的组件的使用；（2）界面样式设计，需写wxss样式进行界面的美化和渲染；（3）将数据缓存到本地，需要调用wx.setStorageSync这个API接口，进行缓存数据；（4）界面跳转需要使用wx.navigateTo这个API接口，进行界面跳转。三、项目准备工作（1）首先需要准备一个AppID；（2）准备图片，放置在images/对应的文件夹下。四、项目实施1. 底部标签导航设计；2. 景点轮播效果设计；3宫格导航设计；4更多分类导航设计；5. 景点下拉菜单筛选条件设计；6. 景点列表页设计；7. 中国国旅购票界面设计；8. 获知渠道弹出层设计。练习