本节主要介绍小程序开发工具的使用

本节知识点:

(1) 点击下载工具
(2) 模拟器
(3) 调试工具
(4) 小程序操作区
(5) 自定义数据上报

第一步 模拟器

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

编译代码

点击工具左下角的编译按钮或者使用快捷键ctrl+B 可以编译当前代码，并自动刷新模拟器。
同时为了帮助开发者调试具体页面或者进入的场景值，如图：开发者可以选择自定义编译模式。

第二步 调试工具

调试工具分为7大功能板块:Wxml,Console,Sources,Network,Appdata,Storage,Sensor

Wxml panel

Wxml panel 用于帮助开发者开发Wxml转化后的界面，在这里可以看到真实的页面结构以及结构对应的WXSS属性，同时可以通过修改对应wxss属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还饿可以快速找到页面中对应的wxml代码

Sources panel

Source panel 用于显示当前项目的脚本文件，同浏览器不同，微信小程序框架对脚本文件进行编译的工作，所以在Source panel中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用。

Network pannel

Network Panel 用于观察和现实request和socket的请求情况

注意:uploadFile和downloadFile暂时不支持在Network Panel中查看

Appdata panel

Appdata panel用于显示当前项目，当前时刻appdata具体数据，实时的反馈项目数据情况，可以在此处编辑数据，并及时的反馈到界面上。

Storage panel

Storage panel 用于显示当前项目使用的wx.setStorage或者wx.setStorageSync后的数据存储情况。
（可以理解为本地数据库）

Console panel

(一) 开发者可以再次输入和调试代码

(二)小程序的错误输出，会显示在此处

Sensor panel

(一) 开发者可以在这里模拟地理位置

(二) 开发者可以在这里模拟移动设备的表现，用于调试重力感应的API

小程序操作区

小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从小程序回到聊天窗口，会触发一个小程序被设置为后台的api

当小程序使用到多窗口的时候，可以在顶部操作区进行页面的切换，需要注意的是这个操作只是为了方便开发者才存在的，在真实的微信客户端不会存在。

自定义数据上报

开发者工具可以编辑和调试自定义分析的数据上报功能，点击菜单栏目的”工具-自定义分析”即可弹窗打开自定义分析

在页面中可以新建，查看或者修改事件，再修改的页面中编辑完毕后，点击底部的保存并测试按钮将保存当前的配置，同时工具将在调试器上收到最新配置，并展示的内容包括事件ID的名称，以及每个动作的触发条件和上报数据。

接着可以在模拟器中操作和触发事件，在模拟器中刷新小程序也将获取该测试配置。除非窗口被关闭。窗口关闭后模拟器不会在收到配置当事件被触发上报时，工具上会展示上报信息，包括事件ID，触发页面，触发方式，触发时动作，以及上报的字段值和数据:

同时可以在窗口中点击同步结构，会同步显示上报的数据

关闭窗口后，配置项全部失效，模拟器不再受到配置并不再触发上报(小程序中使用wx.reportAnalytics API进行的数据上报，仍会在工具中输出。)测试成功后，可到小程序后台发布事件配置。即可正式生效手机所定义的事件数据。