微信小程序开发 教案 7.0 教案-中国国旅小程序.docx

《微信小程序开发 教案 7.0 教案-中国国旅小程序.docx》由会员分享，可在线阅读，更多相关《微信小程序开发 教案 7.0 教案-中国国旅小程序.docx（3页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课时内容教学目标教学重难点教学设计第一章微信小程序入门任务7.0中国国旅小程序中国国旅小程序能使用tabBar对象配置底部标签导航;能使用swiper组件实现景点轮播效果；能使用wx:for列表渲染的方式实现宫格导航图标;能定义宫格导航navBtn事件以实现导航链接跳转;能使用dl、dt、dd进行筛选条件布局；能定义菜单切换单击事件tapMainMenu；能使用表单组件制作表单页面。课时能使用tabBar对象配置底部标签导航； 能使用swiper组件实现景点轮播效果； 能使用wx:for列表渲染的方式实现宫格导航图标； 能定义宫格导航navBtn事件以实现导航链接跳转； 能使用祖、dt dd进

2、行筛选条件布局；能定义菜单切换单击事件tapMainMenu； 能使用表单组件制作表单页面。1 .教学思路：设计一个小程序中国国旅，参加文博会需要使用中国国旅App订机票、 领签到礼、兑好礼等，制作完成对应的功能。2 .教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、项目需求分析1 .项目描述参加文博会需要使用中国国旅App订机票、领签到礼、兑好礼等。由于中国国旅App 软件使用频率不是很高，因此我们可以做一个具有中国国旅App功能的微信小程序，需 要的时候搜索出来使用，主要界面如图所示。2 .项目分析中国国旅微信小程序需要完成以下主要功能：（1）完成底部标签导航功能、首页景

3、点轮播功能和宫格导航功能；（2）在首页里，单击“更多”分类导航，进入到全部分类导航界面，把国旅相关内容的导 航集成到一个界面里；（3）在景点界面里，将各个景点以列表的形式展现出来，提供全部、默认下拉菜单效果显 示；（4）在中国国旅微信小程序界面里，提供购票的界面，填写个人相关信息，可以进行购票；（5）在填写表单选择获知渠道时，以弹出窗口的形式提供单选列表，供用户选择获知国旅 渠道的情况。二、项目准备1 .设计思路（1）设计底部标签导航时，准备好底部标签导航的图标，并建立5个相应的页面；（2）设计中国国旅首页轮播效果时，准备好首页中需要轮播的图片；（3）动态循环展现出宫格导航；（4）设计全部分类

4、导航3块区域内容：玩转旅游、特色游玩、我的旅游；（5）现金券界面设计难点在于下拉菜单筛选条件设计，将其置于最顶层；（6）把表单数据提交给后台，保存到本地里。2 .相关知识点（1）在界面布局的时候，微信小程序的组件的使用；（2）界面样式设计，需写wxss样式进行界面的美化和渲染；（3）将数据缓存到本地，需要调用wx.setStorageSync这个API接口，进行缓存数据；（4）界面跳转需要使用wx.navigateTo这个API接口，进行界面跳转。三、项目准备工作（1）首先需要准备一个AppID；（2）准备图片，放置在images/对应的文件夹下。cart.pngQIdolly.pngbooklet.pngimage.pngcreditcard.pngslr.pngstar.pngtrain.pngtakeoff.png四、项目实施1 .底部标签导航设计；2 .景点轮播效果设计；3 .宫格导航设计；4 .更多分类导航设计；5 .景点下拉菜单筛选条件设计;6 .景点列表页设计；7 .中国国旅购票界面设计；8 .获知渠道弹出层设计。练习