《微信小程序开发案例教程》教案 第21课 “私房菜馆”微信小程序（一）.docx

PAGE6

PAGE6

PAGE3

PAGE3

PAGE

PAGE6

PAGE

PAGE3

PAGE

PAGE1

课题

“私房菜馆”微信小程序（一）

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解微信小程序功能设计的相关知识

（2）掌握微信小程序项目的创建与配置方法

素质目标：

增强化繁为简、系统化处理问题的能力

在实践中学真知、悟真谛，加强磨练、增长本领

提高运用理论知识解决实际问题的能力

教学重难点

教学重点：微信小程序项目的创建与配置方法

教学难点：能够分析项目需求，设计功能模块

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学设计

第1节课：?课前任务→考勤（2min）→问题导入（5min）→传授新知（38min）

第2节课：问题导入（5min）→任务实施（35min）→课堂小结（3min）→作业布置（2min）

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件完成课前任务

请大家提前复习微信小程序的框架、组件、API等相关知识。

【学生】完成课前任务

通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣

考勤

（2min）

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

培养学生的组织纪律性，掌握学生的出勤情况

问题导入

（5min）

【教师】创设情景，并组织学生讨论下列问题：

如果?家阅读类APP只是单纯将内容聚类和搜索的功能移植到微信?程序，并不能给?户带来更多期待，也很难做到让?户主动去唤醒?程序。如果跳出APP主营业务，回归阅读这件事本?，?户在开始阅读之前如何引起阅读兴趣。

（1）从?前业务?类出发，?户究竟需要什么样的服务？

（2）?户在进?APP前和离开APP后，场景上需要有什么补充？

【学生】聆听、思考、讨论、小组代表上台回答问题

【教师】总结学生的回答引入要讲的知识，板书“功能设计”

通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，介绍需求分析、功能模块设计、小程序目录结构等知识

一、需求分析

伴随着餐饮业“互联网+”的热潮，利用小程序点餐已成为餐饮行业的新潮流。顾客使用智能手机扫描商家提供的二维码或搜索商家的小程序，可以进入点餐小程序自助点餐，无须店员一对一服务，这样不仅可以有效提高点餐效率，节省商家的服务成本，还可以提升顾客的用餐体验。

“私房菜馆”微信小程序是一个用于餐馆点餐的小程序，用户可以在小程序中选择用餐人数、收藏店铺、点餐、支付（弹出支付成功对话框）等。

“首页”页面“我的”页面

“点餐”页面

“订单详情”页面

?【教师】随机邀请学生回答以下问题：

创建“私房菜馆”微信小程序，你觉得应该有哪些模块需求？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

二、功能模块设计

“私房菜馆”微信小程序包括底部导航栏，以及“首页”“我的”“点餐”和“订单详情”4个页面。底部导航栏实现切换“首页”和“我的”页面功能。

“私房菜馆”微信小程序的页面功能模块设计

（1）“首页”页面：实现选择用餐人数、跳转到“点餐”页面功能。

（2）“我的”页面：实现设置用户头像、展示信息功能。

（3）“点餐”页面：包括店铺招牌、菜单及购物车3部分，店铺招牌部分实现显示店铺信息、轮播公告，以及收藏或取消收藏店铺功能；菜单部分实现显示菜品及添加菜品到购物车功能；购物车部分实现动态计算购物车中菜品数量和订单金额，以及跳转到“订单详情”页面功能。

（4）“订单详情”页面：实现显示订单详情及支付（弹出支付成功对话框）功能。

?【教师】随机邀请学生回答以下问题：

怎样认识一件事物，应该从那几个方面考虑？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

三、小程序目录结构

“私房菜馆”微信小程序项目主要有imgs（图片资源文件夹）、pages（页面文件夹）、app.js（全局逻辑文件）、app.json（全局配置文件）、app.wxss（全局样式文件）等文件或文件夹。其中，pages文件夹包含index（首页）、me（我的）、shop（点餐）、order（订单详情）4个页面文件夹。

“私房菜馆”微信小程序的目录结构

【学生】聆听、理解、记忆

通过教师的讲解和引导，使学生了解微信小程序功能设计的需求分析、设计结构，对微信小程序功能设计有一个初步的认识