1. 准备
- 微信开发账号
- 微信小程序开发工具
2. 开发工具使用
- 登录页
使用微信扫码登陆开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。
- 模式选择
开发者工具提供两种开发模式的选择。
- 公众号网页调试 ： 直接进入公众号网页项目调试界面，在地址栏输入 URL，即可调试该网页的微信授权以及微信 JS-SDK 功能。
- 小程序调试 ：进入小程序本地项目管理页，可以新建、删除本地的项目，或者选择进入已存在的本地项目。
- 新建项目
在本地创建一个小程序项目
- 需要一个小程序的 AppID；如没有 AppID，可以选择体验模式，但体验模式无法进行代码真机预览和上传等操作，部分 API 无法正常调用；
- 登录的微信号需要是该 AppID 的开发者；
- 需要选择一个空目录，或者选择的非空目录下存在 game.json 或者
project.config.json。当选择空目录时，可以选择是否在该目录下生成一个简单的项目。
- 管理项目
对本地项目进行删除和批量删除
- 主界面
开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。
- 菜单栏
微信web开发者工具
切换账号：快速切换登录用户
关于：关于开发者工具
检查更新：检查版本更新
开发者论坛：前往开发者论坛
开发者文档：前往开发者文档
调试：调试开发者工具、调试编辑器；如果遇到疑似开发者工具或者编辑器的 bug，可以打开调试工具查看是否有出错日志，欢迎在论坛上反馈相关问题
更换开发模式：快速切换公众号网页调试和小程序调试
退出：退出开发者工具
项目
新建项目：快速新建项目
打开最近：可以查看最近打开的项目列表，并选择是否进入对应项目
查看所有项目：新窗口打开启动页的项目列表页
关闭当前项目：关闭当前项目，回到启动页的项目列表页
文件
新建文件
保存
保存所有
关闭文件
编辑：可以查看编辑相关的操作和快捷键
工具
编译：编译当前小程序项目
刷新：与编译的功能一致，由于历史原因保留对应的快捷键 ctrl(⌘) + R
编译配置：可以选择普通编译或自定义编译条件
前后台切换：模拟客户端小程序进入后台运行和返回前台的操作
清除缓存：清除文件缓存、数据缓存、以及授权数据
界面：控制主界面窗口模块的显示与隐藏
设置：
外观设置：控制编辑器的配色主题、字体、字号、行距
编辑设置：控制文件保存的行为，编辑器的表现
代理设置：选择直连网络、系统代理和手动设置代理
通知设置：设置是否接受某种类型的通知
工具栏
点击用户头像可以打开个人中心，在这里可以便捷的切换用户和查看开发者工具收到的消息。
用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。
工具栏中间，可以选择普通编译，也可以新建并选择自定义条件进行编译和预览。
通过切后台按钮，可以模拟小程序进入后台的情况
工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。
工具栏右侧是开发辅助功能的区域，在这里可以上传代码、查看项目信息
模拟器
模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。
开发者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。
在模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数
设置页
外观设置、编辑设置、代理设置和通知配置。菜单栏上点击设置，或者使用快捷键 ctrl(⌘) + , 可以打开设置页。
外观设置
编辑器支持配置外观和代码编辑器习惯和风格。
- 主题：深色、浅色
- 字体
- 字号
- 行距
编辑设置
- 修改文件时自动保存
- 编译时自动保存所有文件
- 文件保存时自动编译小程序
- 自动折行
- 用空格代替 Tab
- 代码缩略图
- Tab 大小
代理设置
可以配置不使用代理，或使用系统代理，或使用自定义代理。
通知设置
可以设置是否接收系统消息、开发者社区消息、监控报警消息。
