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

夜光序言：

 

 

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

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

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

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

反而最后只剩下自己

 

 

 

 

 

 

正文：

开发工具的介绍

为了帮助开发者简单和高效地开发和调试微信小程序，微信 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 代码