微信小程序开发项目实战（微课版）教案 项目4 商城首页模块开发.docx

《微信小程序开发》

教学设计

课程名称：微信小程序开发

授课年级：

授课学期：

教师姓名：

20年月日

课题

名称

商城首页模块开发

计划

学时

8学时

内容

分析

在学习了小程序的基础知识以及页面布局之后，读者可以开始尝试创建一个小程序前端综合设计实例。本项目以“梅园”为主题，带领读者从页面创建到数据请求，讲解如何实现一个带有新闻、产品页面的简易小程序。

教学目

标及基

本要求

掌握小程序的基本架构和执行顺序。

理解tabBar、swiper和scroll-view三种组件的使用方法。

掌握利用Flex弹性盒模型设置首页模块样式和布局的方法。

掌握利用JavaScript程序设计的基本方法和技巧。

掌握小程序列表渲染的方法。

教学

重点

tabBar、swiper和scroll-view三种组件的使用方法。

利用JavaScript程序设计的基本方法和技巧。

教学

难点

小程序列表渲染的方法

教学

方式

以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。

图教学方法

任务驱动教学法

任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。

项目教学法

在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。

小组协作教学法

教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。

案例式教学法

案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。

教

学

过

程

项目创建

1.新建小程序项目

本项目名称命名为“wintersweet”，创建空白文件夹，选好目录后，输入AppID，开发模式选择“小程序”，初始模板选择“默认模板”，语言选择“JavaScript”。

图创建新项目

2.新建页面文件

本项目所有图片素材放置在images文件夹下，并在images下面按图片功能进分文件夹放置，例如tabs文件，放置的是导航栏里的icon图标。新建5个页面文件夹，分别是news新闻列表页，newsDetail新闻详情页、goods产品页、goodsDetail产品详情页、profile个人信息页。页面目录结构如下图所示：

视图设计

1.导航栏设计

小程序默认导航栏是黑底白字的效果，可以通过app.json中对window属性进行重新配置来定义导航栏效果。

表页面配置选项

属性

类型

默认值

描述

backgroundTextStyle

string

dark

下拉loading的样式，仅支持?dark?/?light

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色，如?#000000

navigationBarTitleText

string

导航栏标题文字内容

navigationBarTextStyle

string

white

导航栏标题颜色，仅支持?black?/?white

修改“梅园”小程序项目配置app.json方件，效果所下图所示。

图3-5自定义导航栏效果

tabBar组件的设计

图tabBar效果图

在app.json文件中实现tabBar属性的设置，代码如下：

课堂练习1

1、结合“新建页面文件”和“tabBar设计”增加一个新的“购物车”切换页面，图片素材使用images文件夹下面的cart.png和cart-active.png两张图片。

2、查阅开发者文档，实现tabBar在页