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

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

《《微信小程序贯穿式项目实战》教案.docx》由会员分享，可在线阅读，更多相关《《微信小程序贯穿式项目实战》教案.docx（26页珍藏版）》请在冰点文库上搜索。

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

《微信小程序开发》课程教案

课程

名称

微信小程序开发

总计：

48学时

课程

类别

专业选修课

学分

3.0

周学时：

04学时

课程

编码

开课

学期

任课

教师

职称

授课

对象

具有数据库、WEB开发或前端基础的学生

选课

人数

教材

名称

微信小程序贯穿式项目实战

作者

出版社及

出版时间

课程

简介

随着社会的发展，互联网新技术日益层出不穷。

根植于微信内部的微信小程序，由于微信本身强大的社交属性带来了巨大的流量和超高的商业价值，其涉及的应用领域也在日益扩大，不久的将来很可能超过APP的数量。

微信小程序（MiniProgram）是一种轻量级的应用，它实现了应用“触手可及”的梦想，用户无需下载安装即可在微信中使用小程序。

本课程将以项目驱动为宗旨，以丰富案例作实践，从零开始讲授微信小程序开发的入门基础知识与开发技巧。

本课程基于微信小程序平台开发，从基础开始学习，循序渐进，通过理论知识与大量的案例来介绍微信小程序开发的各方面知识。

具体内容包括：

微信小程序的前端基础知识、小程序项目全局配置、页面配置以及生命周期、小程序开发的页面布局、样式、组件使用、云开发的项目构建及数据库、API函数的使用，最后讲解“扶贫超市购物程序”微信小程序项目案例的综合设计与完整实现。

通过本课程的学习，使学生对微信小程序有较好的理解，对小程序的开发有较好的掌握。

专业技能方面，加强实训教学，通过大量的上机练习、代码阅读、代码改错、规范化检查，训练学生编写程序的熟练度和规范性；通过项目实践，提升动手能力，将所学知识整合运用到项目中。

职业素质方面，通过项目组角色分配、技术研讨等多种训练手段，培养学生具备良好的职业习惯，实现学生在校即具备准职业人素养的目标。

教学

目的

本课程将以项目驱动为宗旨，以丰富案例作实践，并以“扶贫超市购物程序”项目作为贯穿课程的实战项目，从零开始系统讲授微信小程序开发的入门基础知识与开发技巧。

结合课堂讲授、课程实验、网络教学资源共享等方式，使学生系统地理解和掌握微信小程序的设计、开发和实现方法。

教学

方法

程序设计类的课程需要大量的实操训练，因而课程教学采用机房授课，便于加强学生实践操作，同时课堂教学与网络教学相结合，以提高学生的思维能力、综合能力与创新能力。

1.本课程主要采用机房授课，理论方面多媒体课件+板书，实践方面带领学生针对具体问题分析需求，设计解决方案，学习相关知识点和API，然后代码实现。

2.通过网络教学平台+课程实验+课程视频的授课方式，帮助学生理解重点难点内容。

2.师生通过电话、QQ、微信、课程网络教学平台留言窗口等多种方式建立联系、答疑。

3.通过案例演示和新技术新方法介绍，让学生学会使用文献检索工具查找资料并将理论与实际应用结合起来，激发学习兴趣。

课程

重点

课程的重点在于培养学生基于微信平台开发的能力，了解小程序框架原理，各类组件API的应用效果和使用方式，灵活应用前端基本编程方法和技巧，掌握微信小程序开发的完整设计、实现、测试和发布。

课程

难点

课程的难点在于培养学生面对具体需求独立思考、分析问题和创新设计的能力。

教学

要求

使学习者在学习过程中逐步理解微信小程序框架基本原理，熟悉常用的API，掌握各类组件及事件处理，能够结合Web后台实现程序前端设计，为学生学习后续从事计算机专业开发、考研、考软件设计师等打下良好的软件开发基础。

考核

方式

1.本课程以考核为主：

过程考评40%（平时作业20%+实验20%）+最终作品及答辩30%+报告30%

2.过程考评可增加在线测验，题型主要有：

选择题、填空题、简答题、代码阅读题、代码设计题。

3.实验注重过程考核：

包括平时的上机实验（20%）+结课前的机考（10%），上机实验包括：

实验预习（5%）、出勤率（5%）、完成情况（30%）、现场提问（30%）、实验报告（30%）。

实验内容主要是根据课程进度完成所需的项目功能，为最终实现完整项目做准备。

4.最终作品为微信小程序前端+PHP/Servlet后台的完整项目，作品发布并演示，撰写报告。

参考

资料

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

起周

止周

第1周~第12周

第 1 讲

授课内容

浅谈微信小程序

教学目的

与要求

了解小程序的诞生、特点和主要功能，学会如何注册开发者账号和完善信息、开发工具的下载与安装使用，以及理解简单小程序项目目录结构。

重点

难点

重点：

微信小程序发者账号的创建，开发者工具的使用。

难点：

熟悉开发者工具的使用及理解项目各类主体文件的作用。

教学进程

安排

1.1小程序简介

1.2小程序开发准备

1.3小程序开发工具的使用

1.4小程序项目目录结构

课后学习

任务布置

小程序开发者工具环境配置，完善开发者账号信息

简单小程序的调试运行和真机测试

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后总结分析

开发者账号注册的注意事项，运用开发者工具进行简单小程序项目真机调试，在手机端实现成功运行第一个微信小程序“Hello，Word！

”。

第 2 讲

授课内容

小程序的视图与渲染

教学目的

与要求

了解小程序的视图层及渲染过程，学会各种页面的数据绑定方法，标签渲染、模板与代码段的定义和引用使用等

重点

难点

重点：

WXML文件代码的基础语法，数据绑定与渲染标签。

难点：

条件渲染及列表渲染的方法，模板的引用。

教学进程

安排

2.1视图与渲染过程

2.2数据绑定

2.3渲染标签

2.4模板与引用

案例九九乘法表

课后学习

任务布置

完善九九乘法表案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

复习WXML、WXSS、JS代码语法，参考HTML网页知识。

 第 3 讲

授课内容

小程序的事件基础与项目基本配置

教学目的

与要求

理解小程序的事件与事件对象的概念，了解事件类型及事件绑定类型的知识；学会小程序项目的全局配置，掌握小程序的生命周期和全局变量与函数的用法。

重点

难点

重点：

常用的事件对象及其对应的绑定方式，项目的全局配置方法。

难点：

冒泡与非冒泡事件，小程序的生命周期。

教学进程

安排

3.1事件对象3.2事件类型3.3事件绑定类型

5.1app.json配置属性5.2页面配置

5.3窗口配置5.4tabBar配置

5.5网络超时配置5.6权限配置

5.7小程序的生命周期

案例使用app对象的案例

课后学习

任务布置

1.冒泡事件测试案例实现。

2.生命周期测试案例和app对象测试案例实现。

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

及时复习熟悉项目配置和生命周期的执行过程，并熟练使用事件和获取事件相关对象的数据信息。

第 4 讲

授课内容

小程序页面的配置与生命周期

教学目的

与要求

了解微信小程序页面的窗口配置，并能区分页面配置和全局配置；理解页面生命周期函数及执行过程，并结合新闻客户端案例掌握页面跳转和参数传递方法。

重点

难点

重点：

掌握页面生命周期函数，页面跳转和参数传递的过程。

难点：

理解小程序页面生命周期函数的执行顺序和过程。

教学进程

安排

6.1小程序的页面配置

6.2页面的生命周期

6.3页面跳转

6.4页面间的参数传递

案例新闻客户端

课后学习

任务布置

完善新闻客户端案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

复习页面生命周期函数的用法，页面的三种切换方式。

第 5 讲

授课内容

实战项目“扶贫超市”的前期工作

教学目的

与要求

完成“扶贫超市”项目Part1和Part2:

了解项目基本功能及需求分析，申请账号并新建项目；对项目进行页面框架配置，主要包含项目目录整理、项目tarBar配置以及项目窗口配置。

重点

难点

重点：

项目需求分析和功能模块划分，申请账号，创建项目框架并进行项目目录结构的搭建与全局配置

难点：

需求分析和功能模块划分，页面框架的全局设计与属性值配置

教学进程

安排

4.1项目背景与需求

4.2开发准备

7.1项目目录整理

7.2项目tabBar配置

7.3项目窗口配置

课后学习

任务布置

完善该项目的前期框架设计与tabBar和window配置

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

熟悉新建小程序项目的流程步骤，并熟练掌握相关属性配置

 第 6讲

授课内容

页面布局

教学目的

与要求

掌握视图层和基础布局模型flex的用法，相对定位与绝对定位布局，并通过简易计算器案例进行布局实战

重点

难点

重点：

flex布局与相对、绝对定位布局。

难点：

flex布局的理解和配置。

教学进程

安排

8.1页面布局概述

8.2flex布局基本概念

8.3flex布局案例

8.4flex容器属性详解

8.5flex项目属性详解

8.6相对定位和绝对定位布局

案例简易计算器

课后学习

任务布置

1.课本flex布局相关内容的源码学习；

2.完善简易计算器案例。

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后总结分析

复习flex布局，相对定位与绝对定位的样式编写。

   第 7讲

授课内容

小程序的样式基础

教学目的

与要求

掌握样式的基本使用、样式属性的配置，以及样式选择器的使用。

重点

难点

重点：

掌握样式的基本用法和样式属性的配置。

难点：

样式选择器的用法。

教学进程

安排

9.1样式的基本使用

9.2样式的属性

9.3样式选择器的使用

课后学习

任务布置

1.尺寸属性测试案例

2.边距属性测试案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后总结分析

复习样式选择器的用法。

第 8 讲

授课内容

组件

教学目的

与要求

掌握视图容器、基础内容、表单组件的用法

重点

难点

重点：

掌握小程序视图层各类组件的用法。

难点：

小程序组件的运用场景，各组件的主要属性配置及效果。

教学进程

安排

10.1初始组件

10.2视图容器组件

10.3基础内容组件

10.4表单组件

课后学习

任务布置

各组件的测试案例源码学习

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

及时复习熟悉各组件的使用场景及API函数用法。

第 9 讲

授课内容

组件（续）

教学目的

与要求

掌握form表单提交组件、导航组件、多媒体组件和地图组件的用法

重点

难点

重点：

掌握小程序视图层各类组件的用法。

难点：

小程序组件的运用场景，各组件的主要属性配置及效果。

教学进程

安排

10.5form表单提交组件

10.6导航组件navigator

10.7多媒体组件

10.8地图map

课后学习

任务布置

各组件的测试案例源码学习

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

及时复习熟悉各组件的使用场景及API函数用法。

第 10 讲

授课内容

操作反馈工具与简单的界面API

教学目的

与要求

了解四种操作反馈工具toast、modal、loading和action-sheet的基本使用，并结合案例学习几种页面反馈API的基本使用，包括设置背景、设置tabBar、动态加载字体、下拉刷新等

重点

难点

重点：

小程序各种页面反馈工具和界面API的使用。

难点：

tabBar与页面导航的切换方法，Background背景样式的设置。

教学进程

安排

11.1toast吐司提示

11.2modal弹窗提示

11.3loading加载提示

11.4action-sheet操作菜单

11.5背景Background样式

11.6动态设置TabBar属性

11.7加载第三方字体wx.loadFontFace

11.8下拉刷新PullDownRefresh

课后学习

任务布置

操作反馈测试案例源码学习

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

总结各种操作反馈工具的使用场景及API函数的用法。

第 11 讲

授课内容

【扶贫超市Part3】主要页面的UI设计

教学目的

与要求

学习扶贫超市项目的主要页面UI设计过程，包括首页页面、分类页面、购物车页面、“我的”页面、管理端商品管理页面等页面的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面板进行样式调试。

第 12 讲

授课内容

认识云开发项目

教学目的

与要求

了解微信小程序云开发的概念及其组成部分，通过创建云开发项目实例讲解构建和部署云环境，完成新建云函数、获取openid、管理文件和操作数据库等任务内容。

重点

难点

重点：

云函数的创建和调用，云开发数据库的原理理解和操作使用。

难点：

云开发数据库的原理理解和操作过程。

教学进程

安排

13.1云开发概念与组成部分

13.2创建与开通云开发项目

13.4新建云函数案并部署例

13.5云开发之用户管理案例

13.6上传文件案例以及云空间文件管理

13.7数据库操作案例

课后学习

任务布置

查阅云开发文档，完善并实现数据库操作案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

复习云开发项目的操作流程。

第 13讲

授课内容

云开发数据库

教学目的

与要求

了解云开发数据库的概念，并学习其数据类型、权限控制、安全规则等，以及云开发数据库的复杂操作。

重点

难点

重点：

掌握小程序云开发的数据库类型和权限控制，并学会基本的数据库操作。

难点：

云开发数据库的查询匹配及联表查询。

教学进程

安排

14.1基本概念

14.2数据类型

14.3权限控制

14.4数据库复杂操作

课后学习

任务布置

完成云开发数据库的复杂操作联表查询

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

复习小程序云开发数据库的基本操作方法。

 第 14讲

授课内容

云函数及其调试

教学目的

与要求

掌握小程序的云函数新建、部署和调用过程，包括云函数的常见操作和调试测试。

重点

难点

重点：

云函数中JS语法书写、函数调用和调试。

难点：

云函数的云端调试和本地调试方法。

教学进程

安排

15.1云函数基础

15.2wx-server-sdk初始化

15.3云函数的常见操作

15.4云开发调试

课后学习

任务布置

云函数调用及云开发云端和本地调试练习

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

及时复习云函数常见操作方法。

第 15讲

授课内容

【扶贫超市Part4】构建数据库与商品管理

教学目的

与要求

讲解扶贫超市项目的后台部分，主要包括数据库设计和云端集合操作，并结合云端数据库完善项目中的商品管理wxml代码和JS逻辑函数设计。

重点

难点

重点：

数据库的设计，相关逻辑函数的编写。

难点：

项目中的云函数的调用。

教学进程

安排

16.1建立数据库

16.2用户与管理员身份的登录判断

16.3添加商品

16.4修改商品信息

16.5删除商品

课后学习

任务布置

完善本项目数据库设计与商品管理部分的编码。

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

复习数据库的设计方法以及UI样式设计。

  第 16讲

授课内容

系统底层的基础API

教学目的

与要求

了解获取系统信息API、定时器API和扫码API，掌握API函数的调试方法。

重点

难点

重点：

小程序系统底层API的用法和调试方法。

难点：

小程序开发工具调试模式调试方法及断点调试方法。

教学进程

安排

17.1获取系统信息的API

17.2定时器

17.3调试API

17.4扫码

课后学习

任务布置

实现定时器测试案例，Console测试案例，scanCode示例案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

熟悉其他系统底层API的用法和API调试方法。

第 17讲

授课内容

网络与文件上传API

教学目的

与要求

了解和掌握微信小程序网络API和文件API的用法，包括发起和中断请求，文件传输、保存、信息获取，文件的打开删除等操作，以及号码归属地查询小程序案例讲解wx.request的应用。

重点

难点

重点：

小程序各类网络API和文件API的用法与限制。

难点：

网络请求的原理，本地文件与临时文件区别用法，以及各类API对文件源的要求。

教学进程

安排

18.1网络基础

18.2wx.request

18.3图片选择、预览与保存

18.4文件的上传与下载

案例号码归属地查询小程序

课后学习

任务布置

完善号码归属地查询小程序案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

复习网络请求和文件上传的原理和流程，以及小程序对应API

的用法。

第 18讲

授课内容

数据缓存API

教学目的

与要求

掌握微信小程序数据缓存API的用法，包括本地缓存、数据的存储、获取、删除、清空等操作，并讲解与缓存相关的API函数测试案例。

重点

难点

重点：

小程序各类数据缓存API的用法。

难点：

异步数据与同步数据的区别，缓存原理与限制。

教学进程

安排

19.1wx.setStorage写入缓存

19.2wx.getStorage读取缓存

19.3wx.removeStorage移除缓存

19.4wx.getStorageInfo获取全部缓存信息

19.5wx.clearStorage清理缓存

19.6数据缓存API函数同步版本

案例数据缓存API测试案例

课后学习

任务布置

完善数据缓存API测试案例

主要

参考资料

教材：

[1]兰红.微信小程序贯穿式项目实战[M].北京:

清华大学出版社,2021.

[2]周文洁.微信小程序开发零基础入门[M].北京:

清华大学出版社,2019.

课后

总结分析

掌握缓存原理和功能作用，区分异步数据与同步数据。

第 19讲

授课内容

位置API

教学目的

与要求

掌握微信小程序位置API的用法，包括位置信息的获取，获取和选择位置，查看位置，地图组件控制，并讲解位置API测试和路径导航案例。

重点

难点

重点：

小程序各类位置API的用法。

难点：

两种地图坐标系的区别，标记的处理。

教学进程

安排

20.1wx.getLocation获取当前位置

20.2wx.chooseLocation用地图选择位置

20.3wx.openLocation用内置地图查看位置

20.4wx.onLocationChange监听实时位置

20.5wx.offLocationChange