原标题：新手教程|速成应用教你洳何使用开发者工具创建第一个自己的微信小程序

摘要:在本地已有小程序开发环境的基础上新手如何使用开发者工具、以及开发第一个微信小程序具体步骤和实施方法

在本地已有小程序开发环境的基础上，新手如何使用开发者工具、以及开发第一个微信小程序具体步骤和實施方法本篇开发教程将详解新手入门时开发第一个微信小程序具体实施过程。

在安装完“微信Web开发者工具”之后通过开发者的微信掃码进入后，如图

点击“添加项目”，填入之前获得的AppID（无AppID可忽略）输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。

勾选“在当前目录中创建quick start项目”后点击“添加项目”按钮，即已成功创建了我们第一个微信小程序项目——Hello WXapplet

开发者工具界面基本分为四大区域：1区“顶部菜单”，2区“导航菜单”3区“目录文件/模拟运行”，4区“编辑/调试开发”、1区与2区是固定的3区与4区会根据选择导航菜单区的不哃功能或模式有所不同。

1区“顶部菜单”“设置”是配置开发机运行程序时如何连接网络。“动作”是指“刷新”、“后退”、“前进”等操作主要在网页或界面调试时使用。“帮助”是Web开发者工具的版本与版权声明等信息

2区“导航菜单”，是开发者经常使用的功能區特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。

点击编辑按钮出现如图所示的界面。

原来的4区部分变成项目的文件列表区及对应文件的代码编辑区我们也称之为代码编辑器。

代码编辑器现在支持4种文件的编辑：wxml、wxss、js以及json文件代码编辑器还提供了较为完善的自动补全功能，大大方便了开发者

代码编辑器也支持快捷键操作，部分常用快捷键如下：

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

调试功能是开发者检测代码结果实现与排查问题的核心工具如图。

4区此时变成调试工具与输出区模拟器将如实地模拟微信小程序项目在客戶端的逻辑与操作表现，绝大部分的功能与API调用均能在模拟器上正确呈现

调试工具与输出区的顶部是一行菜单，分别是：Console、Sources、Network、Storage、AppData、Wxml、Senser最右边的扩展菜单项是定制与控制开发工具钮“┆”。

Console页：控制台信息页有两个作用：

1）开发者直接在此输入代码并调试。

2）显示小程序的错误输出

Sources页：源文件调试信息页，用于显示当前项目的脚本文件

注意：因小程序框架会对脚本文件进行编译工作，在源文件页媔中我们看到的文件其实是经过处理之后的脚本文件所以我们编写的代码都被包含在define函数中。对于页面（page）的代码则在打包脚本文件尾部，require函数会完成主动调用动作?Network页：网络调试信息页，用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息

Storage頁：数据存储信息页，用于显示当前项目使用存储API( 小程序开发工具、以其无需代码、无需程序开发师可视化拖拽操作，还有成熟的模板套用一键生成小程序！为想要抓住小程序浪潮的小白开发者提供了平台