1.3 制作第一个小程序
不管学习什么技术，都需要迈出第一步，纸上谈兵是无法进步的，所以建议将本书所有的实战项目都照着做一下。微信开发者工具中的大多数操作按钮提示都是中文的，使用起来也相对便捷一些，所以就不需要抱怨又要学一个新的工具了。现在开发环境和工具都已安装完毕，让我们开始创建第一个小程序！本节先创建一个新的项目，然后介绍微信开发者工具的使用方法，了解项目的结构。
1.3.1 HelloWorld
打开之前安装的微信开发者工具，登录自己的微信就可以使用了。
【示例1-1】
单击“新建项目”按钮，创建一个经典的HelloWorld项目。因为暂时只是练习用，所以AppID选择测试号，如图1.12所示。
图1.12 创建新的微信小程序
进入到项目中看到如图1.13所示的窗口。微信开发者工具如（微信小程序）的理念一般，排列的结构和功能设计简单明了。该应用整体上可以分为顶部的导航栏、模拟器、编辑器、调试器四个部分，右侧写代码，左侧看样式，底部输出调试。顶部导航栏中的每个按钮都有中文标记，基本上不难理解它的意思，之后用到的时候会讲，这里就不单独列出用法了。在接下来的小节中，我们将分别对模拟器、编辑器、调试器这3个模块的基本用法进行讲解。
图1.13 微信开发者工具主界面
1.3.2 编辑器的使用
编辑器算是中规中矩的，左侧是目录、文件的层级列表，右侧为代码部分。这部分的功能并不复杂，这里首先解释左侧的目录区。从左到右各按钮的功能分别是新建文件／目录、文件／内容搜索、打开项目所在的文件夹、收起所有展开的目录、隐藏左侧目录区。
值得一提的是，新建时会把文件建立在根目录，如果需要在某个目录下，就在该目录下右击后新建。该新建功能封装得比较丰富，除了目录和文件以外，还支持直接创建页面（Page）和组件（Component）。以创建页面功能为例，微信开发者工具会自动生成js、json、wxml、wxss四个文件，并会自动在文件里填充页面所需的基本代码，最后还会将页面自动注册到app.json，可以说是极大地提高了开发者的使用体验。
右侧写代码的区域是中规中矩的，比如查找、剪贴、粘贴、格式化代码等基本都有，具体的快捷键和其他编辑器差不多，如图1.14中的右键菜单所示。
图1.14 代码编辑区右键菜单
1.3.3 调试器的使用
调试器部分的内容与Chrome的开发模式比较相似，整体功能也非常全面，我们从中选择几个比较常用的功能进行讲解。
（1）首先解释Console。它最常用的功能就是在我们开发的过程中输出一些数据进行调试，当然直接在Console里写JS代码也是可以的。除此之外，微信小程序还会提醒是否使用了过期的方法、列出页面索引等，如图1.15所示。
图1.15 微信开发者工具调试器
（2）接着解释Sources。在该选项卡中可以看到文件的目录，而且支持断点功能。以HelloWorld项目为例，找到pages/index/index/index.js，在onLoad函数中设置一个断点，单击顶部的编译按钮重新运行项目，就可以看到断点生效了，如图1.16所示。
图1.16 在Sources中进行断点调试
（3）Network的功能也很简单明了。所有的网络请求都能在这里看到，以项目中用户头像图片的请求举例。在Headers中，我们可以看到请求的URL、请求类型、状态码、Content-Type等必要信息，如图1.17所示。如果不看图片之类的请求，可以在上方切换分类为XHR。
图1.17 在Network中查看请求头
（4）Storage也比较常用，我们使用wx.setStorage存储的数据都可以在这里一目了然地看到，与前端localStorage不同的是，除了字符串，其他对象、数组等类型都可以存储。
1.3.4 模拟器的使用
回到图1.13，我们可以看到模拟器默认在屏幕左边。
这里的功能也不复杂，顶部第一个按钮用于切换模拟器的类型，比如iOS设备、Android设备等都在其中。与Chrome不同的是，切换完不需要手动刷新也可以看到完整的效果，模拟器会自动重载。
剩下的几个功能为页面缩放比例调整、网络类型切换、模拟操作（返回键等）、静音、为模拟器单独创建窗口。