《微信小程序贯穿式项目实战》教案.docx

1、微信小程序贯穿式项目实战教案微信小程序开发课程教案课 程名 称微信小程序开发总 计： 48 学时课 程类 别专业选修课学 分3.0周学时： 04 学时 课 程编 码 开 课学 期任 课教 师 职 称 授 课对 象具有数据库、WEB开发或前端基础的学生选 课人 数 教 材名 称微信小程序贯穿式项目实战作 者出版社及出版时间课 程简 介随着社会的发展，互联网新技术日益层出不穷。根植于微信内部的微信小程序，由于微信本身强大的社交属性带来了巨大的流量和超高的商业价值，其涉及的应用领域也在日益扩大，不久的将来很可能超过APP的数量。微信小程序(Mini Program)是一种轻量级的应用，它实现了应用“

2、触手可及”的梦想，用户无需下载安装即可在微信中使用小程序。本课程将以项目驱动为宗旨，以丰富案例作实践，从零开始讲授微信小程序开发的入门基础知识与开发技巧。本课程基于微信小程序平台开发，从基础开始学习，循序渐进，通过理论知识与大量的案例来介绍微信小程序开发的各方面知识。具体内容包括：微信小程序的前端基础知识、小程序项目全局配置、页面配置以及生命周期、小程序开发的页面布局、样式、组件使用、云开发的项目构建及数据库、API函数的使用，最后讲解“扶贫超市购物程序”微信小程序项目案例的综合设计与完整实现。通过本课程的学习，使学生对微信小程序有较好的理解，对小程序的开发有较好的掌握。专业技能方面，加强实训

3、教学，通过大量的上机练习、代码阅读、代码改错、规范化检查，训练学生编写程序的熟练度和规范性；通过项目实践，提升动手能力，将所学知识整合运用到项目中。职业素质方面，通过项目组角色分配、技术研讨等多种训练手段，培养学生具备良好的职业习惯，实现学生在校即具备准职业人素养的目标。教 学目 的本课程将以项目驱动为宗旨，以丰富案例作实践，并以“扶贫超市购物程序”项目作为贯穿课程的实战项目，从零开始系统讲授微信小程序开发的入门基础知识与开发技巧。结合课堂讲授、课程实验、网络教学资源共享等方式，使学生系统地理解和掌握微信小程序的设计、开发和实现方法。教 学方 法程序设计类的课程需要大量的实操训练，因而课程教学

4、采用机房授课，便于加强学生实践操作，同时课堂教学与网络教学相结合，以提高学生的思维能力、综合能力与创新能力。1.本课程主要采用机房授课，理论方面多媒体课件+板书，实践方面带领学生针对具体问题分析需求，设计解决方案，学习相关知识点和API，然后代码实现。2.通过网络教学平台+课程实验+课程视频的授课方式，帮助学生理解重点难点内容。2.师生通过电话、QQ、微信、课程网络教学平台留言窗口等多种方式建立联系、答疑。3.通过案例演示和新技术新方法介绍，让学生学会使用文献检索工具查找资料并将理论与实际应用结合起来，激发学习兴趣。课 程重 点课程的重点在于培养学生基于微信平台开发的能力，了解小程序框架原理，

5、各类组件API的应用效果和使用方式，灵活应用前端基本编程方法和技巧，掌握微信小程序开发的完整设计、实现、测试和发布。课 程难 点课程的难点在于培养学生面对具体需求独立思考、分析问题和创新设计的能力。教 学要 求使学习者在学习过程中逐步理解微信小程序框架基本原理，熟悉常用的API，掌握各类组件及事件处理，能够结合Web后台实现程序前端设计，为学生学习后续从事计算机专业开发、考研、考软件设计师等打下良好的软件开发基础。考 核方 式1.本课程以考核为主：过程考评40%（平时作业20%+实验20%）+最终作品及答辩30%+报告30%2.过程考评可增加在线测验，题型主要有：选择题、填空题、简答题、代码阅

6、读题、代码设计题。3.实验注重过程考核：包括平时的上机实验（20%）+结课前的机考（10%），上机实验包括：实验预习(5%)、出勤率(5%)、完成情况(30%)、现场提问(30%)、实验报告(30%)。实验内容主要是根据课程进度完成所需的项目功能，为最终实现完整项目做准备。4. 最终作品为微信小程序前端+PHP/Servlet后台的完整项目，作品发布并演示，撰写报告。参 考资 料1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019. 起 周止 周第1周第12周第1讲授课内容浅谈微信小程序教学目的与要求了

7、解小程序的诞生、特点和主要功能，学会如何注册开发者账号和完善信息、开发工具的下载与安装使用，以及理解简单小程序项目目录结构。重点难点重点：微信小程序发者账号的创建，开发者工具的使用。难点：熟悉开发者工具的使用及理解项目各类主体文件的作用。教学进程安排1.1 小程序简介1.2 小程序开发准备1.3 小程序开发工具的使用1.4 小程序项目目录结构课后学习任务布置小程序开发者工具环境配置，完善开发者账号信息简单小程序的调试运行和真机测试主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.

8、课后总结分析开发者账号注册的注意事项，运用开发者工具进行简单小程序项目真机调试，在手机端实现成功运行第一个微信小程序“Hello，Word！”。第2讲授课内容小程序的视图与渲染教学目的与要求了解小程序的视图层及渲染过程，学会各种页面的数据绑定方法，标签渲染、模板与代码段的定义和引用使用等重点难点重点：WXML文件代码的基础语法，数据绑定与渲染标签。难点：条件渲染及列表渲染的方法，模板的引用。教学进程安排2.1 视图与渲染过程2.2 数据绑定2.3 渲染标签2.4 模板与引用案例 九九乘法表课后学习任务布置完善九九乘法表案例主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学

9、出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习WXML、WXSS、JS代码语法，参考HTML网页知识。第3讲授课内容小程序的事件基础与项目基本配置教学目的与要求理解小程序的事件与事件对象的概念，了解事件类型及事件绑定类型的知识；学会小程序项目的全局配置，掌握小程序的生命周期和全局变量与函数的用法。重点难点重点：常用的事件对象及其对应的绑定方式，项目的全局配置方法。难点：冒泡与非冒泡事件，小程序的生命周期。教学进程安排3.1 事件对象 3.2 事件类型 3.3 事件绑定类型5.1 app.json配置属性 5.2 页面配置5.3 窗口

10、配置 5.4 tabBar配置5.5 网络超时配置 5.6 权限配置5.7 小程序的生命周期案例 使用app对象的案例课后学习任务布置1. 冒泡事件测试案例实现。2. 生命周期测试案例和app对象测试案例实现。主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析及时复习熟悉项目配置和生命周期的执行过程，并熟练使用事件和获取事件相关对象的数据信息。第4讲授课内容小程序页面的配置与生命周期教学目的与要求了解微信小程序页面的窗口配置，并能区分页面配置和全局配置；理解页面生命周期

11、函数及执行过程，并结合新闻客户端案例掌握页面跳转和参数传递方法。重点难点重点：掌握页面生命周期函数，页面跳转和参数传递的过程。难点：理解小程序页面生命周期函数的执行顺序和过程。教学进程安排6.1 小程序的页面配置6.2 页面的生命周期 6.3 页面跳转 6.4 页面间的参数传递案例 新闻客户端课后学习任务布置完善新闻客户端案例主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习页面生命周期函数的用法，页面的三种切换方式。第5讲授课内容实战项目“扶贫超市”的前期工作教学

12、目的与要求完成“扶贫超市”项目Part1和Part2:了解项目基本功能及需求分析，申请账号并新建项目；对项目进行页面框架配置，主要包含项目目录整理、项目tarBar配置以及项目窗口配置。重点难点重点：项目需求分析和功能模块划分，申请账号，创建项目框架并进行项目目录结构的搭建与全局配置难点：需求分析和功能模块划分，页面框架的全局设计与属性值配置教学进程安排4.1 项目背景与需求 4.2 开发准备7.1 项目目录整理7.2 项目tabBar配置7.3 项目窗口配置课后学习任务布置完善该项目的前期框架设计与tabBar和window配置主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:

13、清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析熟悉新建小程序项目的流程步骤，并熟练掌握相关属性配置第6讲授课内容页面布局教学目的与要求掌握视图层和基础布局模型flex的用法，相对定位与绝对定位布局，并通过简易计算器案例进行布局实战重点难点重点：flex布局与相对、绝对定位布局。难点：flex布局的理解和配置。教学进程安排8.1 页面布局概述8.2 flex布局基本概念8.3 flex布局案例8.4 flex容器属性详解8.5 flex项目属性详解8.6 相对定位和绝对定位布局案例 简易计算器课后学习任务布置1. 课本flex布局

14、相关内容的源码学习；2. 完善简易计算器案例。主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习flex布局，相对定位与绝对定位的样式编写。第7讲授课内容小程序的样式基础教学目的与要求掌握样式的基本使用、样式属性的配置，以及样式选择器的使用。重点难点重点：掌握样式的基本用法和样式属性的配置。难点：样式选择器的用法。教学进程安排9.1 样式的基本使用9.2 样式的属性9.3 样式选择器的使用课后学习任务布置1. 尺寸属性测试案例2. 边距属性测试案例主要参考资料教材：

15、1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习样式选择器的用法。第8讲授课内容组件教学目的与要求掌握视图容器、基础内容、表单组件的用法重点难点重点：掌握小程序视图层各类组件的用法。难点：小程序组件的运用场景，各组件的主要属性配置及效果。教学进程安排10.1 初始组件10.2 视图容器组件10.3 基础内容组件10.4 表单组件课后学习任务布置各组件的测试案例源码学习主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发

16、零基础入门M. 北京:清华大学出版社,2019.课后总结分析及时复习熟悉各组件的使用场景及API函数用法。第9讲授课内容组件（续）教学目的与要求掌握form表单提交组件、导航组件、多媒体组件和地图组件的用法重点难点重点：掌握小程序视图层各类组件的用法。难点：小程序组件的运用场景，各组件的主要属性配置及效果。教学进程安排10.5 form表单提交组件10.6 导航组件navigator10.7 多媒体组件10.8 地图map课后学习任务布置各组件的测试案例源码学习主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北

17、京:清华大学出版社,2019.课后总结分析及时复习熟悉各组件的使用场景及API函数用法。第10讲授课内容操作反馈工具与简单的界面API教学目的与要求了解四种操作反馈工具toast、modal、loading和action-sheet的基本使用，并结合案例学习几种页面反馈API的基本使用，包括设置背景、设置tabBar、动态加载字体、下拉刷新等重点难点重点：小程序各种页面反馈工具和界面API的使用。难点：tabBar与页面导航的切换方法，Background背景样式的设置。教学进程安排11.1 toast吐司提示11.2 modal弹窗提示11.3 loading加载提示11.4 action-

18、sheet操作菜单11.5 背景Background样式11.6 动态设置TabBar属性11.7 加载第三方字体wx.loadFontFace11.8 下拉刷新PullDownRefresh课后学习任务布置操作反馈测试案例源码学习主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析总结各种操作反馈工具的使用场景及API函数的用法。第11讲授课内容【扶贫超市Part3】主要页面的UI设计教学目的与要求学习扶贫超市项目的主要页面UI设计过程，包括首页页面、分类页面、购物车页

19、面、“我的”页面、管理端商品管理页面等页面的UI设计重点难点重点：各主要页面的UI设计和样式代码编写。难点：页面UI的flex布局和样式效果调试。教学进程安排12.1 首页UI设计 12.2 分类页面UI设计 12.3 购物车页面UI设计 12.4 “我的”页面UI设计 12.5 管理员端商品管理页面UI设计课后学习任务布置完善扶贫超市项目各主要页面UI设计主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习flex布局知识并学会灵活运用flex布局以及WXML面板进

20、行样式调试。第12讲授课内容认识云开发项目教学目的与要求了解微信小程序云开发的概念及其组成部分，通过创建云开发项目实例讲解构建和部署云环境，完成新建云函数、获取openid、管理文件和操作数据库等任务内容。重点难点重点：云函数的创建和调用，云开发数据库的原理理解和操作使用。难点：云开发数据库的原理理解和操作过程。教学进程安排13.1 云开发概念与组成部分13.2 创建与开通云开发项目 13.4 新建云函数案并部署例 13.5 云开发之用户管理案例 13.6 上传文件案例以及云空间文件管理 13.7 数据库操作案例课后学习任务布置查阅云开发文档，完善并实现数据库操作案例主要参考资料教材：1 兰红

21、.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习云开发项目的操作流程。第13讲授课内容云开发数据库教学目的与要求了解云开发数据库的概念，并学习其数据类型、权限控制、安全规则等，以及云开发数据库的复杂操作。重点难点重点：掌握小程序云开发的数据库类型和权限控制，并学会基本的数据库操作。难点：云开发数据库的查询匹配及联表查询。教学进程安排14.1 基本概念14.2 数据类型14.3 权限控制 14.4 数据库复杂操作课后学习任务布置完成云开发数据库的复杂操作联表查询主要参考资料教材：1 兰红.微

22、信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习小程序云开发数据库的基本操作方法。第14讲授课内容云函数及其调试教学目的与要求掌握小程序的云函数新建、部署和调用过程，包括云函数的常见操作和调试测试。重点难点重点：云函数中JS语法书写、函数调用和调试。难点：云函数的云端调试和本地调试方法。教学进程安排15.1 云函数基础 15.2 wx-server-sdk初始化15.3 云函数的常见操作 15.4 云开发调试课后学习任务布置云函数调用及云开发云端和本地调试练习主要参考资料教材：1 兰红.微信小

23、程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析及时复习云函数常见操作方法。第15讲授课内容【扶贫超市Part4】构建数据库与商品管理教学目的与要求讲解扶贫超市项目的后台部分，主要包括数据库设计和云端集合操作，并结合云端数据库完善项目中的商品管理wxml代码和JS逻辑函数设计。重点难点重点：数据库的设计，相关逻辑函数的编写。难点：项目中的云函数的调用。教学进程安排16.1 建立数据库 16.2 用户与管理员身份的登录判断 16.3 添加商品 16.4 修改商品信息 16.5 删除商品课后学习任务布置完

24、善本项目数据库设计与商品管理部分的编码。主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习数据库的设计方法以及UI样式设计。第16讲授课内容系统底层的基础API教学目的与要求了解获取系统信息API、定时器API和扫码API，掌握API函数的调试方法。重点难点重点：小程序系统底层API的用法和调试方法。难点：小程序开发工具调试模式调试方法及断点调试方法。教学进程安排17.1 获取系统信息的API 17.2 定时器 17.3 调试API 17.4 扫码 课后学习任务布置

25、实现定时器测试案例，Console测试案例，scanCode示例案例主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析熟悉其他系统底层API的用法和API调试方法。第17讲授课内容网络与文件上传API教学目的与要求了解和掌握微信小程序网络API和文件API的用法，包括发起和中断请求，文件传输、保存、信息获取，文件的打开删除等操作，以及号码归属地查询小程序案例讲解wx.request的应用。重点难点重点：小程序各类网络API和文件API的用法与限制。难点：网络请求的原理，

26、本地文件与临时文件区别用法，以及各类API对文件源的要求。教学进程安排18.1 网络基础18.2 wx.request 18.3 图片选择、预览与保存 18.4 文件的上传与下载 案例 号码归属地查询小程序课后学习任务布置完善号码归属地查询小程序案例主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析复习网络请求和文件上传的原理和流程，以及小程序对应API的用法。第18讲授课内容数据缓存API教学目的与要求掌握微信小程序数据缓存API的用法，包括本地缓存、数据的存储、获取

27、、删除、清空等操作，并讲解与缓存相关的API函数测试案例。重点难点重点：小程序各类数据缓存API的用法。难点：异步数据与同步数据的区别，缓存原理与限制。教学进程安排19.1 wx.setStorage写入缓存19.2 wx.getStorage读取缓存19.3 wx.removeStorage移除缓存19.4 wx.getStorageInfo获取全部缓存信息19.5 wx.clearStorage清理缓存19.6 数据缓存API函数同步版本 案例 数据缓存API测试案例课后学习任务布置完善数据缓存API测试案例主要参考资料教材：1 兰红.微信小程序贯穿式项目实战M. 北京:清华大学出版社,2

28、021.2 周文洁.微信小程序开发零基础入门M. 北京:清华大学出版社,2019.课后总结分析掌握缓存原理和功能作用，区分异步数据与同步数据。第19讲授课内容位置API教学目的与要求掌握微信小程序位置API的用法，包括位置信息的获取，获取和选择位置，查看位置，地图组件控制，并讲解位置API测试和路径导航案例。重点难点重点：小程序各类位置API的用法。难点：两种地图坐标系的区别，标记的处理。教学进程安排20.1 wx.getLocation获取当前位置 20.2 wx.chooseLocation用地图选择位置 20.3 wx.openLocation用内置地图查看位置20.4 wx.onLocationChange监听实时位置20.5 wx.offLocationChange