夜光带你走进微信小程序研发（三）

夜光序言：

有些人，回首在身后，再回首却是天涯

有些人，抬头在眼前，再抬头不见身影

人生这条路，那么多的分岔路口

一群人结伴同行，走走停停

反而最后只剩下自己

正文：

开发工具的介绍

为了帮助开发者简单和高效地开发和调试微信小程序，微信 web 开发者工具集成了公众号网页调试和小程序调试两种开发模式。

开发者工具界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器五大部分。如

菜单栏

菜单栏中主要包括了项目、文件、编辑、工具、界面、设置和微信开发者工具，它们的下拉菜单

具体说明如下。

 个人中心：账号切换和消息提醒；

 模拟器：单击切换显示/隐藏模拟器面板；

 编辑器：单击切换显示/隐藏编辑器面板；

 调试器：单击切换显示/隐藏调试器面板；

 云开发：单击创建云开发。

具体说明如下。

 小程序模式：选择小程序模式与插件模式；

 编译模式：普通编译、自定义编译和通过二维码编译；

 编译：单击编译小程序项目；

 预览：单击生成二维码进行真机预览；

 真机调试：单击生成二维码进行真机调试；

 切后台：点击切换前台/后台；

 清缓存：可清除数据缓存、文件缓存、授权数据、网络缓存、登录状态

与全部缓存。

具体说明如下。

 上传：将代码上传为开发版本；

 版本管理：单击开启代码版本管理（使用 git 进行版本管理）；

 社区：单击进入开放社区；

 详情：显示项目详情、项目设置和域名信息；

 云开发：单击创建云开发。

模拟器

模拟在器面板顶部可以切换手机型号、显示比例和模拟网络连接状态，并进行模拟操作，模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数

编辑器

编辑器主要包含项目目录结构区与代码编辑区

调试器

调试器分为 10 大功能模块：Console、Source、Network、Security、AppData、 Audits、Sensor、Storage、Trace 以及 Wxml

1.Console

Console 是后台控制器，开发者可以在此输出和调试代码，代码报错和警告会在此处显示。开发者可以在 JS 文件中使用 console.log（）语句查看代码的执行情况以及数据内容。

2.Source

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

3.Network

Network 面板主要用于观察和显示 request 和 socket 的请求情况（请求接口，请求参数，返回值）

4.Security

Security 面板是小程序的安全面板，开发者可以通过该面板去调试当前网页的安全和认证等问题并确保是否已经在网站上正确地实现 HTTPS

5.AppData

AppData 面板主要用于显示当前项目当前时刻 AppData 具体数据，实时地反馈项目数据情况，开发者也可以在此处编辑数据，并及时地反馈到界面上

6.Audits

Audits 面板主要具有体验评分功能，开发者单击开始体验，并操作小程序项目，系统会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并定位出哪里有问题，以及给出一些优化意见

7.Sensor

Sensor 面板用于模拟手机传感器，在 PC 端测试时，开发者可以手动录入传感器数据，例如地理位置经纬度、加速度计坐标等

8.Storage

Storage 面板用于显示当前项目中使用 wx.setStorage 或者 wx.setStorageSync 后的本地数据存储情况

9.Trace

Trace 面板是小程序的调试追踪面板，目前只支持 Android 手机

10.Wxml

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