微信给我们准备了一个开发工具，可以辅助我们开发，调试微信相关的东西 .. 打开 开发者工具 的下载地址 .. 这里可以选择适合自己系统的版本 ..

下载

我用的是 macOS .. 可以下载这个 mac 版的开发者工具 ..

另外微信还提供了 windows 64 位版的开发者工具，还有 windows 32 位版的开发者工具 .. 这些不同版本的开发者工具，使用的方法是一样的 ..

下载完以后，再去安装一下 ... mac 版可以直接把这个开发者工具放到 应用 目录的下面 ..

使用

然后再找到安装好的微信开发者工具 ... 打开它 ..

再用微信扫一下这里的二维码 .. 登录一下 ..

登录以后，会提示我们选择要调试的类型 .. 可以是本地小程序项目 .. 也可以是公众号网页开发 .. 选择这个 本地小程序项目 ..

添加项目 .. 在本地创建一个新的项目 ..

先要输入小程序的 ID ..

回到小程序首页 .. 查看一下小程序的详情页面 ..

打开 开发设置 ..

在这里可以找到小程序的 ID，复制一下 .. 再回到开发者工具 .. 先把 小程序 ID 粘贴过来 ..

再给项目起个名字 .. ninghaoDemo ..

然后选择一个项目在本地电脑上的位置 ..

在我的桌面上，创建一个新的目录 ... ninghao-weixin 创建 .. 再选择这个目录 ..

然后 添加项目 ..

如果看到一些错误警告，可以刷新一下 ... command + R .. Windows 上应该是 ctrl + R ..

左边这块是一个模拟器 .. 你可以在这里预览小程序的效果 .. 右边现在显示的是一个开发调试工具 ..

现在模拟器上提示一个授权 .. 因为小程序要读取用户的微信相关的信息 .. 点一下允许 ..

模拟器上出现的是一个微信小程序的演示应用 ..

编辑

这个开发者工具自带一个编辑器 ... 可以编辑程序里的代码 .. 打开 编辑 .. 左边是个树形结构 .. 会显示项目里的文件还有目录 ..

这个编辑器的样式可以设置一下 ... 在菜单里面，找到工具的设置 ..

打开 编辑器 .. 修改一下字号 .. 我想让代码的文字大一些 ... 改成 16 .. 行距可以是 6 ..

然后保存一下 ...

我们也可以使用自己熟悉的编辑器去编辑小程序的代码 .. 在命令行的下面，进入到项目的在的地方 .. 我这里就是桌面上的这个 ninghao-weixin ..

进来以后 .. 我用的是 Atom 编辑器 .. 可以使用这个编辑器打开项目的目录 ..

在编辑器的左边树形列表里面出现的就是刚才我们在开发者工具的模拟器里看到的那个演示用的小程序的代码 ...