微信小程序之开发工具介绍

一、微信小程序开发工具下载

微信小程序开发工具下载可以参考这篇博客《微信小程序开发者工具下载-CSDN博客》

二、开发工具组成部分

如下图所示，开发者工具主要由菜单栏、工具栏、模拟器、编辑器和调试器 5 个部分组成。。

1、菜单栏

菜单栏中主要包括项目、文件、编辑、工具、界面、设置和微信开发者工具。

项目

文件

编辑

工具

转到

选择

视图

界面

设置

帮助

微信开发者工具

2、工具栏

工具栏的左侧区域主要包含个人中心、 模拟器 、 编辑器、调试器、可视化和云开发。

2.1 个人中心

个人中心： 账户切换和消息提醒。

2.2 模拟器

单击切换显示／隐藏模拟器面板。

2.3 编辑器

单击切换显示／隐藏编辑器面板。

2.4 调试器

 单击切换显示／隐藏调试器面板。

工具栏的中间区域主要包含小程序模式 、 编译模式、编译、预览 、 远程调试和清缓存。

2.5 小程序模式

小程序模式、插件模式和多端应用模式 。

2.6 编译模式

普通模式、添加编译模式、快速二维码编译、快速URLScheme编辑、快速URL Link编译和快速Short Link编译。

2.7 编译

重新编译小程序项目。

2.8 预览

生成二维码进行真机预览。

2.9 远程调试

生成二维码进行真机远程调试。

2.10 清缓存

可以单独或同时清除数据缓存 、 文件缓存 、 授权数据、网络缓存、登录状态。

工具栏的右侧区域主要包含上传、版本管理、详情和消息。

2.11  上传

将代码上传为开发版本。

2.12 版本管理

管理历史版本。

2.13 详情

2.14 消息

查看系统推送的消息。

3、模拟器

模拟器面板可以切换虚拟手机型号、显示比例以及字体大小。

从左往右依次是；刷新、终止、模拟操作、分离窗口。

3.1 刷新

刷新，就是刷新小程序的界面。

3.2 终止

终止，使得小程序界面处于终止状态。

3.3 模拟操作

模拟操作，可以设置小程序的以下状态。

3.4 分离窗口

分离窗口，将小程序界面于开发工具分离。

4、编辑器

编辑器主要包含项目完整目录结构区和代码区。

4.1 目录结构区

在目录结构区中可以单击左上角的“＋”号添加新文件，文件类型包括目录、 Page 、
Component 、 ts、 json、 wxml、 wxss 等文件。

4.2 代码区

在代码区中允许打开多个页面切换查看，单击代码右上角的“ x ＂号可以关闭当前代码页面。 在页面上编辑代码还可以实现自动提示。

由上图可见，只需要输入前面几个字母，就可以 出现相关组件的代码提示，此时用键 盘方向键选择正确的内容，然后按回车键即可全部生成。

5、调试器

调试器可以在 PC 端预览小程序或在手机端调试小程序时使用，用于实时查看小程序运行时的后台输出、网络状况、数据存储等内容的变化 。 调试器目前主要包含了 12 个面板，可以用其顶部的 tab 栏进行切换。

5.1 Console

Console 是后端控制台， 在小程序编译或运行有误时将给出 warning 或 enor 的信息提示。

由开发者自行在 JS 文件中使用 console.log（”自 定义输出 内容”）语句或直接在控制台上进行文本输出，用于诊断代码的执行情况和数据内容 。

5.2 Sources

Sources 面板是小程序的资源面板， 可以显示本地和 云端 的相 关资源文件。

小程序在代码编写完成后会被打包成一个完整的 JavaScript 文件运行。

5.3 Network

Network 面板在小程序调用网络 API 时用于记录网络抓包数据.

5.4 Storage

Storage 面板可用 于查看当前小程序的缓存数据.
 

在测试过程中，开发者可以手动修改该面板中的数据值 。

5.5 AppData

AppData 面板可以实时查看小程序页面 JS 文件中 data 数据的变化.

在测试过程中，开发者可以手动修改该面板中的数据值。

5.6 Wxml

Wxml 面板是小程序的 WXML 代码预览面板， 在运行小程序后打开该面板就可以查看当
前页面的 WXML 代码内容和对应的渲染样式

5.7 Sensor

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