学习计算机语言，一般会最先接触“Hello World! ”程序。与之类似，要掌握微信小程序的开发，我们也先来创建自己的第一个小程序实例。
1.1 准备工作
微信小程序是继订阅号、服务号、企业号之后，微信公众平台上全新的一种连接用户与服务的方式。
开始创建之前，我们需要做些准备工作，包括工作账号及项目ID获取，开发环境要求与搭建等，这也是开发小程序必备的前提工作。
1.1.1 成为微信公众平台开发者
成为微信公众平台的开发者，是小程序开发的首要条件。只有成为微信公众平台开发者，才可以使用公众平台的各种开发接口。如果你已经是开发者，则可以跳过本节。
一般来讲，开发者的微信号就是小程序的开发者ID。要注意的是：微信号可以独立存在，而开发者ID不能独立存在，它必然要绑定于某个公众平台服务项目，如公众号或小程序。因此，若要成为开发者，还需要有公众平台服务（订阅号、服务号、企业号、小程序）账号或归属于某个公众平台服务的开发者。如果还没有公众平台小程序服务账号，需要先注册，注册入口为：https://mp.weixin.qq.com/，点击首页右上角“立即注册”进行注册。经过以下步骤完成小程序服务账号注册：
1）填写账号信息。
2）邮箱激活。
3）信息登记。
注意
目前小程序项目不仅开放给企业、政府、媒体及其他组织，也已支持个人开发者注册，但对个人开发者所支持的开发类目与API能力相对较少或受限，如暂不支持电子商务与网上超市等类目，暂不支持个人认证、支付与卡券等API。
完成注册后，可以登录公众平台（网址为https://mp.weixin.qq.com/）并完善微信小程序信息（如小程序名称、头像、小程序介绍、服务范围等）。
然后我们就可以绑定开发者了。登录后进入“用户身份”页面，选择“开发者”进行绑定，如图1-1和图1-2所示。
图1-1 用户身份管理
图1-2 绑定开发者
注意
已认证的小程序最多可以绑定20名开发者。未认证的小程序最多可以绑定10名开发者。
由于个人不能注册小程序账号，但这并不意味着个人不能进行小程序开发，这时可以通过已有的订阅号（或新注册的订阅号）开发小程序。步骤如下：
1）使用订阅号账号，登录公众平台（用电脑在https://mp.weixin.qq.com/中登录），在左边菜单中，选择“开发”→“基本配置”，点击“开通”，成为开发者。
2）在左边菜单中，选择“开发”→“开发者工具”→在页中点选“Web开发者工具”的“进入”，点选“绑定开发者微信号”，如图1-3所示。成功后可以看到个人头像；如图1-4所示。之后，开发者微信号可在Web开发者工具中进行公众号或小程序的开发与调试。
图1-3 开发者管理
图1-4 绑定开发者微信号
注意
绑定后，开发者手机的微信里会收到一条消息，需要接受邀请，才能成为真正的开发者。
1.1.2 获取小程序AppID
成功注册小程序账号后，会有唯一的AppID。登录https://mp.weixin.qq.com，在页面左边的菜单中，点选“设置”→“开发设置”，可查看到微信小程序的AppID，如图1-5所示。
图1-5 开发者设置
注意
这里不可使用公众号（服务号或订阅号）的AppID。没有AppID也可以进行小程序开发练习，只是部分功能受限，且不能上传发布。
要在手机上体验此AppID的小程序，默认只有公众平台小程序账号的管理员微信号可以；其他微信号还需要进行“绑定开发者”的操作。即在“用户身份”-“开发者”模块中，绑定需要体验该小程序的微信号。
1.1.3 安装开发者工具包
作为开发者，需要有开发环境。这里需要下载安装开发者工具包。截止于2017年5月9日，微信团队提供的开发者工具包版本为0.17.170900，有Windows 32位、Windows 64位及Mac三种版本。官方下载地址为：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。成功下载适当的版本后，在开发者的电脑上进行安装。下面以Windows 64位安装包为例，描述安装过程。
双击下载的安装包，将出现安装向导，如图1-6所示。
图1-6 安装向导之一
点击“下一步”，完成开发者工具包的安装，如图1-7所示。
图1-7 安装向导之二
运行“微信Web开发者工具”，将会要求开发者使用手机微信扫码登录，如图1-8所示。
图1-8 微信Web开发者工具启动界面
至此，我们创建第一个小程序所需的准备工作全部完成。
1.2 创建第一个小程序——Hello WXapplet
事不宜迟，我们马上开始创建第一个微信小程序——Hello WXapplet。
在安装开发者工具的电脑上运行“微信Web开发者工具”，通过开发者的微信扫码进入后，即可得到如图1-9所示的界面。
图1-9 添加小程序项目
点击“添加项目”，填入前面我们获得的AppID（无AppID可以忽略），并输入项目名称“Hello WXapplet”，选定本地文件夹作为“项目目录”，如图1-10所示。
图1-10 指定项目名称
勾选“在当前目录中创建quick start项目”后，点击“添加项目”按钮，即已成功创建了我们的第一个微信小程序项目——Hello WXapplet。
Hello WXapplet项目创建成功后，即进入并看到完整的开发者工具界面。我们创建的Hello WXapplet这个小程序只包含两个页面：首页及信息页，实现一些简单的功能。其中，首页显示当前登录的微信号头像及昵称。点击首页，则进入信息页，可以查看到小程序启动的日志信息。我们将在第2章中全面解析Hello WXapplet这个项目的代码。
在进行Hello WXapplet小程序项目代码介绍之前，我们需要熟悉一下微信Web开发者工具的操作。
1.3 微信Web开发者工具的操作与使用
“工欲善其事，必先利其器”。熟悉开发者工具界面与操作，将为我们今后的开发带来极大的便利。
1.3.1 界面与操作
微信开发者工具功能非常强大与便捷，集成了开发调试、代码编辑及程序发布等功能。主界面如图1-11所示。
图1-11 微信开发者工具-主界面
开发者工具界面基本划分为四大区域：1区“顶部菜单”，2区“导航菜单”，3区“目录文件/模拟运行”，4区“编辑/调试开发”。1区与2区是固定的。3区与4区会依据选择导航菜单区的不同功能或模式有所不同。
1区“顶部菜单”最为简单，开发者使用到的机会也不多。“设置”是配置开发机运行程序时如何连接网络（见图1-12）。“动作”是指“刷新”“后退”“前进”等操作，主要在网页或界面调试时使用。“帮助”则是本Web开发者工具的版本与版权声明等信息。
图1-12 微信开发者工具-设置
2区“导航菜单”是开发者经常切换使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。下面重点介绍这两个功能。
1.3.2 编辑功能
我们先来看其中的“编辑”功能。点击“编辑”后出现的界面如图1-13所示。
图1-13 微信开发者工具-编辑
原来的3区部分就变成了项目的目录与文件列表区，4区部分则变成了对应所选文件的代码编辑区，我们也称之为代码编辑器。
微信开发者工具提供的代码编辑器，可以对当前项目对应文件进行编码工作，同时也可以对文件进行基本的添加、删除及重命名操作。
代码编辑器现在支持4种文件的编辑：wxml、wxss、js以及json文件。当然编辑器支持了较为完善的自动补全功能，大大方便了开发者。
代码编辑器还支持快捷键操作，而且快捷键功能与行为基本保持与其他编辑器一致。比如光标相关快捷键操作如下：
■Ctrl+End：移动到文件结尾。
■Ctrl+Home：移动到文件开头。
■Ctrl+i：选中当前行。
■Shift+End：选择从光标到行尾。
■Shift+Home：选择从行首到光标处。
■Ctrl+Shift+L：选中所有匹配。
■Ctrl+D：选中匹配。
■Ctrl+U：光标回退。
再比如，格式调整的快捷操作如下：
■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：在当前行上方插入一行。
快捷键可以说是程序开发者的至爱，编辑器也支持自定义快捷键。关于如何自定义快捷键，可参考下节“调试”功能中的“快捷键设置项”。
1.3.3 调试功能
我们再来看导航菜单区的“调试”功能，这是开发者检测代码结果实现与排查问题的核心工具，界面如图1-14所示。
图1-14 微信开发者工具-调试
我们看到，这时3区变成了“模拟器”，4区变成了调试工具与输出区。
模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现，绝大部分的功能与API调用均能在模拟器上正确呈现。
调试工具与输出区的顶部是一行菜单，分别是：Console、Sources、Network、Storage、AppData、Wxml，最右边的扩展菜单项是定制与控制开发工具钮“…”。下面我们一一进行简单介绍。
注意
本章节涉及的代码及含义，读者若不理解也不需要在意，在这里主要了解菜单的功能与操作即可。
Console页：控制台信息页，它有两个作用：
1）开发者直接在此输入代码并调试，如图1-15所示。
图1-15 Console页调试
2）显示小程序的错误输出，如图1-16所示。
图1-16 Console页输出错误提示
Sources页：源文件调试信息页，用于显示当前项目的脚本文件，如图1-17所示。
图1-17 Sources页
注意
因为小程序框架会对脚本文件进行编译工作，在源文件页面中我们看到的文件其实是经过处理之后的脚本文件，所以我们编写的代码都被包含在define函数中。对于页面（page）的代码，则在打包脚本文件尾部，require函数会完成主动调用动作。
Network页：网络调试信息页，用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息，如图1-18所示。
图1-18 Network页
Storage页：数据存储信息页，用于显示当前项目使用存储API（wx.setStorage或wx.setStorageSync）接口的数据存储情况。比如，我们在Console中输入：wx.setStorage ({key:"name", data:"Roeyxiong"})，则在Storage页面中就可以看到我们存储了一个Key-Value数据，如图1-19所示。
图1-19 Storage页
AppData页：用于调试显示当前小程序项目此时此刻的应用具体数据，实时地回显项目数据调整情况。即我们可在此处编辑修改数据，反馈到当前界面上去。比如，我们将“Hello World”这个字，改为“Hello WXApplet”，界面上马上就显示出相应的效果，如图1-20所示。
图1-20 AppData页
注意
这里的调试修改并不会保存到代码中。
Wxml页：用于帮助开发者调试WXML转化后的界面。通过这里的调试可以看到真实的页面结构及对应的WXSS属性，同时可通过修改对应的WXSS属性，在模拟器中即时查看修改后的情形。并且，可以通过调试区左上角的选择器
，快速地找到页面中组件所对应的WXML代码，如图1-21所示。
图1-21 Wxml页
例如，我们先点击①定位，在模拟器中选择定位点②，快速定位到WXML代码段③。然后我们可以在最右边的样式④中进行修改调配，并立即查看效果。
最右边的扩展菜单项——定制与控制开发工具钮“…”，主要包括开发工具的一些定制与设置，如“Show Console”（显示控制台页），“Search all files”（查找文件），“Shotcuts”（快捷键自定义或配置），“Settings”（开发者工具的环境参数设定，包括喜好Preferences，工作区域Workspace、黑箱Blackboxing，支持模拟的手机设备型号Devices，网络带宽及时延限制Throttling等），“Help”（帮助）以及“More tools”（更多工具）。这些工具包括：Inspect devices（检测设备）、Network conditions（网络条件）、Rendering settings（渲染设定）、Sensors（重力传感器）。这里不展开叙述，如图1-22所示。
图1-22 微信开发者工具-定制化配置
1.3.4 项目功能
导航菜单区的“项目”功能，用来显示当前项目的细节，包括图标、AppID以及目录信息等。同时，提供了小程序发布功能（上传）与手机预览功能（预览）。
我们点击“预览”，开发者工具会将项目代码进行编译与构建，生成代码包上传到微信服务器，如图1-23所示。成功后会显示一个二维码，这样开发者就可以用手机微信扫描它，并在手机上看到小程序项目的真实表现。
图1-23 微信开发者工具-项目
1.3.5 运行小程序
1．调试预览
开发者可以在微信开发者工具中点击左侧导航“调试”功能，以便在模拟器中运行小程序，查看小程序运行效果。
2．手机预览
开发者也可以将小程序上传到微信小程序平台中，让用户或测试与开发人员通过手机微信客户端来扫码，以装载小程序，并在微信客户端环境下运行。
3．开发者手机预览
在开发者工具左侧菜单栏中选择“项目”，点击“预览”，扫码后即可在微信客户端中体验，如图1-24所示。
图1-24 预览小程序