· 新建项目
- 项目名称：可以随意取名，当我们新建多个小程序项目的时候可以加以区分。
- 目录：我们的项目目录需要选择一个空的文件夹。
- AppID：如果没有AppID的用户可以去申请一个小程序账号，或者点击测试号（会有部分功能受限）。小程序账号申请地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
- 开发模式：
-- 小程序：新建以后生成默认的开发目录接口。
-- 插件：新建以后生成了页面引入插件的代码。
（两者的区别是目录结构不一致，插件模式基于默认的小程序模式扩展插件的用法）
后端服务：
不使用云服务：
意味着需要自己搭建服务器，自己提供数据库、存储等一系列后端的功能服务。可选择小程序遵循的语言规范，JavaScirpt或TypeScript。
小程序·云开发：
无需搭建服务器，为开发者提供数据库、存储和云函数等完整的云端支持。使用微信平台提供的API进行核心业务开发，即可实现小程序快速上线和迭代。
腾讯云：
可以选择运行环境 NodeJS环境或PHP环境。
· 导入项目
- 项目名称：
可以随意取名，当我们新建多个小程序项目的时候可以加以区分。
- 目录：
选择一个已经生成过微信公众号开发项目的目录。
- AppID：
因为这是导入项目，说明之前已经开发过这个项目，在小程序项目开发过程中有获取对应AppId的方式。
微信开发者工具操作界面分析
操作页面分为三大块
图中有详细画出每一块的位置
模拟器
查看当前小程序运行的界面，实时模拟小程序的相关操作，跟手机上打开小程序的界面一样。模拟器上方有几个设置按钮，官方有给我们对应不同型号的手机设置屏幕尺寸，我们也可以自定义设置显示屏幕的大小。
可以设置网络信号，目前支持4G/3G/2G/WiFi/offline离线。
编辑器
开发、编辑、修改小程序的代码，编辑器修改的代码可以实时在模拟器上看到修改后的效果。
调试器
调试区细分为10个小部分：
1. Console 查看小程序执行的报错、打印的信息、警告等，也可以输入一些变量进行调试。
2. Sources 左侧查看当前项目运行的所有脚本，右侧是执行断点调试。
3. Network 区域显示的是与网络相关的信息，可以查看网络请求响应的数据。
4. Security 查看页面整体的安全性。
5. AppData 查看访问过小程序页面的变量，变量值可以动态的修改。
6. Audits 体验评分，在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。
7. Sensor 开发者可以在这里模拟经纬度，也可以在这里模拟移动设备表现，用于调试重力感应 API。
8. Storage 官方说明是用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
9. Trace 用于链接手机调试。
10. Wxml 相当于前端网页浏览器的Elements，本质上跟HTML+CSS相同，只是后缀名不一样，可以调试修改标签的样式。
然后我们看上面的工具栏
默认是普通编译，按照正常的编译模式执行。
添加编译模式：点击添加编译模式窗口如下
模式名称自己定义，最好就是见名知意。
然后就是启动页面的路径设置，每次刷新小程序都会进入到启动页面的路径，然后我们可以模拟一些启动参数，如：name=venfor&color=black，然后就是启动场景，我们要知道，小程序的访问方式有很多种情况，比如从公众号进入小程序、单人聊天会话进入小程序，扫描二维码进入小程序，长按图片识别二维码进入小程序等等这一系列的访问入口的场景值都是不一样的，也就是说我们可以通过这里模拟小程序进入的场景值。关于小程序场景值有哪些可查看：
https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
还有一种是可以通过二维码编译添加访问小程序的参数，可以选择本地的小程序二维码图片。
现在我们来看一下顶部中间这5个工具栏的用法
1. 编译 重新编译当前小程序的代码。
2. 预览 生成当前小程序的临时二维码，二维码在25分钟后会失效，这里有一点需要注意的，开发者工具上面生成的二维码都需要有开发者权限的微信才能扫码进入。
3. 真机调试 生成预览的二维码，扫码以后手机会打开当前小程序，电脑将会自动弹出一个调试区，调试区用于手机的真机调试，这样方便看到手机上程序执行了什么。
4. 切后台/切前台 模拟小程序退出了后台，这里说的退出后台在手机上代表的是将进程切换到了后台，切后台以后会弹出一个切前台的入口，这里也就是模拟小程序进入的场景值。
5. 清缓存 这里可以清除数据缓存、清除文件缓存、清除授权缓存、清除网络缓存、清除登陆状态。
然后我们看开发者工具顶部右上角的4个工具按钮的用法
1. 上传 此处点击上传会将小程序上传到对应appid的小程序账号上，在微信公众平台-小程序后台可以管理从微信开发者工具上传的代码。
2. 版本管理 此处需要关联git账户，实现代码的版本管理，相当于我们平时用git管理码云、github上面的代码。
3. 社区 点击社区进入到微信社区平台，我们在社区平台可以反馈微信的一系列（小程序、小游戏、微信支付）相关问题，社区地址：
https://developers.weixin.qq.com/community/develop?idescene=2
4. 详情 详情可以看到我们的账号信息和一些小配置，我们来看这张图
从这里可以看到我们小程序的AppID，项目路径和本地代码包大小，目前微信限制小程序代码8M，一个包分为2M，也就是说最多4个包每个包最多2M，代码包超过指定大小以后将无法预览、上传。
调试基础库
还可以设置我们调试的基础库版本，微信推出新的API需要对应的基础版本库支持，我们默认是最新的基础库版本。
Chrome DevTools
微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致，可以快速上手。
