《微信小程序开发项目教程》教学教案(1)

《微信小程序开发项目教程》教学教案（1）

第1章 微信小程序概述

课时内容

微信小程序概述

了解微信小程序的功能、使用场景

掌握小程序环境搭建的步骤

教学目标

熟悉微信开发者工具界面

掌握微信小程序项目创建的方法

小程序环境搭建的步骤

教学重点

微信开发者工具界面

微信小程序项目的创建

课时

2

教学难点

小程序环境搭建和项目创建

1.教学思路：介绍微信小程序的概念、功能和发展历程；通过多媒体演示和实机操作讲解微信小程序环境搭建和开发者工具的使用；通过创建莫凡商城小程序实战巩固基础教学设计

知识。

2.教学手段：多媒体+计算机

3.教学资料：教材、多媒体课件

教学内容

1.1 微信小程序介绍

1.1.1 初识微信小程序

微信小程序是一种无须安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用；也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。应用将无处不在，随时随地可用，无须卸载。

微信小程序也是基于去中心化而存在的一个平台，它没有聚合的入口，那么它的入口在哪里呢？

（1）在微信中的“发现”界面，可以找到小程序的入口。

（2）在微信主界面的下拉窗口里可以找到用过的小程序。

（3）可以直接打开好友或者群里分享的小程序。

（4）通过扫描二维码可以进入小程序。

1

（a）“发现”界面 （b）主界面下拉窗口 （c）分享的小程序

微信小程序入口

1.1.2 微信小程序的功能

（1）分享页功能：用户可以将小程序当前页面分享给好友，如分享北京到上海的火车票列表界面，用户打开时是这个页面的实时数据，而不需要再次启动微信小程序。

（2）分享对话功能：可以将对话分享给好友或者分享到微信群。

（3）线下扫码进入微信小程序功能：提示用户附近有哪些微信小程序可以使用，扫描二维码就可以使用微信小程序。

（4）挂起状态功能：例如，来电话可以先接电话，接完电话后可以继续使用微信小程序进行相关操作。

（5）消息通知功能：商户可以发送消息给接受过服务的用户，用户也可以使用微信小程序的客服功能联系商户。

（6）实时音视频录制播放功能：通过此功能可以随时随地进行直播或者录播。

（7）硬件连接功能：通过使用NFC（Near Field Communication，近距离无线通信）功能，可以把手机变成公交卡、门禁卡等进行便捷使用；通过Wi-Fi连接功能，进行网络连接。

（8）小游戏功能：微信小程序制作的“跳一跳”小游戏，让游戏大门从此打开，让用户知道小程序也可以制作小游戏。

2

（9）公众号关联功能：微信小程序可与公众号进行关联，公众号可关联不同主体的3个小程序，可关联同一主体的10个小程序，同一个小程序最多可关联3个公众号。

1.1.3 微信小程序的使用场景

小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目，通过这些服务类目，能知道小程序的使用场景。服务类目分为个人服务类目和企业服务类目。

● 个人服务类目的小程序开发主体为个人，它的服务类目少一些、服务范围小一些，主要包括出行与交通、生活服务、餐饮、旅游、商业服务、快递业与邮政、教育、工具、体育等。

● 企业服务类目的小程序开发主体是企业，它的服务类目多一些、服务范围大一些，主要包括快递业与邮政、教育、医疗、政务民生、金融业、出行与交通、房地产、生活服务、IT科技、餐饮、旅游、时政信息、文娱、工具、电商平台、商家自营、商业服务、公益、社交、体育、汽车等。

1.2 微信小程序环境搭建

微信小程序环境搭建很简单，需要3个步骤。

（1）下载微信开发者工具。在“微信公众平台”官网选择“小程序”→“小程序开发文档”，如图所示。在打开的界面中选择“工具”→“下载”，可以看到微信小程序为不同的操作系统（Windows 64、Windows 32、macOS）提供了不同版本的开发者工具（因为开发者工具的版本更新很快，实际版本以读者操作为准），我们可以根据自己的操作系统下载相应的版本，如图所示。

3

小程序开发文档

下载微信开发者工具

（2）注册“微信公众平台”账号。在“微信公众平台”官网选择微信小程序类别进行注册。小程序支持个人开发者账号，可以注册个人账号；如果公司需要小程序，也可以进行企业认证。通过这两种方式都可以发布小程序，如图所示。

注册“微信公众平台”账号

（3）使用下载的微信开发者工具包。按照提示完成开发者工具的安装，安装完成后，运行微信开发者工具，会出现一个二维码，需要用绑定“微信公众平台”的微信扫描登录，登录后可以发现，开发者工具提供了本地“小程序项目”开发和“公众号网页项目”开发两个调试类型。在小程序开发部分微信开发者工具支持新建小程序和导4

入已有的小程序，如图所示。

微信开发者工具

1.3 微信小程序开发者工具的使用

在进行小程序开发之前，需要先掌握微信开发者工具的使用，对工具的使用掌握得越熟练，越有助于小程序的开发和提高开发效率。下面介绍一下微信开发者工具的使用。

1.3.1 如何创建项目

创建一个小程序项目，需要准备AppID、项目名称和项目目录。

（1）获取微信小程序AppID，需要在“微信公众平台”中登录1.2.1小节中注册的账号，在“开发”→“开发设置”中，查看微信小程序的AppID，如图所示。

5

获取AppID

（2）创建一个“小程序开发工具使用”项目，项目文件存放到“chapter1”文件夹中，其他都使用默认配置，如图所示。

创建小程序项目

（3）单击“新建”按钮，即可创建一个小程序项目，同时进入微信开发者工具界面，如图所示。

6

微信开发者工具界面

1.3.2 微信开发者工具界面

微信开发者工具界面可以分为五大功能区域：菜单栏、工具栏、模拟器、编辑器、调试器，如图所示。

微信开发者工具界面的五大功能区域

1．菜单栏

7

菜单栏有项目、文件、编辑、工具界面、设置、微信开发者工具７个菜单项，涉及软件的一些常规操作和功能使用。

“项目”菜单：通过“项目”菜单，可以新建项目、导入项目、打开最近项目、新建代码片段、导入代码片段、查看所有项目和关闭当前项目，从而对小程序项目或者代码片段进行管理和使用。

“文件”菜单：通过“文件”菜单，可以新建文件、保存文件、保存所有文件和关闭文件。

“编辑”菜单：是对代码进行管理的一个菜单，通过该菜单可以格式化代码等。

“工具”菜单：用于编译、刷新、预览、清除缓存等。

“界面”菜单：用于显示或者隐藏工具栏、模拟器、编辑器、目录树、调试器区域。

“设置”菜单：通过“设置”菜单，可以进行通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置。

“微信开发者工具”菜单：通过该菜单，可以对开发者工具进行升级、回退和退出等。

2．工具栏

工具栏包含了小程序开发中使用到的常用工具和常用功能。

（1）显示或隐藏模拟器、编辑器、调试器按钮。这3个按钮可以控制模拟器、编辑器、调试器区域的显示或者隐藏。

（2）“云开发”按钮。通过“云开发”按钮可以进入小程序云开发控制台，进行小程序云开发。

（3）小程序模式。这里提供两种模式：一种是小程序模式，用于正常开发小程序项目；另一种是插件模式，用于开发小程序插件。

（4）编译操作。可以通过使用“编译”按钮或者“Ctrl + B”组合键，编译当前代码，并自动刷新模拟器，同时鉴于开发者需调试从不同场景值进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览，如图1.11所示。

8

编译

（5）预览。单击“预览”按钮，可以将小程序上传，生成二维码，通过扫描二维码可以在手机上预览小程序，如图所示。

预览

（6）真机调试。小程序允许在真机上调试，可以在发布之前查看小程序在真机上的运行效果。

（7）前、后台切换。工具栏中前、后台切换按钮可帮助开发者模拟一些客户端的环境操作。例如，在操作9

微信小程序的过程中，突然有电话进来，如果接电话，小程序就会从前台进入后台，重新访问小程序时，小程序又会从后台进入前台，如图所示。

前、后台切换

（8）清缓存。清缓存包括清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除功能，如图所示。

清缓存

（9）上传。小程序开发完成后需要上传到腾讯服务器进行测试如图所示。在手机上可以预览开发版本的小程序。

10

上传

（10）版本管理。小程序代码可以上传到Git进行版本管理和多人协作开发。

3．模拟器

模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面会随着代码的编写实时变化，以方便小程序的开发和调试；同时，模拟器可以模拟小程序在各个终端设备上的操作效果，可以设置小程序运行的终端设备，如“iPhone 5”“iPhone 6”等终端设备，可以设置模拟器区域的百分比大小，可以模拟设置网络连接“Wi-Fi”“2G”“3G”等网络情况，如图所示。

模拟器

4．编辑器

编辑器区域分为两部分：一部分是用来展示项目文件目录和文件结构的，称为目录树；另一部分是用来编辑代码的区域，如图所示。

11

编辑器区域

（1）在项目目录上单击鼠标右键，在弹出的快捷菜单中可以新建目录、Page、Component、JS、TS、JSON、WXML、WXSS、WXS，可以对文件目录重新命名，可以删除目录，可以在该目录下查找指定内容，如图所示。

文件操作

（2）在代码编辑区域中编写代码后，可以通过模拟器区域，实时预览编辑的小程序的演示情况。修改WXSS、WXML文件，会刷新当Page，修改JS、JSON文件，会重新编译小程序，如图所示。

12

代码编写

（3）在代码编写过程中，开发者工具提供自动补全功能。在编辑JS文件时，开发者工具会帮助开发者补全所有的API（Application Programming Interface，应用程序编程接口），并给出相关的注释解释；在编辑WXML文件时，开发者工具会帮助开发者直接写出相关的标签；在编辑JSON文件时，会帮助开发者补全相关的配置，并给出实时的提示，如图所示。

自动补全功能

（4）开发者工具提供自动保存功能。书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件内容，但需要注意的是，只有保存文件，修改内容才会真实地写到硬盘上，并触发实时预览。

13

5．调试器

小程序常用的调试工具有Console、Sources、Network、Storage、AppData、Wxml。

（1）Console窗口用来显示小程序的错误信息和调试代码，还可以进行代码编写和调试，如图所示。

Console的功能

（2）Sources窗口用于显示当前项目的脚本文件，在Sources中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，可通过require主动调用，如图所示。

Sources的功能

（3）Network窗口用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用的状态、时间等，如图所示。

14

Network的功能

（4）Storage窗口用于显示当前项目使用rage或者rageSync后的数据存储情况，如图所示。

Storage的功能

（5）AppData窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目数据情况，开发者可以在此处编辑数据，并将其及时地反馈到界面上，如图所示。

15

AppData的功能

（6）Wxml窗口用于帮助开发者开发Wxml转化后的界面。开发者在这里可以看到真实的页面结构及结构对应的WXSS属性，同时可以修改对应的WXSS属性，如图所示。

Wxml的功能

1.3.3 常用快捷键

１．格式调整组合键

Ctrl+S：保存文件。

Ctrl+[，Ctrl+]：代码行缩进。

Ctrl+Shift+[，Ctrl+Shift+]：折叠打开的代码块。

Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行。

Shift+Alt+F：代码格式化。

Alt+Up，Alt+Down：上、下移动一行。

Shift+Alt+Up，Shift+Alt+Down：向上、向下复制一行。

Ctrl+Shift+Enter：在当前行上方插入一行。

Ctrl+Shift+F：全局搜索。

Ctrl+B：可以编译当前代码，并自动刷新模拟器。

16

2．光标相关组合键

Ctrl+End：移动到文件结尾。

Ctrl+Home：移动到文件开头。

Ctrl+i：选中当前行。

Shift+End：选择从光标到行尾。

Shift+Home：选择从行首到光标处。

Ctrl+Shift+L：选中所有匹配。

Ctrl+D：选中匹配。

Ctrl+U：光标回退。

3．界面相关快捷键

Ctrl + ：隐藏侧边栏。

Ctrl + m：打开或者隐藏模拟器。

1.4 项目实战：创建莫凡商城小程序

莫凡商城（mofunShop）小程序是贯穿本书的项目案例，通过学习本书内容可以完整地开发一个企业级的小程序。本章介绍如何创建微信小程序项目及如何使用微信开发者工具。下面开始创建一个莫凡商城小程序。

（1）打开微信开发者工具，创建莫凡商城小程序，并将其存放到“mofunShop”文件夹，AppID使用自己在公众平台里的AppID，如图所示。

17

创建项目

（2）创建莫凡商城小程序项目之后，会进入到微信开发者工具里，默认创建一个小程序页面，包括两方面内容：一是输出Hello World文字；二是获取用户的头像、昵称信息。在pages/index/文件里，Page的data里提供数据源motto, data的数据可以动态地绑定到WXML页面里，如图所示。

显示Hello World

（3）在pages/index/文件里，通过双大括号（{{}}）的方式，将motto绑定到页面里，motto对应的值就可以在页面中显示出来，如图所示。

18

绑定motto

（4）在pages/index/文件里，通过class的方式给Hello World添加样式，使其距顶部的高度为200 px，如图所示。

添加样式

（5）单击“获取头像昵称”按钮，可以通过触发获取用户信息事件（getUserInfo）来获取用户的相关信息。微信小程序获取用户头像、昵称，需要用户授权后方可渲染到界面上，如图所示。

19

获取头像昵称

在实际的开发过程中，小程序的编写也是这样来进行的：在JS文件里进行业务逻辑的处理，动态地提供数据；在WXML文件里绑定数据，渲染界面；在WXSS文件里添加样式，美化页面。

小结

本节课主要介绍微信小程序是什么、能干什么、使用场景及小程序的发展历程，让读者对小程序有一个初步的认识；带领读者搭建小程序的开发环境，完成微信小程序的创建项目，学习微信小程序相关的基础知识；最后完成创建莫凡商城小程序的项目，体验如何快速创建一个微信小程序。

练习

第2章 莫凡商城小程序项目任务

课时内容

莫凡商城小程序项目任务

教学目标

课时

2

了解莫凡商城小程序的四大功能模块

掌握莫凡商城小程序四大模块拆解的23个任务的内容及其设计目的

教学重点

掌握莫凡商城小程序四大模块拆解的23个任务的内容及其设计目的

教学难点

23个任务的内容及其设计目的

1.教学思路：介绍莫凡商城小程序的四大功能模块；通过多媒体演示讲解莫凡商城小程序四大模块拆解的23个任务的内容及其设计目的。

教学设计

2.教学手段：多媒体

3.教学资料：教材、多媒体课件

教学内容

莫凡商城小程序是一个完整的小程序项目，主要实现图书商品的展示与销售功能，是非常具有代表性的小程序应用项目。小程序分为4个功能模块：“我的”模块、“首页”模块、“购买商品”模块和图书“分类”模块。“我的”模块用来显示用户的订单，并实现修改密码、意见反馈等功能；“首页”模块显示海报轮播图、“热门技术”图书区域、“秒杀时刻”图书区域、“畅销书籍”图书区域；“购买商品”模块中的“购物车”就像我们常用的一样，用于显示20

想要购买的商品列表；“图书分类”模块将要销售的图书进行一、二级分类，并分类显示图书商品。

我的 首页 购物车 图书分类

2.1 “我的”模块功能介绍

“我的”模块实现底部标签导航功能、注册功能、登录功能、“我的”界面列表式导航功能、修改密码功能、意见反馈功能、清除缓存功能、我的订单功能。

2.1.1 任务1—实现底部标签导航功能

莫凡商城小程序的底部标签导航包括“首页”“分类”“购物车”和“我的”4个标签。切换底部标签，可以显示对应的导航内容，如图所示。

设计目的：底部标签导航是绝大多数小程序都会应用到的一种设计方式，其功能的实现，对设计其他小程序具有借鉴意义。

底部标签导航

2.1.2 任务2—实现注册功能

注册是App和小程序中不可或缺的功能，要让用户在莫凡商城中创建一个属于自己的账号，就需要用到注册功能，如图所示。

21

注册功能

设计目的：注册功能是小程序经常会用到的功能，可以通过用户的注册，来管理用户的账号信息。通过注册表单的设计，我们可以学到表单校验、设计注册表单和提交注册表单的方法。

2.1.3 任务3—实现登录功能

莫凡商城小程序提供了两种登录方式：账号密码登录和手机快捷登录，如图所示。

账号密码登录 手机快捷登录

设计目的：账号密码登录和手机快捷登录是现在比较流行的登录设计方式，很多App或者小程序都会采用这样的设计方式，其功能的实现对设计其他小程序具有借鉴意义。

2.1.4 任务4—实现“我的”界面列表式导航功能

莫凡商城小程序中的“我的”界面采用列表式导航来显示内容，这也是很多App会采用的一种方式，如图所示。

设计目的：列表式导航是比较普遍使用的一种设计方式，在“我的”页面里可能有很多菜单选项，列表式导航可以帮我们很好地进行布局。

22

“我的”界面列表式导航功能

2.1.5 任务5—实现修改密码功能

莫凡商城小程序用户可以修改自己的密码，通过输入原密码、输入新密码、确认密码3步就可以完成密码的修改，如图所示。

修改密码功能

设计目的：通过修改密码功能，我们要学会布局密码修改界面和表单校验的方法。

2.1.6 任务6—实现意见反馈功能

莫凡商城小程序提供意见反馈功能，用户可以填写自己的意见或建议，如图所示。

意见反馈

23

设计目的：意见反馈功能用来收集用户对产品使用的意见或建议，我们可以通过收集这些意见或建议来优化App或者小程序。

2.1.7 任务7—实现清除缓存功能

莫凡商城小程序提供清除缓存功能，可以清理掉缓存在小程序中的数据。

设计目的：小程序可以提供清除缓存功能，把缓存到本地的数据清除掉，释放空间。

2.1.8 任务8—实现我的订单功能

莫凡商城小程序我的订单功能提供“待付款”订单列表、“待收货”订单列表、“已完成”订单列表，如果没有订单，则显示空列表，如图所示。

待付款列表 待收货列表 已完成列表 空列表

设计目的：商城类App或者小程序都有订单这个概念，订单可以分为待付款订单、待收货订单、已完成订单等不同类别，每种订单具有不同的操作按钮，这是设计订单列表时要考虑的事情。

2.2 “首页”模块功能介绍

莫凡商城小程序首页提供海报轮播功能、图书列表显示功能、图书搜索功能、图书更多列表显示功能。

2.2.1 任务9—实现搜索区域布局与海报轮播功能

首页上方是搜索区域和海报轮播区域。海报轮播功能是App和小程序很常用的功能，它利用界面有限的24

空间，通过轮播的形式显示不同的轮播内容，如图所示。

海报轮播1 海报轮播2

设计目的：首页搜索和海报轮播是比较通用的功能，海报轮播功能常用于重点产品或特殊活动的海报展示。

2.2.2 任务10—实现图书列表显示功能静态布局与动态渲染

莫凡商城小程序在首页显示图书列表，包括“热门技术”列表、“秒杀时刻”列表、“畅销书籍”列表，如图所示。本任务分静态布局与动态渲染两步实现。

图书列表显示

设计目的：首页采用列表的方式来设计是很常见的形式，在首页有限的空间里放置指定数量的商品，并且放置可以查看更多商品的入口，单击进入就可以查看更多的商品列表。

2.2.3 任务11—实现图书搜索功能

莫凡商城小程序提供搜索功能，在搜索功能里提供搜索框和热门搜索标签列表。

25

搜索界面及热门搜索 搜索结果

设计目的：搜索是小程序必不可少的功能，商城里有很多商品，搜索常常是用户最先使用到的功能。

2.2.4 任务12—实现图书更多列表显示功能

莫凡商城小程序在首页每个类别只显示3本书，单击“查看更多”将显示该类别的所有图书列表，如图所示。

热门技术列表 秒杀时刻列表 畅销书籍列表

设计目的：通过制作图书更多列表可以学会商品列表的展示及不同商品分类的页签切换显示。

2.3 “购买商品”模块功能介绍

莫凡商城小程序购买商品功能包括商品详情页功能、商品加入购物车功能、商品立即购买页功能、新增地址、编辑地址、地址列表。

2.3.1 任务13—实现商品详情页功能

商品详情页用于商品轮播图片、商品介绍、商品价格、商品数量、图书详情、出版信息等内容的显示，如26

图所示。

商品详情页1 商品详情页2

设计目的：商品详情页的内容比较多、页面比较长，既要展示商品基本信息，又要有加入购物车、立即购买的操作按钮，在设计时最好将按钮固定在底部区域，不随页面的滚动而改变位置，方便用户随时将商品加入购物车或者立即购买。

2.3.2 任务14—实现商品加入购物车功能

可以将商品加入购物车里，购物车中商品的数量会变化，如图所示。

加入购物车

设计目的：加入购物车功能是比较常用的功能，本任务讲解如何设计加入购物车功能。

2.3.3 任务15—实现购物车列表功能

购物车以列表的形式显示已加入购物车的商品，可以显示选中商品的总价并进行结算，如图所示。

27

购物车列表

设计目的：很多商城都会设计购物车功能，本任务学习购物车功能的设计和实现。

2.3.4 任务16—实现商品立即购买页功能

在商品立即购买页面中可以看到要购买的商品名称、数量及价格，同时可以选择收货地址，如图所示。

商品立即购买页面

设计目的：商品立即购买页面是购买前最终确定订单的界面，在此页面可以提交订单来发起支付。

2.3.5 任务17—实现收货地址列表功能

收货地址列表用来显示用户购买商品时可以选择的收货地址，这些收货地址通过列表的方式进行显示，如28

图所示。

收货地址列表

设计目的：收货地址列表的展示，方便用户在下单的时候直接选择以前录入过的地址信息，这样就不用每次输入地址，方便用户快速下单。

2.3.6 任务18—实现新增和编辑地址功能

通过新增地址功能可以创建新的收货地址，对于已有的收货地址，也可以重新进行编辑，如图所示。

新增地址 编辑地址

设计目的：新增地址和编辑地址是常用的功能，用以动态地维护地址信息。

29

2.3.7 任务19—实现支付功能

微信小程序只支持微信支付，提供微信支付API，莫凡商城在商品提交订单页和订单详情页都可以发起微信支付，如图所示。

提交订单 订单详情付款

设计目的：支付功能是购买商品必不可少的功能，本任务讲解如何设计微信小程序支付。

2.3.8 任务20—实现支付完成页功能

对于商品的购买，微信小程序只能进行小程序支付，接入小程序支付，支付成功后，会跳转到支付成功页面，如图所示。

支付成功页面

设计目的：支付完成后，小程序会给用户支付成功的友好提示，既提示用户支付成功，又给用户提供查看30

详情的入口。

2.3.9 任务21—实现订单详情页功能

支付成功后，可以在订单详情页中查看订单相关信息、收货地址信息及商品信息，如图所示。

订单详情页面

设计目的：用户在购买商品的时候，有时不会立即支付，或者支付后想查看自己的订单信息，订单详情页面就是必不可少的页面了。

2.4 “图书分类”模块功能介绍

莫凡商城小程序针对图书进行分类管理，以分类的形式显示图书相关内容。

2.4.1 任务22—实现图书分类功能

图书分类分为一级分类和二级分类，通过手风琴式导航来显示，如图所示。

31

图书分类1 图书分类2

设计目的：手风琴式导航方式是很多商城都会采用的导航方式，对于商品分类过多的商城，这样的设计方便用户查找商品。

2.4.2 任务23—实现图书分类结果列表功能

通过图书一级分类和二级分类，可以查看到该分类下的所有图书，如图所示。

图书分类结果列表

设计目的：根据商品的分类，可以查看该分类下的商品，这样查找商品具有目的性，方便用户快速查找到想要的商品。

小结

莫凡商城小程序包含四大功能模块：“我的”模块、“首页”模块、“购买商品”模块、“图书分类”模块、我们将这四大模块的功能拆分成23个任务来实现，完成莫凡商城小程序的开发，同时学会微信小程序的知识点和开发技能。

32

练习

33