一、概述：
为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。
二、界面：
1、启动页 【1】登录页 在登录页，可以使用微信扫码登陆开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。 【2】模式选择 在登录页，可以使用微信扫码登陆开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。 1.公众号网页调试。选择公众号网页调试，将直接进入公众号网页项目调试界面，在地址栏输入 URL，即可调试该网页的微信授权以及微信 JS-SDK 功能。 2.小程序调试。选择小程序调试，将进入小程序本地项目管理页，可以新建、删除本地的项目，或者选择进入已存在的本地项目。 【3】新建项目 1.需要一个小程序的 AppID；如没有 AppID，可以选择申请使用测试号。 2.登录的微信号需要是该 AppID 的开发者； 3.需要选择一个空目录，或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时，可以选择是否在该目录下生成一个简单的项目。 【4】多开项目 1.从项目选择页打开项目，处于项目窗口时可以从菜单栏的项目 -> 查看所有项目打开项目选择页 2.从菜单栏的最近打开项目列表中打开的项目会从新窗口打开 3.新建项目 4.命令行或 HTTP 调用工具打开项目 【5】管理项目 对本地项目进行删除和批量删除 【6】主界面 开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。
2、菜单栏 【1】微信web开发者工具：切换账号、关于、检查更新、开发者论坛、开发者文档调试、更换开发模式、退出 【2】项目：新建项目、打开最近、查看所有项目、关闭当前项目 【3】文件：新建文件、保存、保存所有、关闭文件 【4】工具：编译、刷新、编译配置、前后台切换、清楚缓存 【5】设置 3、工具栏 4、工具栏管理 5、模拟器 6、独立窗口
7、设置 【1】外观设置 【2】编辑设置 【3】代理设置 【4】通知设置
8、项目页卡 【1】项目设置 《1》ES6 转 ES5 《2》样式补全 《3》压缩代码 《4》不校验请求域名及 TLS 版本 《5》启用多核心编译 《6》域名信息 《7》腾讯云状态 【2】域名信息 【3】腾讯云状态
三、快捷键：
⌘ + B：编译项目 ⌘ + R：焦点在编辑器外，编译项目 ⌘ + Q：退出开发者工具 ⇧ + ⌘ + P：预览代码 ⇧ + ⌘ + U：上传代码
四、代码编辑：
1、文件格式 2、文件支持 提供了 5 种文件的编辑： wxml、wxss、js、json、wxs 以及图片文件的预览 3、文件操作 新建页面有两种方式： 1.在目录树上右键，选择新建 Page，将自动生成页面所需要的 wxml、wxss、js、json 2.在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件 4、自动保存 5、实时预览 6、自动补全 7、Git状态展示 8、目录树 9、文件编辑 10、windows风格回车设置 11、项目配置文件
五、小程序调试(模拟器、调试工具和小程序操作区)：
1、模拟器 2、自定义编译 3、自定义预处理：自定义预处理命令 —》 默认预处理命令 —》 编译/预览/上传 4、前后台切换 5、调试工具(七大模块): 【1】Wxml panel（用于帮助开发者开发 wxml 转化后的界面） 【2】Sources panel（用于显示当前项目的脚本文件） 【3】AppData panel（用于显示当前项目运行时小程序 AppData 具体数据） 【4】Storage panel（用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况） 【5】Network panel（用于观察和显示 request 和 socket 的请求情况） 【6】Console panel 《1》开发者可以在此输入和调试代码 《2》小程序的错误输出，会显示在此处 【7】Sensor panel 《1》开发者可以在这里选择模拟地理位置 《2》开发可以在这里模拟移动设备表现，用于调试重力感应 API 6、自定义数据上报 7、自动预览 8、特殊场景调试 《1》扫码接口 《2》微信支付 《3》启动使用自定义参数 《4》进入场景值 《5》普通的转发 《6》带shareTicket的转发 《7》预览使用自定义编译条件 《8》跳转小程序调试支持 《9》调试小程序是否能够正确的跳转 《10》调试被打开的小程序时候正确的接收参数 9、真机调试 《1》功能概述 《2》调试流程 《3》远程调试窗口 《4》调试器 《5》信息视图 《6》手机端展示 10、多账号调试 《1》功能描述 《2》功能入口 《3》如何使用
六、nmp支持：
1、使用nmp包 【1】在小程序中执行命令安装 npm 包 【2】点击开发者工具中的菜单栏：工具 --> 构建 npm 【3】勾选“使用 npm 模块”选项 【4】构建完成后即可使用 npm 包
2、发布nmp包 【1】发布小程序 npm 包的约束 《1》小程序 npm 包要求根目录下必须有构建文件生成目录（默认为 miniprogram_dist 目录），此目录可以通过在 package.json 文件中新增一个 miniprogram 字段来指定。 《2》小程序 npm 包里只有构建文件生成目录会被算入小程序包的占用空间，上传小程序代码时也只会上传该目录的代码。如果小程序 npm 包有一些测试、构建相关的代码请放到构建文件生成目录外。另外也可以使用.npmignore文件来避免将一些非业务代码文件发布到 npm 中。 《3》测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中。
【2】发布其他 npm 包的约束 《1》只支持纯 js 包，不支持自定义组件。 《2》必须有入口文件，即需要保证 package.json 中的 main 字段是指向一个正确的入口，如果 package.json 中没有 main 字段，则以 npm 包根目录下的 index.js 作为入口文件。 《3》测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中，这一点和小程序 npm 包的要求相同。 《4》不支持依赖 json文件、c++ addon，不支持依赖 nodejs 的内置库。 《5》使用 require 依赖的时候下列几种方式也是不允许的。 《6》小程序环境比较特殊，一些全局变量（如 window 对象）和构造器（如 Function 构造器）是无法使用的。
【3】发布流程 《1》如果还没有 npm 帐号，可以到 npm 官网注册一个 npm 帐号 《2》在本地登录 npm 帐号，在本地执行 《3》在已完成编写的 npm 包根目录下执行
【3】原理介绍 《1》首先 node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。 《2》构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中；其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（类似 webpack）。 《3》寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况，构建之前的结构。
七、体验评分：
1、运行环境要求 【1】下载并安装 beta 版开发者工具，下载地址。 【2】基础库需要切到 2.2.0 或以上版本。
2、使用流程 【1】打开开发者工具，在详情里切换基础库到 2.2.0 版本 【2】在调试器区域切换到 Audits 面板 【3】点击左上角”开始“按钮（见下图），然后自行操作小程序界面，运行过的页面就会被“体验评分”检测到 【4】点击“Stop"停止分析，就会看到一份分析报告，之后便可根据分析报告进行相关优化
八、Git版本管理：
1、提交工作区更改 2、查看历史 3、查看文件修改历史 4、检出和创建分支 5、拉取，推送和抓取 6、网络和认证设置 7、用户设置 8、子模块 9、初始化Git仓库
九、命令行调用：
1、命令行启动工具 2、命令行登录 3、命令行提交预览 4、命令行上传代码 5、支持自动化测试
十、HTTP调用：
1、打开工具或指定项目 2、登录 3、预览 4、上传 5、自动化测试
十一、测试号：
1、申请测试号 2、创建测试号项目
十二、小程序开发助手：
1、“小程序开发助手” 是微信公众平台发布的官方小程序，帮助开发和运营人员在手机端更方便快捷地查看和预览小程序，扫描下面小程序码可立即体验。 2、使用者可以在小程序开发助手查看和预览与自己关联的所有小程序。小程序将会按照其更新时间自动排序，显示在最上面的小程序是最近有提交的小程序，例如开发者预览了新的代码，或者体验版有更新。 3、通过点击并展开小程序列表，使用者可以根据自己的身份，浏览到小程序的线上版本、体验版本或开发版本。如果使用者是小程序的管理者，可以浏览到全部三种版本；如果使用者身份是 “体验者”，则可以浏览到线上版本、体验版本，而不会浏览到任何开发版本。如果一个小程序有多个开发者，则开发版本的列表将会显示每一个开发者提交预览的最新版本。 3、通过点击列表上的相应版本，使用者可以立即预览该版本对应的小程序。点击导航栏的返回，可以返回到小程序开发助手，预览其他版本的小程序。
十三、代码片段：
1、创建代码片段 2、代码片段主界面 3、分享代码片段 4、导入代码片段
十四、第三方平台：
1、小程序运营者，可以一键授权给第三方平台，通过第三方平台来完成业务。 2、创建项目 3、小程序模板开发 4、extAppid 的开发调试 5、概念分区： open3rd：第三方平台，是小程序官方认可的第三方开发商 3rdMiniProgramAppid：第三方平台申请的并绑定在该平台上的小程序，用于开发小程序模板 extAppid：授权给第三方平台的小程序
十五、小程序插件开发：
1、创建插件项目 【1】miniprogram 文件夹是一个普通小程序项目，用来编写小程序插件的使用 Demo，上传插件代码时这个 Demo 会一起上传，并作为小程序插件的发布的审核依据。 【2】plugin 文件就是小程序插件项目，用来编写小程序插件的代码。 【3】project.config.json 需要关注 compileType 字段，compileType == 'plugin' 时才能正常的使用插件项目。
2、打开已存在的插件项目 3、插件上传 4、插件文档编写、预览和上传 5、插件使用
十六、素材管理：
1、名词解释 2、免费额度 3、收费情况 4、产品介绍 5、开通步骤： 【1】通过微信公众平台授权登录腾讯云 【2】前往腾讯云开通 素材管理服务
十七、代码托管：
1、TGit开通及配置流程 【1】开发者可登录小程序管理后台，在 “设置-开发者工具” 内开通 TGit 功能。 【2】配置项目信息、管理员信息 【3】开通后，进入“查看权限”，可查看和配置 TGit 项目成员信息 【4】添加 TGit 项目成员（选择成员，填写TGit用户名） 2、微信开发者工具 3、如何使用： 《1》下载并安装 Git，git-scm.com/downloads 《2》熟悉 Git 使用方法，详情 《3》使用 Git 命令或者 Git 可视化工具将代码提交到 TGit 《4》使用 TGit 进行代码托管和多人协作
十八、云测试：
1、特点： 【1】缺陷发现：测试过程中自动发现小程序抛出的JS异常 【2】性能数据分析：测试过程中收集包含加载时间、CPU占用率、内存占用量等数据指标； 【3】机型覆盖：小程序会被随机分配到4~8个不同机型的机器（由当时的机器资源决定）来执行，借此可以观察小程序在不同机型的执行表现； 【4】其它：弱网络环境测试、多场景测试等（开发中）。
十九、实现差异：
1、运行环境差异 【1】在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10。 【2】在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的。 【3】在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的. 2、客户端ES6 API 支持情况 【1】TBS 3.0 是指微信小程序 Android 运行环境。 【2】Array.values 不支持 【3】Proxy 不支持 3、API实现差异