微信小程序开发项目实战（微课版）教案 项目5 新闻页面模块开发

《微信小程序开发》教学设计课程名称：微信小程序开发授课年级：授课学期：教师姓名：20年月日课题名称新闻页面模块开发计划学时8学时内容分析在学习了小程序的基础知识以及页面布局之后，读者可以开始尝试创建一个小程序前端综合设计实例。本项目以“梅园”为主题，带领读者从页面创建到数据请求，讲解如何实现一个带有新闻、产品页面的简易小程序。教学目标及基本要求掌握静态数据的定义与接口的使用。理解新闻列表页与新闻详情页数据的读取。掌握利用本地缓存的写入与读取实现收藏功能。掌握按钮和菜单转发分享的基本方法和技巧。掌握背景音乐的调用以及监听方法。教学重点新闻列表页与新闻详情页数据的读取。利用本地缓存的写入与读取实现收藏功能。教学难点利用本地缓存的写入与读取实现收藏功能教学方式以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。图教学方法任务驱动教学法任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。项目教学法在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。小组协作教学法教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。案例式教学法案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。教学过程梅园-首页模块开发项目创建1.新建小程序项目图创建新项目2.新建页面文件视图设计1.导航栏设计图3-5自定义导航栏效果tabBar组件的设计使用tabBar组件，完成“梅园”小程序底部导航，实现页面切换效果。效果所下图所示。图tabBar效果图在app.json文件中实现tabBar属性的设置，代码如下：课堂练习11、结合“新建页面文件”和“tabBar设计”增加一个新的“购物车”切换页面，图片素材使用images文件夹下面的cart.png和cart-active.png两张图片。2、查阅开发者文档，实现tabBar在页面顶部显示，如图所示。图3-7加上购物车页面的效果图3-8tabBar设置为顶部效果swiper轮播图组件的设计嵌套在swiper内部的swiper-item组件的属性只有一个item-id属性，用来标识每个swiper-item的id，其值类型为string。代码如下所示。实现“梅园”小程序首页的轮播图功能，效果如下图所示。图轮播图效果图步骤1：在index.js页面，定义sliderList数组内容。步骤2：在index.wxml页面，实现swiper组件，代码如下所示：步骤3：在index.wxss页面，定义轮播图样式，代码如下所示。课堂练习2将以上示例的轮播图修改如下效果，将轮播图设为圆角，特别注意轮播图在滑动过程中如果先显示直角，等滑动一整张之后才会变成圆角的现象，想一想，如何进行设置？弹性布局设计页面利用Flex弹性盒模型实现“梅园”小程序图片导航功能。完成效果如下图所示。步骤1：在index.js页面，定义navList数组内容。步骤2：在index.wxml页面，进行图片导航功能的布局设计，代码如下所示：步骤3：在index.wxss页面，定义图片导航功能样式，代码如下所示。课堂练习3查看小程序开发文档，查找navigator组件的属性，对示例3.1的图片导航加上跳转链接，实现跳转到news页面。scroll-view组件的设计利用scroll-view组件实现“梅园”小程序“推荐美景”功能。完成效果如下图所示。图3-13“推荐美景”功能步骤1：在index.js页面，定义recomList数组内容。步骤2：在index.wxml页面，进行“推荐美景”功能的布局设计，代码如下所示：步骤3：在index.wxss页面，定义“推荐美景”功能样式，代码如下所示。课堂练习4实现顶部导航，使用scroll-view组件实现内容页的滑动功能，效果如下图所示。6.公共样式的设计步骤1：打开app.wxss页面，定义一个公共的样式，实现页面功能之间的间隔。步骤2：打开index.wxml页面，在图片导航和推荐美图之间，实现app.wxss里定义的样式。7.弹性布局实现最新产品图最新产品效果图步骤1：在in