展开全文

目标3：掌握微信小程序的各类应用API使用技巧和云开发技能，理解其运行原理。

目标4：掌握HTML、CSS、Java知识并综合运用，包括布局样式设计和逻辑的处理等，根据应用需求实现完整的微信小程序项目的开发

表1 课程教学目标及毕业要求支撑对照列表

03

课程重点、难点

重点：小程序框架原理，各类视图组件API的效果和使用方式，网络通信、媒体组件应用、文件操作、读写缓存等应用，小程序云开发方法。

难点：理解native、视图层和渲染层的通信原理，掌握 网络通信、媒体组件应用、文件操作、读写缓存等机制原理与限制，canvas画图和动画设计，小程序云开发技巧等。

04

教学内容和学时分配

（一）第1章 浅谈微信小程序 2学时

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

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

难点：熟悉开发者工具的使用及理解小程序项目各类主体文件的作用。

(二）第 2 章 小程序的视图与渲染 2学时

主要内容：介绍小程序的视图层及渲染过程，讲解各种页面的数据绑定方法，使用模板与引用代码段的步骤及其相关案例。

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

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

(三）第 3 章 小程序的事件 1学时

主要内容：介绍小程序的事件与事件对象的概念，讲解事件类型及事件绑定类型的案例。

重点：常用的事件对象及其对应的绑定方式。

难点：事件的两大类型冒泡与非冒泡事件，以及如何阻止冒泡事件。

(四）第 4 章【扶贫超市Part1】开发准备 1学时

主要内容：介绍扶贫超市实战项目的基本功能及需求分析，申请账号并新建项目，完成扶贫超市项目的第一部分内容。

重点：项目需求分析和功能模块划分，申请账号并创建项目雏形框架。

难点：项目需求分析和功能模块划分。

(五）第 5 章 小程序项目的配置与生命周期1学时

主要内容：介绍小程序项目的app.json全局配置，讲解小程序的生命周期和全局变量与函数。

重点：小程序项目的全局配置，页面、窗口、tabBar等配置方法。

难点：小程序的生命周期，app对象和变量函数。

(六）第 6 章 小程序页面的配置与生命周期2学时

主要内容：讲解微信小程序页面的窗口配置，页面生命周期函数及执行过程，并结合新闻客户端案例学习页面跳转和参数传递。

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

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

(七）第 7 章【扶贫超市Part2】项目页面框架配置1学时

主要内容：完成扶贫超市项目页面框架配置，主要包含项目目录整理、项目tarBar配置以及项目窗口配置。

重点：项目目录结构的搭建与tarBar和window配置。

难点：项目页面框架的全局设计与属性值配置。

(八）第 8 章 页面布局2学时

主要内容：讲解视图层和基础布局模型flex的用法，相对定位与绝对定位布局，并通过简易计算器案例讲解布局实战。

重点：flex布局与相对、绝对定位布局。

难点：flex布局的理解和配置。

(九）第 9 章 小程序的样式基础2学时

主要内容：讲解样式的基本使用、样式属性的配置，以及样式选择器的使用。

重点：样式的基本用法和样式属性的配置。

难点：样式选择器的用法

(十）第 10 章 组件4学时

主要内容：按照功能分类依次介绍视图容器、基础内容、表单、导航、多媒体和地图组件的用法。

重点：掌握小程序视图层各类组件的用法

难点：小程序组件的运用场景，了解各组件的主要配置属性及效果

(十一）第 11 章 操作反馈工具与简单的界面API2学时

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

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

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

(十二）第 12 章【扶贫超市Part3】主要页面的UI2学时

主要内容：讲解扶贫超市项目的主要页面UI设计过程，包括首页页面、分类页面、购物车页面、“我的”页面、管理端商品管理页面等页面的UI设计。

重点：各主要页面的UI设计和样式代码编写。

难点：页面UI的flex布局和样式效果调试。

(十三）第 13 章 认识云开发项目2学时

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

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

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

(十四）第 14 章 云开发数据库2学时

主要内容：介绍云开发数据库的概念，并详细介绍其数据类型、权限控制、安全规则等，并演示云开发数据库的复杂操作。

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

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

(十五）第 15 章 云函数及其调试 2学时

主要内容：讲解小程序的云函数新建、部署和调用过程，包括云函数的常见操作和调试测试。

重点：掌握熟悉云函数中JS语法书写、函数调用和调试。

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

(十六）第 16 章【扶贫超市Part4】构建数据库与商品管理2学时

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

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

难点：云函数的调用。

(十七）第 17 章 系统底层的基础API2学时

主要内容：介绍了获取系统信息API、定时器API和扫码API，并讲解了API函数的调试方法。

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

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

(十八）第 18 章 网络与文件上传API2学时

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

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

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

(十九）第 19 章 数据缓存API2学时

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

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

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

(二十）第 20 章 位置API2学时

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

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

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

(二十一）第 21章 获取用户信息及登录态管理2学时

主要内容：介绍用户数据信息分类与开放数据获取流程，讲解用户登录态管理及其实现机制。

重点：小程序获取用户信息的相关API及其用法。

难点：用户登录态的实现机制。

(二十二）第 22 章【扶贫超市Part5】商品图片上传功能2学时

主要内容：完成扶贫超市项目的商品图片上传功能部分，包括本地图片选择及云开发端将图片写入数据库等操作，实现图片的选择上传、预览与删除等功能。

重点：图片选择上传、预览与删除功能的实现

难点：图片的选择上传与删除逻辑实现。

(二十三）第 23 章 扶贫超市项目功能完善6学时

主要内容：完善扶贫超市项目的其他主要功能，包括商品详情页面、购物车管理、结算与确认订单、设置收货地址、提交订单并支付等相关功能页面的页面效果和业务逻辑实现。

重点：项目各主要功能部分的页面和逻辑代码编写。

难点：云函数的调用以及部分功能如订单支付的逻辑处理。

09

教学日历

05

选用教材

扫码，京东优惠购书

10

内容简介

本书结合作者讲授“互联网新技术：微信小程序开发”课程的教学经验编写而成。全书分为6篇，共23章。本书以实际投入使用的项目“扶贫超市购物程序”作为贯穿本书的实战项目，在每篇都用一章进行内容讲解，逐步完善其开发过程。本书内容丰富，实用性强，侧重案例教学和计算机程序设计的基本知识，帮助掌握微信小程序的核心内容及小程序+服务器端设计的基本方法和编程技巧。

11

配套视频演示

12

本书部分配套资源展示

12

本书额外赠送资源

凡是在京东购书的用户，可以将订单信息和评价发到[email protected]，将会获取超值大礼包（包括几百个案例源码，面试等资源），部分案例内容如下：

12

目录

上下滚动查看 ↓

第1篇快 速 入 门

第1章浅谈微信小程序

1.1小程序简介

1.1.1小程序的优势与不足

1.1.2小程序的影响

1.1.3小程序与其他产品的区别

1.2小程序开发准备

1.2.1注册微信开发账号

1.2.2完善小程序的具体信息

1.2.3管理员登录小程序管理平台

1.2.4微信开发工具

1.3小程序开发工具的使用

1.3.1第一个小程序

1.3.2开发者工具页面介绍

1.3.3项目导入——微信小程序示例

1.3.4代码编辑

1.3.5项目调试

1.3.6项目发布

1.4小程序项目目录结构

1.4.1新建页面的3种方法

1.4.2项目全局文件

1.4.3页面布局文件xx.wxml

1.4.4页面样式文件xx.wxss

1.4.5页面配置文件xx.json

1.4.6页面逻辑文件xx.js

1.5本章小结

第2章小程序的视图与渲染

2.1视图与渲染过程

2.1.1基本概念

2.1.2WXML页面

2.1.3button组件简单使用案例

2.2数据绑定

2.2.1内容绑定

2.2.2组件属性绑定

2.2.3控制属性绑定

2.2.4true和false关键字绑定

2.2.5运算绑定

2.2.6组合绑定

2.2.7数据绑定综合案例

2.3渲染标签

2.3.1条件渲染

2.3.2列表渲染

2.4模板与引用

2.4.1模板的使用

2.4.2引用WXML代码段

2.5九九乘法表案例讲解

2.5.1实现效果

2.5.2代码详情

2.6本章小结

第3章小程序的事件

3.1事件对象

3.1.1事件与事件对象概述

3.1.2事件对象分类

3.1.3事件对象打印案例

3.2事件类型

3.2.1冒泡事件

3.2.2冒泡事件案例

3.3事件绑定类型

3.3.1阻止冒泡事件

3.3.2target与currentTarget的区别

3.4本章小结

第4章“扶贫超市Part1”开发准备

4.1项目背景与需求

4.1.1项目背景

4.1.2需求分析

4.1.3功能模块划分

4.2开发准备

4.2.1申请正式账号并完善小程序信息

4.2.2新建项目

4.3本章小结

第2篇开 发 进 阶

第5章小程序项目的配置与生命周期

5.1app.json配置属性

5.2页面配置

5.3窗口配置

5.4tabBar配置

5.4.1tabBar属性

5.4.2tabBar配置示例

5.5网络超时配置

5.6权限配置

5.6.1接口权限

5.6.2后台能力权限

5.7小程序的生命周期

5.7.1小程序生命周期函数

5.7.2小程序生命周期测试案例

5.8使用app对象的案例讲解

5.8.1实现效果

5.8.2在app.js中定义全局变量与函数

5.8.3页面获取app对象

5.9本章小结

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

6.1小程序的页面配置

6.2页面的生命周期

6.2.1页面生命周期函数

6.2.2页面生命周期测试案例

6.3页面跳转

6.3.1navigateTo跳转

6.3.2redirectTo跳转

6.3.3tabBar页面切换

6.3.4页面跳转与页面生命周期案例

6.4页面间的参数传递

6.5新闻客户端案例讲解

6.5.1功能描述与实现效果

6.5.2前期准备

6.5.3编码实战

6.6本章小结

第7章“扶贫超市Part2”项目页面框架配置

7.1项目目录整理

7.2项目tabBar配置

7.3项目窗口配置

7.4本章小结

第3篇小程序的UI开发

第8章页面布局

8.1页面布局概述

8.2flex布局基本概念

8.2.1容器与项目

8.2.2坐标轴

8.2.3flex属性

8.3flex布局案例

8.3.1运行效果

8.3.2代码说明

8.4flex容器属性详解

8.4.1flexdirection

8.4.2justifycontent

8.4.3alignitems

8.4.4flexwrap

8.4.5aligncontent

8.4.6flexflow

8.5flex项目属性详解

8.5.1flexgrow

8.5.2flexshrink

8.5.3flexbasis

8.5.4flex

8.5.5order

8.5.6alignself

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

8.6.1相对定位与绝对定位的概念

8.6.2相对定位测试和绝对定位测试

8.7简易计算器案例讲解

8.7.1效果展示

8.7.2页面组件布局与样式

8.7.3页面逻辑处理

8.8本章小结

第9章小程序的样式基础

9.1样式的基本使用

9.2样式的属性

9.2.1尺寸性

9.2.2背景属性

9.2.3边框属性

9.2.4边距属性

9.2.5文本属性

9.3样式选择器的使用

9.3.1基本选择器

9.3.2属性选择器

9.3.3伪类选择器

9.4本章小结

第10章组件

10.1初始组件

10.1.1组件基本概念

10.1.2组件的通用属性

10.2视图容器组件

10.2.1view组件

10.2.2scrollview组件

10.2.3swiper与swiperitem组件

10.3基础内容组件

10.3.1icon组件

10.3.2text组件

10.3.3progress组件

10.4表单组件

10.4.1button组件

10.4.2input组件

10.4.3textarea组件

10.4.4radio组件

10.4.5checkbox组件

10.4.6label组件

10.4.7picker组件

10.4.8slider组件

10.4.9switch组件

10.5form组件

10.5.1form组件介绍

10.5.2属性说明

10.5.3form组件使用案例

10.6导航组件

10.7多媒体组件

10.7.1audio组件

10.7.2video组件

10.7.3image组件

10.7.4camera组件

10.8map组件

10.8.1map组件属性说明

10.8.2map组件测试案例

10.8.3地图API属性说明

10.8.4地图API测试案例

10.9本章小结

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

11.1toast

11.1.1toast属性说明

11.1.2toast测试案例

11.2modal

11.2.1modal属性说明

11.2.2modal测试案例

11.3loading

11.3.1loading属性说明

11.3.2loading测试案例

11.4actionsheet

11.4.1actionsheet属性说明

11.4.2actionsheet测试案例

11.5Background

11.5.1wx.setBackgroundTextStyle

11.5.2wx.setBackgroundColor

11.5.3背景样式测试案例

11.6tabBar

11.6.1wx.showTabBarRedDot与wx.hideTabBarRedDot

11.6.2wx.showTabBar与wx.hideTabBar

11.6.3wx.setTabBarBadge与wx.removeTabBarBadge

11.6.4wx.setTabBarStyle

11.6.5wx.setTabBarItem

11.6.6动态设置tabBar测试案例

11.7加载第三方字体wx.loadFontFace

11.7.1属性说明

11.7.2字体API测试案例

11.8PullDownRefresh

11.8.1wx.startPullDownRefresh

11.8.2wx.stopPullDownRefresh

11.9本章小结

第12章“扶贫超市Part3”主要页面的UI

12.1首页UI设计

12.1.1swiper轮播

12.1.2分类部分

12.1.3推荐分类图片块

12.2分类页面UI设计

12.2.1实现效果

12.2.2顶部分类菜单

12.2.3商品内容区域

12.3购物车页面UI设计

12.3.1实现效果

12.3.2JS静态测试数据

12.3.3商品条目区视图

12.3.4按钮区域

12.4“我的”页面UI设计

12.4.1实现效果

12.4.2用户个人信息部分

12.4.3列表项部分

12.5管理员端商品管理页面UI设计

12.5.1实现效果

12.5.2顶部搜索栏

12.5.3左侧分类栏

12.5.4右侧商品栏

12.5.5底部固定操作按钮

12.6本章小结

第4篇小程序的后台开发

第13章认识云开发项目

13.1云开发的概念与组成

13.2云开发的创建与开通

13.2.1创建一个云开发项目

13.2.2开通云开发并构建云环境

13.3初始化

13.4新建云函数并部署

13.4.1部署已有的云函数

13.4.2新建一个云函数

13.4.3调用新建的云函数

13.5云开发之用户管理案例

13.5.1openid介绍

13.5.2openid获取用户信息

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

13.6.1实现效果

13.6.2代码说明

13.6.3下载文件

13.6.4删除文件

13.7数据库操作案例

13.7.1操作指引

13.7.2数据库操作代码解析

13.8本章小结

第14章云开发数据库

14.1基本概念

14.2数据类型

14.3权限控制

14.3.1基础权限配置

14.3.2数据库安全规则

14.3.3数据库安全规则编写

14.4数据库复杂操作

14.4.1查询和更新数组元素与嵌套对象

14.4.2联表查询

14.5本章小结

第15章云函数及其调试

15.1云函数基础

15.1.1配置云函数本地目录

15.1.2新建 Node.js 云函数

15.2wxserversdk初始化

15.3云函数的常见操作

15.3.1调用数据库

15.3.2调用存储

15.3.3调用其他云函数

15.4云开发调试

15.4.1云函数云端测试

15.4.2Network面板

15.4.3开启云函数本地调试

15.5本章小结

第16章“扶贫超市Part4”构建数据库与商品管理

16.1建立数据库

16.1.1表结构设计

16.1.2添加集合

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

16.2.1获取openid的方法

16.2.2判断是否为管理员

16.2.3判断是否为新用户

16.2.4实现效果

16.3添加商品

16.3.1添加商品效果展示

16.3.2WXML页面代码

16.3.3JS逻辑代码

16.4修改商品信息

16.4.1修改商品信息效果展示

16.4.2WXML页面说明

16.4.3JS逻辑代码

16.5删除商品

16.5.1删除商品效果展示

16.5.2JS逻辑函数

16.6本章小结

第5篇小程序的API

第17章系统底层的基础API

17.1获取系统信息的API

17.1.1wx.getSystemInfo与wx.getSystemInfoSync

17.1.2参数说明

17.2定时器

17.2.1属性说明

17.2.2定时器测试案例

17.3调试API

17.3.1开启调试模式与设置断点

17.3.2console全局对象

17.3.3console测试案例

17.4扫码

17.4.1wx.scanCode参数说明

17.4.2wx.scanCode示例

17.5本章小结

第18章网络与文件上传API

18.1网络基础

18.2wx.request

18.2.1wx.request参数

18.2.2RequestTask

18.2.3请求网络数据案例

18.3图片选择、预览与保存

18.3.1wx.chooseImage：属性说明

18.3.2选择图片测试案例

18.3.3wx.previewImage属性说明

18.3.4预览图片测试案例

18.3.5wx.getImageInfo

18.3.6wx.saveImageToPhotosAlbum

18.3.7wx.compressImage属性说明

18.3.8压缩图片测试案例

18.4文件的上传与下载

18.4.1从客户端会话选择文件

18.4.2上传文件

18.4.3下载文件

18.4.4文件保存到本地或直接打开

18.4.5下载文件并保存测试案例

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

18.5.1实现效果

18.5.2前期准备

18.5.3编码实战

18.6本章小结

第19章数据缓存API

19.1wx.setStorage

19.2wx.getStorage

19.3wx.removeStorage

19.4wx.getStorageInfo

19.5wx.clearStorage

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

19.6.1Java的同步与异步

19.6.2数据缓存API的同步版本语法

19.7数据缓存API测试案例讲解

19.7.1运行效果

19.7.2代码说明

19.8本章小结

第20章位置API

20.1wx.getLocation

20.1.1属性说明

20.1.2成功回调返回数据

20.2wx.chooseLocation

20.2.1参数说明

20.2.2成功回调返回数据

20.3wx.openLocation

20.4wx.onLocationChange

20.5wx.offLocationChange

20.6位置API测试案例讲解

20.6.1运行效果

20.6.2代码说明

20.6.3腾讯地图API调用准备

20.7路径导航案例

20.7.1实现效果

20.7.2代码说明

20.8本章小结

第21章获取用户信息及登录态管理

21.1用户数据分类与开发数据获取

21.2敏感信息的获取方式

21.2.1使用开发者的服务器

21.2.2云开发获取openid

21.3wx.login

21.4wx.getUserInfo获取信息

21.4.1参数属性说明

21.4.2成功回调返回数据

21.5与授权相关的API

21.5.1API作用说明

21.5.2全部scope

21.5.3授权示例

21.6用户登录态管理

21.6.1session与cookie

21.6.2小程序登录态实现机制

21.7获取用户信息编码说明

21.7.1自定义app.js中的getUseInfo方法

21.7.2检验服务端session的refreshSession方法

21.7.3完整的登录userLogin

21.7.4其他页面调用getUserInfo

21.8本章小结

第22章“扶贫超市Part5”商品图片上传功能

22.1点击加号选择图片

22.1.1实现效果

22.1.2代码说明

22.2删除指定图片

22.2.1实现效果

22.2.2删除图片步骤讲解

22.2.3代码说明

22.3图片缩略图预览

22.4上传图片到数据库

22.5本章小结

第6篇综合案例实战

第23章扶贫超市项目功能完善

23.1商品详情

23.1.1实现效果

23.1.2商品详情页面WXML代码

23.1.3JS代码

23.2加入购物车

23.2.1实现效果

23.2.2JS代码

23.3编辑购物车

23.3.1实现效果

23.3.2JS代码

23.4结算与确认订单

23.4.1实现效果

23.4.2确认订单页面WXML代码

23.4.3JS代码

23.5设置收货地址

23.5.1实现效果

23.5.2JS代码

23.6提交订单

23.6.1实现效果

23.6.2JS代码

23.7支付

23.7.1支付流程说明

23.7.2实现效果

23.7.3JS代码

23.8本章小结

12

教案

课程名称	微信小程序开发	总计：48 学时
课程类别	专业选修课	学分	3.0	周学时：04 学时
课程编码		开课学期
任课教师		职称
授课对象	具有数据库、WEB开发或前端基础的学生	选课人数
教材名称	微信小程序贯穿式项目实战	作者	兰红	出版社及出版时间	清华大学出版社2021年1月
课程简介	随着社会的发展，互联网新技术日益层出不穷。根植于微信内部的微信小程序，由于微信本身强大的社交属性带来了巨大的流量和超高的商业价值，其涉及的应用领域也在日益扩大，不久的将来很可能超过APP的数量。微信小程序(Mini Program)是一种轻量级的应用，它实现了应用“触手可及”的梦想，用户无需下载安装即可在微信中使用小程序。本课程将以项目驱动为宗旨，以丰富案例作实践，从零开始讲授微信小程序开发的入门基础知识与开发技巧。本课程基于微信小程序平台开发，从基础开始学习，循序渐进，通过理论知识与大量的案例来介绍微信小程序开发的各方面知识。具体内容包括：微信小程序的前端基础知识、小程序项目全局配置、页面配置以及生命周期、小程序开发的页面布局、样式、组件使用、云开发的项目构建及数据库、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.1 app.json配置属性5.2 页面配置5.3 窗口配置5.4 tabBar配置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.2 flex布局基本概念8.3 flex布局案例8.4 flex容器属性详解8.5 flex项目属性详解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.5 form表单提交组件10.6 导航组件navigator10.7 多媒体组件10.8 地图map
课后学习任务布置	各组件的测试案例源码学习
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,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-sheet操作菜单11.5 背景Background样式11.6 动态设置TabBar属性11.7 加载第三方字体wx.loadFontFace11.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.2 wx-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.2 wx.request 18.3 图片选择、预览与保存18.4 文件的上传与下载案例号码归属地查询小程序
课后学习任务布置	完善号码归属地查询小程序案例
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	复习网络请求和文件上传的原理和流程，以及小程序对应API的用法。

第18讲

授课内容	数据缓存API
教学目的与要求	掌握微信小程序数据缓存API的用法，包括本地缓存、数据的存储、获取、删除、清空等操作，并讲解与缓存相关的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]. 北京:清华大学出版社,2021.[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关闭监听案例位置API测试案例案例路径导航案例
课后学习任务布置	完善并实现路径导航案例
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	结合实际应用，学习和掌握小程序中地图和导航相关功能设计。

第20讲

授课内容	获取用户信息及登录态管理
教学目的与要求	了解用户数据信息分类与开放数据获取流程，掌握用户登录态管理及其实现机制。
重点难点	重点：小程序获取用户信息的相关API及其用法。难点：用户登录态的实现机制。
教学进程安排	21.1 用户数据分类与开发数据获取21.2 敏感信息两种获取方式21.3 wx.login21.4 wx.getUserInfo获取信息21.5 与授权相关的API 21.6 用户登录态管理21.7 获取用户信息编码说明
课后学习任务布置	查阅资料，进一步了解和学习小程序登录态实现机制。
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	结合Web应用中的session与cookie讲解登录态实现机制，讲解利用开发者自己的服务器实现登录机制的具体编码过程。

第21讲

授课内容	【扶贫超市Part5】商品图片上传功能
教学目的与要求	讲解扶贫超市项目的商品图片上传功能部分，包括本地图片选择及云开发端将图片写入数据库等操作，实现图片的选择上传、预览与删除等功能。
重点难点	重点：图片选择上传、预览与删除功能的实现。难点：图片的选择上传与删除逻辑实现。
教学进程安排	22.1 点击加号选择图片22.2 删除指定图片22.3 图片缩略图预览22.4 上传图片到数据库
课后学习任务布置	完善本项目商品图片上传功能部分的编码
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	本讲涉及前端的图片选择、预览等API函数，在进行图片上传时还涉及wx.cloud.uploadFile函数的使用，该函数可将图片存入云空间，后续再调用云函数进行数据库集合（表）字段的更新等。

第22讲

授课内容	扶贫超市项目功能完善（1）
教学目的与要求	完善扶贫超市项目的其他主要功能，包括商品详情页面、购物车管理等相关功能页面的页面效果和业务逻辑实现。
重点难点	重点：项目各主要功能部分的页面和逻辑代码编写。难点：购物车的业务逻辑处理与实现。
教学进程安排	23.1 商品详情23.2 加入购物车23.3 编辑购物车
课后学习任务布置	完善项目相关页面的页面设计与功能编码。
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	复习小程序组件及各类API用法。

第23讲

授课内容	扶贫超市项目功能完善（2）
教学目的与要求	完善扶贫超市项目的其他主要功能，包括结算与确认订单、设置收货地址等相关功能页面的页面效果和业务逻辑实现。
重点难点	重点：项目各主要功能部分的页面和逻辑代码编写。难点：订单结算业务逻辑处理与实现。
教学进程安排	23.3 编辑购物车23.4 结算与确认订单23.5 设置收货地址
课后学习任务布置	完善项目相关页面的页面设计与功能编码。
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	复习小程序组件及各类API用法。

第24讲

授课内容	扶贫超市项目功能完善（3）
教学目的与要求	完善扶贫超市项目的其他主要功能，包括设置收货地址、提交订单并支付等相关功能页面的页面效果和业务逻辑实现。
重点难点	重点：项目各主要功能部分的页面和逻辑代码编写。难点：订单支付的业务逻辑处理与实现。
教学进程安排	23.5 设置收货地址23.6 提交订单23.7 支付
课后学习任务布置	完善项目其他部分功能设计与功能编码。
主要参考资料	教材：[1] 兰红.微信小程序贯穿式项目实战[M]. 北京:清华大学出版社,2021.[2] 周文洁.微信小程序开发零基础入门[M]. 北京:清华大学出版社,2019.
课后总结分析	完成本章的综合练习，对开发一个完整项目会有更深的理解和能力提升。

完整的教案，请在公众号“书圈”后台回复【9787302562054】下载完整版