1.3 微信小程序开发工具介绍

“工欲善其事必先利其器”，在开始编写代码之前，先来了解一下微信官方提供的微信小程序开发工具，这个开发工具可以对微信小程序进行项目管理、开发调试、发布、功能设置等。

1.3.1 项目创建

打开微信小程序开发工具，如图1-7所示。上面为微信开发工具的版本号，中间为要创建的项目类型，底部为当前登录的微信账号。

单击“小程序项目”可以编辑、调试小程序项目。如果本地没有项目，如图1-8所示，那么直接创建项目；如果项目已经存在，如图1-9所示，那么右侧会显示出已经存在的项目，包括程序的首页截图，项目的Logo、名称和路径，单击右下角的“+”创建新的项目。

也可以单击“管理项目”，然后单击右下角的“新增”来创建新的项目，如图1-10所示。

如果已经打开了项目，可以单击菜单栏中的“项目”->“新建项目”来新建项目。如图1-11所示。

图1-8中“项目目录”栏指的是项目存放的路径。AppID就是我们在1.2.2节开发准备中所提到的（在“设置”->“开发设置”中查看AppID），不填写AppID的话会有部分功能不能使用，如预览、上传等。“项目名称”即项目的名字，与发布后显示的名字无关。

勾选“建立普通快速启动模板”，系统会帮你建立一个小的Demo。

需要注意的是，最好将每一个项目都单独存放在一个目录下，同一个目录下不要存放多个项目，并且项目名称与项目路径中最好不要使用中文。

1.3.2 项目删除

如果想删除项目，首先到如图1-10所示的项目管理页面，然后单击项目后面的“垃圾桶”图标进行删除，或者选中项目，单击左下角的“删除”。

单击菜单栏中的“查看所有项目”，如图1-12所示，可以进入如图1-9所示的页面，然后单击“管理项目”进入如图1-10所示的项目管理页面。

注意，微信小程序提供的项目删除功能不会删除本地文件，所以建议再手动删除本地项目文件。

1.3.3 开发工具界面介绍

打开项目，如图1-13所示。

上面为工具栏，左侧为模拟器窗口，右上为代码编辑窗口，右下为调试窗口。

工具栏如图1-14所示。

从左往右开始介绍工具栏：首先是当前开发者的微信头像，可以查看接收的信息。然后是控制模拟器、编辑器、调试器窗口的开关，单击可以进行对应窗口的打开、关闭操作。往右是开发模式的选择，这里创建的是小程序，所以显示的是小程序模式。再往右是编译、预览，可以自定义编译模式来模拟用户进入小程序的状态，如扫描进入，单击分享进入等。预览则会生成一个二维码，用手机微信App扫描可以在真机上进行演示。

真机调试即手机远程调试，与预览效果差不多，区别是远程调试的打印日志会显示在电脑端的调试面板中。

切后台是模拟用户进入后台的各种效果、用户来电等情况。清缓存是模拟用户清除登录信息、存储信息、授权信息等情况。

模拟器窗口如图1-15所示。

左上角可以切换模拟器的屏幕尺寸，以查看不同分辨率下的页面展示效果，也可以进行自定义操作。往右是一个百分比，指定屏幕的缩放显示比例。单击上图标可以把窗口独立出来，方便调整位置。

编辑窗口如图1-16所示。

左侧为文件目录，右侧为当前打开的文件内容。

调试窗口如图1-17所示，与网页端的调试一模一样。

单击窗口右上角的按钮可以使窗口独立出来，方便开发者移动位置。

1.3.4 项目调试介绍

Console面板：用于打印调试，如图1-18所示。

当代码有错误的时候，错误信息会显示在Console面板中。同时，当执行console.log()打印代码的时候，也会把里面的内容显示在Console面板中，也可以在Console面板中输入JavaScript代码并执行。

Sources面板：进行断点调试，如图1-19所示。

左侧显示的是项目的文件目录；中间是某个文件的内容，文件内容的左侧有行数标识，点击行数标识可以添加断点，进行断点调试；右侧Watch可以查看某个元素值的变化，Watch上面的按钮控制单步执行和断点执行。

Network面板：用于网络查看，如图1-20所示。

查看发送的网络请求及参数、接收到的响应信息等具体情况，也可以看到每个请求的用时等详细情况。

Wxml面板：用于查看页面元素，如图1-21所示。

查看页面上的元素的结构，查看CSS样式等，调试面板左上角的图标可以快速地选择要查看的Wxml元素。

AppData面板：用于查看当前页面的全局数据，如图1-22所示。

可以实时地查看当前页面的数据值，方便观察数据的变化情况。