小程序是一种不需要下载安装即可使用的应用，它实现了应用 “触手可及” 的概念，用户扫一扫或搜一下即可打开应用。也体现了 “用完即走” 的理念，用户不需要关心安装和卸载的问题。

# 1. 学习目标

• 了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境
• 掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册
• 掌握获取微信小程序 AppID 的方法，能够从微信小程序管理后台获取 AppID
• 掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装
• 掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目
• 熟悉微信小程序的项目结构，能够解释每个文件的作用
• 熟悉微信小程序的页面组成，能够解释 WXML、WXSS、JS 和 JSON 文件的作用
• 熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式
• 熟悉微信开发者工具的主界面，能够说出主界面中常用快捷按钮的功能
• 掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置
• 了解微信小程序开发常用快捷键，能够列举 4 类常用快捷键
• 了解项目成员，能够说出项目成员的组织结构、分工和权限
• 掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员
• 熟悉微信小程序的版本，能够说明微信小程序的 4 种版本
• 熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤

# 2. 章节概述

微信小程序于 2017 年 1 月 9 日正式上线，凭借其开发成本低、微信用户数量庞大等优势，得到了许多用户的认可，同时还为许多商家提供了商机。

概念：微信小程序是一种全新的连接用户与服务的应用，它可以在微信内被便捷地获取和传播，同时具有良好的用户体验。微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应用，用户通过微信扫一扫或者搜一搜即可打开，且每个微信小程序的体积非常小。

特点：

• 无须安装，直接使用，不占用存储空间
• 用完即走，无须卸载
• 名称唯一：不能使用相同名称
• 入口丰富
• 传播能力强：微信搜索、好友分享、小程序识别码

微信小程序与原生应用、HTML5 应用的区别：

发展前景：

• 生态体系：微信小程序已经形成了自己的生态体系，它连接了开发者、运营者、投资者等各领域的企业，并且接入了多个第三方服务的平台。
• 开放能力：微信小程序不断自我完善， 为开发者开放了越来越多的接口，它可以适用于大多数的用户和场景，还可以方便开发者进行深度挖掘。同时，微信为小程序提供了越来越多的开放功能，例如微信扫码、微信支付、地理定位等，这对微信小程序的发展也会起到推动作用。
• 用户粘性：微信小程序已经积累了大量用户，用户黏性高，使其他行业与微信用户有更好的连接，能够更好地与微信结合。

宿主环境：

宿主环境（Host Environment）是指程序运行所依赖的环境。例如，iOS 系统和 Android 系统提供了两种不同的宿主环境，微信、微博等应用都需要依赖宿主环境才能运行，如下图所示。

微信小程序可以跨平台，这是因为微信小程序并不是一个直接安装在 Android 系统或 iOS 系统中的应用，而是运行在微信客户端上的应用。微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。

微信小程序的宿主环境为微信小程序提供了丰富的组件和 API（Application Program Interface，应用程序接口），具体解释如下：

• 组件：用于快速搭建页面的结构。微信小程序的组件包括视图容器、基础内容、表单、导航、媒体、地图、画布、开放能力等。
• API：用于让开发者方便地调用微信提供的功能，例如获取用户信息、微信登录、微信支付等。

# 3. 微信小程序开发前准备

①注册微信小程序开发账号

②获取微信小程序 AppID

1. 登录微信小程序管理后台
2. 在左侧边栏中选择 “开发管理”
3. 选择 “开发设置”
4. 查看并复制 AppID

• 在微信小程序中，AppID 又称为小程序 ID，是每个小程序的唯一标识，每个小程序账号只有一个 AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。

③安装微信开发者工具

④创建微信小程序项目

• 在微信小程序项目的创建界面中，读者可以自定义项目名称和目录，如填写项目名称为 “HELLO”，目录为 “D:\miniprogram\hello”。关于 AppID、开发模式、后端服务和模板选择的具体解释如下：
  • AppID：填写 1.2.2 小节获取的 AppID 即可。如果不想使用自己的 AppID，也可以使用测试号，二者的区别是，前者能够使用的功能比后者多，例如代码的上传和发布。
  • 开发模式：有 “小程序” 和 “插件” 两种选择，由于我们要创建一个微信小程序项目，所以此处应选择 “小程序”。
  • 后端服务：有 “微信云开发” 和 “不使用云服务” 两种选择。在 “微信云开发” 中 ，开发者无须搭建服务器，即可使用云函数、云数据库、云存储以及微信云托管等完整云端能力。
  • 模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目。

# 4. 微信小程序开发基础

微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构

• pages：用于存放微信小程序的所有页面。
• eslintrc.js：用于格式化代码，使代码风格保持一致。
• app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。
• app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。
• app.wxss：微信小程序的全局样式文件，文件可以为空。
• project.config.json：在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要栽入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。
• project.private.config.json：用于保存微信开发者工具的私人配置，配置的优先级高于 project.config.json。
• sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件， 则默认为所有页面都允许被索引。微信现已开放微信小程序页面的搜索，也就是说微信小程序里面的内容也能被微信搜索引擎搜索到。 当开发者允许微信小程序页面被微信索引时，微信会通过爬虫的形式，为微信小程序的页面建立索引。 当用户的搜索词条触发该索引时，微信小程序的链接地址将可能展示在搜索结果中。

在微信客户端中启动微信小程序的步骤。

1. 把整个微信小程序的代码包下载到本地。
2. 解析 app.json 全局配置文件，通过该文件解析出微信小程序的所有页面路径。
3. 执行 app.js 入口文件，调用 App () 函数创建微信小程序的实例。
4. 渲染微信小程序的首页。

页面组成：

一个微信小程序是由一个或多个页面组成的，这些页面被存放在 pages 目录中。下面以 pages 目录下的 index 页面为例展示其组成部分，index 页面的组成部分如下图所示：

index 页面由 4 个文件组成，分别是 index.js、index.json、index.wxml 和 index.wxss

• JS：类似网页制作中的 JavaScript 语言，用于实现页面逻辑和交互，文件扩展名为.js。需要注意的是，微信小程序中的 JS 不含 DOM 和 BOM，但它提供了丰富的 API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。
• JSON（JavaScript Object Notation，JavaScript 对象符号）：用于利用 JSON 语法对页面进行配置，文件扩展名为.json。
• WXML（WeiXin Markup Language，微信标记语言）：类似于网页制作中的 HTML 语言，用于构建页面结构，文件扩展名为.wxml。
• WXSS（WeiXin Style Sheets，微信样式表）：类似于网页制作中的 CSS 语言，用于设置页面样式，文件扩展名为.wxss。

微信客户端在加载微信小程序页面时的步骤。

1. 读取并解析页面中 JSON 文件的配置。
2. 加载页面的 WXML 文件、WXSS 文件和 JS 文件，实现页面渲染。

其中，页面中 WXSS 文件的样式会覆盖项目根目录下的 app.wxss 文件中相同的全局样式；页面中 JS 文件的 Page () 函数会被调用，用于创建页面实例。

微信小程序的通信模型

微信小程序实现了渲染层、逻辑层和第三方服务器的通信：

• WXML 和 WXSS 工作在渲染层，用于实现页面的渲染。
• JS 工作在逻辑层，用于实现页面的逻辑。

微信小程序的通信模型分为两个部分。

• 第 1 部分是渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中
• 第 2 部分是逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。

Native 表示微信客户端的底层，渲染层与逻辑层之间的通信和逻辑层与第三方服务器之间的通信都由微信客户端的底层进行转发。

# 5. 微信开发者工具的使用

菜单栏：

• 项目：用于新建项目、导入项目、打开最近项目、查看所有项目或关闭当前项目等。
• 文件：用于新建文件、全部保存或关闭编辑器等。
• 编辑：用于编辑代码，查看编辑相关的操作和快捷键，对代码进行格式化。
• 工具：用于项目的编译、刷新、清除缓存等。
• 转到：用于切换编辑器、快速定位到行、查看问题等。
• 选择：用于全选、光标的移动等。
• 视图：用于微信开发者工具可视区的控制。
• 界面：用于控制主界面中工具栏、模拟器、编辑器、目录树和调试器的显示与隐藏。
• 设置：用于通用设置、外观设置、快捷键设置、编辑器设置、代理设置、安全设置、扩展设置和项目设置。
• 帮助：用于工具的反馈和开发文档的查看等。
• 微信开发者工具：用于账号切换、更换开发模式、检查更新、调试、退出等。

工具栏：

• 个人中心：工具栏最左侧的第 1 个按钮，显示当前登录用户的头像，单击头像后会显示用户名。

• 模拟器、编辑器和调试器：用于控制模拟器、编辑器和调试器的显示与隐藏。

• 可视化：用于代码的可视化编辑，开发者可以通过拖曳等方式对界面进行快速布局与修改。

• 云开发：开发者可以使用云开发来开发微信小程序、小游戏，无须搭建服务器，即可使用云端能力。云开发能力从基础库 2.2.3 开始支持。

• 模式切换下拉菜单：用于在小程序模式和插件模式之间进行切换。

• 编译下拉菜单：用于切换编译模式，默认为普通编译，可以添加其他编译。

• 编译：编写完微信小程序的代码后， 需要经过编译才能运行。默认情况下，直接按 Ctrl+S 快捷键保存代码文件，微信开发者工具就会自动编译运行该代码。 若想手动编译， 则单击 “编译” 按钮即可。

• 预览：单击 “预览” 按钮会生成一个二维码，使用微信扫描二维码，即可在微信中预览小程序的实际运行效果。

• 真机调试：可以实现直接利用开发者工具，通过网络连接对手机上运行的微信小程序进行调试，帮助开发者更好地定位和查找在手机上出现的问题。

• 清缓存：用于清除模拟器缓存、编译缓存。

• 上传：用于将代码上传到微信小程序管理后台，可以在 “开发管理” 中查看上传的版本，将代码提交审核。需要注意的是，如果在创建项目时使用的是测试号，则不会显示 “上传” 按钮。

• 版本管理：用于通过 Git 对小程序进行版本管理。

• 详情：用于查看和修改微信小程序的基本信息、本地设置和项目配置。

• 消息：用于显示消息通知。

模拟器：

模拟器可以模拟微信小程序在微信客户端的运行效果。微信小程序的代码通过编译后可以在模拟器上直接运行。开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

编辑器：

编辑器分为左右两栏，左栏为目录树，主要用于展示当前微信小程序项目的目录结构；右栏为代码编辑区，用于编写文件中的代码。在左栏中单击某个文件，就可以在右栏中对该文件进行编辑，也可以在左栏中通过双击打开多个文件，这些文件会在右栏中显示

调试器：

• Wxml：Wxml 面板，用于查看和调试 WXML 和 WXSS。

• Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。

• Sources：源代码面板，用于显示当前项目的脚本文件，在该面板中开发者看到的文件是经过处理之后的脚本文件。

• Network：网络面板，用于记录网络请求和响应信息，根据它可以进行网络性能优化。

• AppData：App 数据面板，用于查看或编辑当前微信小程序运行时的数据。

• Storage：存储面板，用于查看和管理本地数据缓存。

• Sensor：传感器面板，用于模拟地理位置、重力感应。

• Security：安全面板，用于调试页面的安全和认证等信息。

• Trace: 跟踪面板， 用于真机调试时跟踪调试信息。

微信小程序的项目设置

在微信开发者工具中，可以对微信小程序的项目进行设置，主要包含以下 4 个方面。

• 基本信息的设置
• 性能分析
• 本地设置
• 项目配置

项目设置 —— 基本信息的设置

在微信开发者工具中，选择菜单栏的 “设置”，然后选择 “项目设置”，将会弹出一个用于项目设置的选项卡，单击 “基本信息” 项，即可对项目的基本信息进行设置，如下图所示：

项目设置 —— 性能分析

单击 “性能分析”，即可查看项目的线上数据和本地情况，供开发者有针对性地进行优化，如下图所示：

项目设置 —— 本地设置

单击 “本地设置”，即可对项目进行本地设置，如下图所示：

• 调试基础库：选择基础库的版本，用于在对应版本的微信客户端上运行。高版本的基础库无法兼容低版本的微信客户端。版本号后边的百分比表示该版本的用户占比。本书中使用的基础库的版本为 2.25.2。

• 将 JS 编译成 ES5：选中该项后，JS 代码的语法将转换为 ES5。

• 上传代码时样式自动补全：选中该项后，在预览、真机调试、上传时文件中的样式将自动补全，需要注意的是，勾选此项会增大代码包的体积。

• 上传代码时自动压缩样式文件、上传代码时自动压缩脚本文件和上传代码时自动压缩 WXML 文件：选中对应选项后，在预览、真机调试、上传时文件中的样式文件、脚本文件、WXML 文件将自动压缩。

• 上传时进行代码保护：选中该项后，微信开发者工具会尝试对项目代码进行保护。

• 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书：正式发布的微信小程序的网络请求需要校验这些信息，在开发过程中可以选中该项，开发工具将不校验这些信息，从而有助于开发者在开发过程中更方便地完成调试工作。

• 启用自定义处理命令：选中该项后，微信开发者工具在编译前、预览前、上传前这三个时机调用开发者自定义的命令，开发者可以对代码进行一些预处理。

项目设置 —— 项目配置

单击 “项目配置”，即可查看项目的域名信息和高级配置，如图：

• 域名信息：用于显示项目的安全域名信息。
• 高级配置：用于显示代码包的大小、Tabbar 的个数等信息。

常用快捷键

快捷键 —— 编辑相关的快捷键

快捷键 —— 工具相关的快捷键

快捷键 —— 界面相关的快捷键

# 6. 微信小程序的项目成员

一般情况下，微信小程序中项目成员的组织结构如下图所示：

• 项目管理者负责统筹整个项目的进展和风险，把控微信小程序对外发布上线的节奏。产品组、设计组、开发组和测试组之间相互配合，协调工作，共同完成微信小程序项目。

• 项目成员：表示参与微信小程序开发、运行的成员，可登录微信小程序管理后台，包括运营者、开发者及和数据分析者。

• 体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。

微信小程序成员管理的示意图如下图所示：

管理员可以添加或删除项目成员和体验成员，项目成员也可以添加或删除体验成员。

项目成员的权限

在一个微信小程序中，每个项目成员的权限各有不同，只有为每个项目成员分配了各自的权限，才能保证项目的正常进行。例如开发者有开发者权限、登录权限等，下面将介绍不同项目成员拥有的权限，具体如下表所示：

接下来对项目成员的各种权限进行解释说明：

• 登录：可登录小程序管理后台，无须管理员确认。

• 版本发布：小程序版本发布、回退。

• 数据分析：使用小程序统计模块查看小程序数据。

• 开发能力：可使用微信开发者工具和开发版小程序进行开发；在开发模块可使用开发管理、微信开发者工具和云开发等。

• 修改小程序介绍：修改小程序在主页展示的功能介绍。

• 暂停 / 恢复服务：暂停或恢复小程序线上服务。

• 设置可被搜索：设置小程序是否可被用户主动搜索。

• 解除关联移动应用：可解绑小程序已关联的移动应用。

• 解除关联公众号：可解绑小程序已关联的公众号。

• 管理体验者：添加或删除小程序体验者。

• 体验者权限：使用体验版小程序。

• 微信支付：使用小程序微信支付（虚拟支付）模块。

• 小程序插件管理：运营者可进行小程序插件开发管理、申请管理和设置。

• 游戏运营管理：可使用小游戏管理后台的素材管理、游戏圈管理等功能。

• 推广：在推广模块使用小程序流量主、广告主等功能。

微信小程序的上线发布流程

一个微信小程序从开发完到发布上线，一般分为以下 3 个步骤：

1. 上传代码

打开微信小程序，在微信开发者工具的工具栏中单击 “上传” 按钮，页面中弹出提示框，根据提示填写相应的信息，然后单击 “上传” 按钮，即可上传代码。

登录微信小程序管理后台，在左侧边栏中单击 “版本管理”，即可进入版本管理页面，查看开发版本，即可查看刚才提交上传的版本。

2. 提交审核

单击 “提交审核” 按钮，根据页面提示信息进行操作，即可提交已上传的版本并进行审核。

提交审核后在审核版本中会出现正在审核的版本，审核需要一定时间，PPT 中不再演示。

3. 发布

审核通过后审核版本中将显示 “发布” 按钮，单击该按钮，即可完成微信小程序的发布。

# 7. 习题

# 一、 填空题

1. 微信小程序是运行在 微信 之上的应用。
2. 微信小程序开发完成后需要通过 “上传” 按钮将代码上传到 小程序管理后台 。
3. 微信小程序项目中的 app.json 文件是全局配置文件。
4. 微信开发者工具中用于保存文件的快捷键是 ctrl +s 。
5. 在微信小程序中，每个页面由 4 个文件组成，分别是 WXML 文件、 WXSS 文件、JSON 文件和 JS 文件

# 二、 判断题

1. 在微信小程序中，AppID 是每个小程序的唯一标识，每个小程序账号只有一个 AppID。
2. 微信小程序项目中 app.js 文件是全局样式文件。
3. 通常称微信客户端为微信小程序提供的环境为微信小程序的宿主环境。
4. 微信小程序具有无须安装、触手可及、用完即走、无须卸载等特点。
5. 项目成员表示参与微信小程序开发、运行的成员。

# 三、 选择题

1. 下列选项中，关于微信小程序说法错误的是（ ）{.gap} 。

   • 微信小程序是运行在微信之中应用
   • 微信小程序的体积非常小
   • 微信小程序不可以跨平台
   • 通过 “扫一扫” 或 “搜一搜” 即可打开对应的微信小程序

2. 下列选项中，不属于微信小程序特点的是（ ）{.gap} 。

   • 无须安装

   • 无须卸载

   • 体积大

   • 入口丰富

3. 下列选项中，用于在微信开发者工具中输出调试信息的面板是（ ）{.gap} 。

   • Wxml

   • Console

   • Sources

   • Network

4. 下列选项中，关于微信小程序项目目录结构说法错误的是（ ）{.gap} 。

   • pages 目录用于存放所有微信小程序的页面

   • app.wxss 文件定义了微信小程序项目的全局样式

   • sitemap.json 文件是微信小程序项目的全局配置文件

   • app.js 文件是微信小程序项目的入口文件

5. 下列选项中，关于微信开发者工具说法错误的是（ ）{.gap} 。

   • 工具栏 “预览” 按钮用于在微信中进行预览

   • 菜单栏中 “文件” 项的主要作用是新建文件、保存文件或关闭文件等

   • 模拟器可以模拟小程序在微信客户端的运行效果

   • 编辑器中只能打开一个文件

# 四、 简答题

1. 请简述微信小程序的特点。

   微信小程序具有无须安装、触手可及、用完即走、无须卸载的特点。用户在使用微信小程序时无须安装，直接使用，不占用存储空间；在使用微信小程序后，可以用完即走，无须卸载。除此之外，微信小程序还具有名称唯一、入口丰富和传播能力强等特点。

2. 请简述微信小程序项目的创建过程。

   （1）首次打开微信开发者工具时，会出现一个登录界面，在登录界面中，可以使用微信扫码登录微信开发者工具，微信开发者工具将使用这个微信账号的信息进行微信小程序的开发和调试。

   （2）使用微信扫码登录成功后会进入微信开发者工具的项目选择界面，单击 “+” 进入微信小程序项目的创建页面。将微信小程序项目的创建页面中项目名称、目录、AppID、开发模式、后端服务和模板选择等内容填写完成后，单击 “确定” 按钮创建微信小程序项目。