2.3　安装开发者工具

万事俱备，只欠东风。开发各种程序都需要有相应的开发环境。为了方便开发者开发微信小程序，微信官方提供了微信开发者工具。它可以让我们很方便地完成小程序的 API 和页面的开发调试、代码查看以及编辑、预览和发布等功能。使用微信开发者工具必须联网。微信官方提供了 Windows 32 位、Windows 64 位以及 mac OS 系统下载包，你可以根据你的操作系统选择合适的版本下载安装。本书主要使用 Windows 版本进行讲解，Windows 版本和 macOS 版本大同小异，不影响读者阅读本书的内容。

开发者工具提供了以下 3 个版本的安装包：

(1) 稳定版，测试版缺陷收敛后转为稳定版；

(2) 预发布版，一般包含大的特性，通过了内部测试，稳定性尚可；

(3) 开发版，即日常构建版本，用于尽快修复缺陷和敏捷发布小的特性，开发者自测验证，稳定性欠佳。

我们一般推荐大家使用稳定版进行开发。但是因为稳定版的发布周期较长，往往一两个月才会出一次版本，因此如果在使用稳定版时遇到 bug，可以酌情采用预发布版和开发版的安装包。

打开开发者工具后，用微信扫一扫即可进入项目选择界面。单击“新增小程序”标志，进入图 2-4 所示的“新建项目”页面。我们可以在这里添加新的项目，并填写目录、AppID 等内容。其中，开发模式有小程序和插件两种，我们将在第 4 章和第 5 章分别介绍，读者可以根据不同的开发模式选择对应的章节进行学习。后端服务也有两种方式可供选择，分别是“不使用云服务”和“小程序·云开发”，本书第三部分详细介绍了云开发的内容。

图 2-4　新建项目界面

新建项目后，我们就可以看到小程序的开发主界面了，如图 2-5 所示。

图 2-5　小程序开发主界面

开发者工具可以分为 4 个部分。

(1) 最上面是导航菜单栏，封装了我们开发时经常使用的一些操作，例如真机调试等。

(2) 开发者工具左侧是模拟器预览，可以实时预览当前的代码，帮助我们快速调试代码，在开发过程中我们需要经常关注这里。

(3) 右上部分是编辑器界面，在这里我们可以编写代码。编辑器具有语法自动补全的功能，在开发过程中，会自动提示用户可能使用的语法，并给出一些相关注解，帮助完善开发内容。当然，如果你已经有了自己使用得比较顺手的编辑器，那么也可以不使用开发者工具自带的编辑软件进行代码的开发。

(4) 右下部分是控制台界面，你在代码中打印的调试信息可以在这里查看。该界面有 Console、Network、Storage、AppData、Wxml 等窗口。Console 窗口包含了在开发中小程序输出的错误信息和调试信息。Network 窗口用来观察小程序发送的请求和返回信息。Storage 窗口用来显示小程序代码中主动存储的缓存信息。AppData 窗口用来显示小程序当前页面的数据信息，因为小程序实现了数据的双向绑定，因此我们在调试的时候可以直接在这里修改当前的页面数据，它会实时地展示到调试预览页面上。Wxml 窗口是帮助开发者查看页面的真实 DOM 结构，允许用户直接修改 DOM 树或者对应的样式。

接下来，我们可以对开发者工具做一些设置。打开右上角的“详情”即可根据需要做一些编译相关的配置修改。例如，本地设置如图 2-6 所示。

图 2-6　小程序开发者工具本地设置

其中比较重要的是“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”，如果你有域名还未申请或还未通过审核，把这个选项勾选上就可以跳过白名单检查。

“工欲善其事，必先利其器”，熟悉使用开发者工具界面和操作方法将为我们后续的开发带来极大的便利。关于小程序开发者工具的使用技巧，你可以在熟悉小程序开发模式后，阅读第 9 章进一步学习。