标签： 开发工具

微信开发者工具最新版是一款由微信官方推出的软件，主要是方便开发者进行小程序的开发，丰富微信公众号上面的内容。它为用户提供了开发、调试所需要的一切，你只需负责设计部分。

微信开发者工具是什么

为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK 详情

使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

微信开发者工具功能

1、模拟器

模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

2、自定义编译

点击工具栏中的编译按钮或者使用快捷键 Ctrl(⌘) + B，可以编译当前代码，并自动刷新模拟器。

同时为了帮助开发者调试从不同场景值进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览(如图)。

注：编译条件跟项目相关，每个项目可以保存自己相关的编译条件

3、自定义预处理

在项目设置页卡，我们提供了以下几个默认的预处理，可以解决大部分的代码文件预处理的问题

- ES6 转 ES5(可以应用于编译、预览、上传)，使用 "babel-core": "^6.26.0"

- 上传代码时样式自动补全，使用 "postcss": "^6.0.1"

- 上传代码时自动压缩，使用 "uglify-js": "3.0.27"

4、Wxml panel

Wxml panel 用于帮助开发者开发 wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况(仅为实时预览，无法保存到文件)。通过调试模块左上角的选择器，还可以快速定位页面中组件对应的 wxml 代码。

5、AppData panel

AppData panel 用于显示当前项目运行时小程序 AppData 具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

微信开发者工具使用教程

使用微信开发者工具来开发小程序

步骤1：创建插件项目

小程序的 AppID 可以创建小程序插件项目，插件是独立于小程序之外的，但是 AppID 是公用的，所以不要使用原有的小程序项目进行插件开发。 在创建项目页面，选择一个空文件夹作为项目路径，可以选择创建小程序插件快速启动模板

快速启动模板说明：

miniprogram 文件夹是一个普通小程序项目，用来编写小程序插件的使用 Demo，上传插件代码时这个 Demo 会一起上传，并作为小程序插件的发布的审核依据.

plugin 文件就是小程序插件项目，用来编写小程序插件的代码。

project.config.json 需要关注 compileType 字段，compileType == 'plugin' 时才能正常的使用插件项目

步骤2：打开已存在的插件项目

如果是之前创建的插件项目，可以在项目列表中直接打开;

如果重新创建项目，选择一个非空目录，那么这个非空目录中需要有 project.config.json 详情，确保这个文件中有以下字段：

在项目开发期间，可以手动修改 project.config.json 文件的 compileType 字段来切换项目的编译类型

步骤3：插件上传

上传插件代码前，需要指定版本号，格式为 数字.数字.数字 ，每个数字最大为 999。

每次提交版本号需要递增，插件使用者会用到这个版本号，请谨慎填写。

上传插件时，同时会将 project.config.json 中 miniprogramRoot 指定的目录的内容作为插件使用 Demo 一起上传，这个 Demo 需要覆盖到插件的所有使用场景，便于插件的审核。

步骤4：插件文档编写、预览和上传

插件文档必须放置在插件项目根目录中的 doc 目录下，插件文档的入口文件是 doc/README.md，在 README.md 中引用的图片必须是 doc 目录下的本地图片。

在开发者工具中编辑 README.md 时，在编辑器底部有预览的入口可以预览插件文档。编辑完成后，可以在 README.md 的编辑窗口中使用编辑器底部的上传入口上传插件文档。

步骤5：插件使用

在小程序项目的 app.json 的 plugins 字段中可以声明使用插件。如果当前的编译类型为小程序时，需要指定已发布的插件的版本号，开发者工具会根据版本号去拉取对应版本的插件进行编译。

只有在 project.config.json 的 compileType == 'plugin' 时，插件的版本号才能为 'dev'

更新日志

1、新增小程序支持自动化测试

2、新增预览当前页面

3、增加云控制台中监控图表的数据总和显示

4、新增setTabBarItem 支持临时文件和网络路径 反馈详情

5、新增公众号调试网址栏下拉菜单点击URL路径后自动跳转

6、优化文件监听模块

7、优化体验评分 UI

8、优化非 miniprogramRoot 目录下文件的修改不会触发编译

9、修改Wxml 的 text 标签内容后页面不能同步更新

10、修复调试器点击临时文件地址打不开的问题

11、修复1.02.1907160 版本小游戏分包加载异常的问题 反馈详情

12、修复小游戏 websocket 连接期间切换 offline 无效的问题

13、修复调整模拟器窗口大小操作时鼠标指针在模拟器窗口内释放后会失效的问题

14、修复backgroundColorTop/Bottom 只因在 iOS 模拟时生效