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

1.3.1 创建项目

在开发工具里单击小程序图标，进入小程序“新建项目”界面，可以添加一个新的项目。在这个界面里需要填写项目名称、目录、AppID，如图1.7所示。

微信小程序AppID，需要在“微信公众平台”中登录1.2.2小节中注册的账户，在“设置”→“开发设置”中查看，如图1.8所示。

注意：不可直接使用服务号或订阅号的AppID，只能使用微信小程序的AppID。

注意：如果要以非管理员微信号在手机上体验该小程序，还需要绑定开发者。即在“用户身份”→“开发者”模块，绑定需要体验该小程序的微信号。

输入AppID后，建立一个“demo”文件夹，并设置为项目目录，项目名称输入“demo”，开发模式选择“小程序”，后端服务可以选择“小程序·云开发”或者“不使用云服务”，单击“新建”按钮即可，如图1.9所示。

“小程序·云开发”和“不使用云服务”区别如下。

（1）开发者可以使用云开发开发微信小程序、小游戏，无须搭建服务器即可使用云端能力。云开发为开发者提供了完整的原生云端支持和微信服务支持，弱化后端和运维概念，无须搭建服务器，使用平台提供的API进行核心业务开发即可实现快速上线和迭代。同时，这一能力同开发者已经使用的云服务相互兼容，并不互斥。

（2）云开发提供云函数、数据库、存储、云调用四大基础功能。

（3）如果没有一个已经备案过的域名和一台云服务器，又想使项目快速上线，且对云存储、云数据库的要求不高，那么小程序云开发非常适合，零开发成本即可发布一款微信小程序。

（4）如果日活用户非常多，云开发提供的云服务配置不够用，又不想花费过多进行升级，那么使用小程序云开发并不太合适。

（5）创建项目的时候如果需要腾讯公司的小程序云开发，就选择“小程序·云开发”选项，如果需要自己搭建服务器，可以选择“不使用云服务”选项。

1.3.2 开发者工具界面

创建项目后，进入微信开发者工具界面。如图1.10所示。开发者工具界面大致可以分为6个区域：①菜单栏区域；②模拟器、编辑器、调试器显示与隐藏区域；③模拟器区域；④编辑器区域；⑤工具栏区域；⑥调试器区域。

① 菜单栏区域：包含项目、文件、编辑、工具、界面、设置、帮助、微信开发者工具8个菜单。

② 模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区域、编辑器区域、调试器区域的显示与隐藏的便捷操作按钮。

③ 模拟器区域：用来显示小程序项目的界面。

④ 编辑器区域：用来进行代码编写的区域。

⑤ 工具栏区域：包含编译、预览、真机调试、切后台、清缓存、上传、版本管理、详情8个工具栏按钮。

⑥ 调试器区域：用来进行调试的区域。

1.3.3 菜单栏

菜单栏中的菜单项集成了软件的一些常规操作和功能使用。

“项目”菜单：包括新建项目、导入项目、打开最近项目、新建代码片段、导入代码片段、查看所有项目、关闭当前项目。这些命令都是对小程序项目或者代码片段进行管理使用的。

“文件”菜单：包括新建文件、保存、保存所有、关闭文件。这些命令可以新建文件、保存文件、关闭文件。

“编辑”菜单：是对代码进行管理的一个菜单，具有格式化代码等功能。

“工具”菜单：包括编译、刷新、预览、清除缓存等功能。

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

“设置”菜单：包括通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置。

“帮助”菜单：包括文档搜索、开发者社区、开发者文档。

“微信开发者工具”菜单：包括对开发者工具进行升级、回退、退出等功能。

1.3.4 模拟器区域

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

1.3.5 编辑器区域

编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构，另一部分用来进行代码编辑，如图1.12所示。

（1）在项目目录上单击鼠标右键可以新建目录、Page、Component、JS、TS、JSON、WXML、WXSS、WXS文件，对文件目录及文件进行重命名、删除、查找、硬盘打开、在终端中打开等操作，如图1.13所示。

（2）在代码编辑区域里编写代码，可以通过模拟器区域实时预览编辑的情况，如图1.14所示。修改WXSS、WXML文件，会刷新当前页面（page）；修改JS文件或者JSON文件，会重新编译小程序。

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

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

1.3.6 调试器区域

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

除了这6个调试选项外，还有一些不常用的工具：Application 为记录加载的资源信息，Security为安全和认证，Audits为性能诊断和优化建议，Sensor用来选择模拟地理位置，Trace为性能监测数据，在这里不做详细介绍。

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

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

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

（4）“Storage”窗口用于显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况，如图1.19所示。

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

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

1.3.7 工具栏区域

1.编译操作

开发者可以通过“编译”按钮或者使用组合键Ctrl+B编译当前小程序代码，并自动刷新模拟器。为了方便调试，开发者还可以添加或选择已有的自定义编译条件进行编译和代码预览，如图1.22所示。

2.预览

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

3.真机调试

单击“真机调试”按钮，生成二维码，可以在手机上进行代码调试，手机界面如图1.24所示。也可以查看页面布局及请求情况，如图1.25所示。

4.前后台切换

工具栏中的“切前/后台”按钮可以帮助开发者模拟一些客户端的环境操作。例如，在操作微信小程序过程中，突然进来电话，如果接电话，小程序就会从前台进入后台，重新访问小程序时，又会从后台进入前台，如图1.26所示。

5.清缓存

清缓存包括清除数据缓存、清除文件缓存、清除编译缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除7个功能，如图1.27所示。

6.上传

小程序开发完成后，需要上传到腾讯服务器进行版本发布，如图1.28所示。

1.3.8 常用快捷键

1.格式调整快捷键

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：编译当前代码，并自动刷新模拟器。

2.光标相关快捷键

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

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

Ctrl+I：选中当前行。

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

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

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

Ctrl+D：选中匹配。

Ctrl+U：光标回退。

3.界面相关快捷键

Ctrl+\：隐藏侧边栏。

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