小程序开发工具使用教程

4、工具（主要用到以下功能）

编译：编译当前小程序项目

刷新：与编译的功能一致，由于历史原因保留对应的快捷键 ctrl + R

编译配置：可以选择普通编译或自定义编译条件

前后台切换：模拟客户端小程序进入后台运行和返回前台的操作

清除缓存：清除文件缓存、数据缓存、以及授权数据

5、界面：控制主界面窗口模块的显示与隐藏

6、设置：

外观设置：控制编辑器的配色主题、字体、字号、行距

编辑设置：控制文件保存的行为微信小程序url传值，编辑器的表现

代理设置：选择直连网络、系统代理和手动设置代理

通知设置：设置是否接受某种类型的通知

第3章工具栏

1、点击头像可以快捷的扫码切换用户或者查看开发者收到的消息

2、头像右侧的3个按钮可以分别控制模拟器、编辑器、调试器的显示/隐藏（但是要保证至少有一个模块显示）

3、中间的“小程序模式”和“普通编译”两个选项可以不用更改，默认即可。

4、切后台/前台按钮，可以模拟小程序进入后台或者返回前台的情况（主要用来调试你的后台逻辑设计是否合理，我们会在小程序开发中详细讲解）。

5、工具栏上提供了“清缓存”的快速入口（菜单栏中也有），可以便捷的清除文件缓存、数据缓存以及后台的授权数据，方便开发者调试。

6、最右边的“>>”是开发者辅助工具（需要部署Git仓库，远端管理代码），可以上传代码、版本管理、查看项目详情。

7、在工具栏上点击鼠标右键，可以打开工具栏管理菜单

第4章模拟器

模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。读者可以选择不同的设备，也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

点击模拟器右上角的按钮可以使用独立窗口显示模式（如果你觉得“编辑区”不够大的话可以使用，或者你有双屏幕也可以）。

在模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值，页面路径及页面参数。

设置

第5章 开发者工具相关设置

1、支持配置开发者工具外观和代码编辑器习惯和风格。

（国人自己开发的编辑器考虑的还是很周全的，非常的通俗易懂，读者可以根据自己的喜好在里边多摸索摸索）

2、代理设置

如果没有对小程序有着特殊的网络需求（例如墙外测试、公司内网测试等）一般默认配置不使用代理，可以根据开发需求选择使用系统代理，或使用自定义代理。

3、安全设置

可以开启和关闭CLI（即命令行调试功能）或者HTTP远程调试功能（本地开发小程序一般默认关闭即可）

代码编辑

（以上进行了工具的界面和设置方面的学习，让你认识了小程序开发者工具，下面你该使用它来编写代码了，因此这部分我们对代码进行相关设置）

第6章文件操作

“文件”指的是读者进行小程序开发过程中编写的每一个代码文件。编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。

1、文件格式

因 iOS 下仅支持 UTF8 编码格式，最新版本的开发者工具会在上传代码时候对代码文件做一次编码格式校验。

2、文件支持

工具目前提供了 5 种文件的编辑：wxml、wxss、js、json、wxs（WeiXin Script是小程序的一套脚本语言，功能类似于JavaScript，注意区别于wxss）以及图片文件的预览。

3、文件操作

新建页面有两种方式：在目录树上右键，选择新建 Page，将自动生成页面所需要的 wxml、wxss、js、json；或者在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件

4、自动保存

读者编辑代码时，工具会自动保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件状态。但需要注意的是，只有用户主动保存文件，修改内容才会真实的写到硬盘上。

如果设置中开启了 “修改文件时自动保存”（设置-编辑设置-修改文件自动保存），工具在修改文件时会自动保存到硬盘中，无需手动保存的效果。

设置中开启 “编译时自动保存所有文件”（设置-编译设置-编译时自动保存所有文件），在点击编译时自动保存所有文件的效果。

（其实我更倾向于使用后者，也就是默认的“点击编译时自动保存”，因为我觉得不需要时刻对电脑硬盘进行读写，心理比较踏实……当然，因人而异）

5、实时预览

如果设置中开启了 “文件保存时自动编译小程序”（设置-编辑设置-保存时自动编译小程序），那么当 wxml、wxss、js、json 文件修改时，可以通过模拟器实时预览编辑的情况：

（如果同时开启了 ”修改文件时自动保存“ 的设置，编译动作会有一定的延迟，来避免频繁的编译，手动点击编译按钮将立即编译。其实我觉得默认设置就挺好）

第7章 代码操作与管理

1、自动补全

同大部分编辑器一样，工具提供了较为完善的自动补全。

js 文件编辑会帮助开发补全所有的 API 及相关的注释解释，并提供代码模板支持；wxml 文件编辑会帮助开发者直接写出相关的标签和标签中的属性；json 文件编辑会帮助开发者补全相关的配置，并给出实时的提示。

2、TypeScript 支持

TypeScript 是 JavaScript 一个超集（说白了就是JavaScript中有的TypeScript 全有，TypeScript 中有的JavaScript可能没有），TypeScript 扩展了 JavaScript 的语法。要构建并使用 TypeScript 项目，需要安装npm。通过配置编译前的预置命令，可以实现在编译前运行 tsc （一种命令插件）以将其编译到 js 文件。

（建议读者先不用考虑太多，直接使用JavaScript即可）

3、Git状态展示

如果所在的小程序工程目录（project.config.json所在目录）存在 Git 仓库微信小程序url传值，编辑器可以展示目前的 Git 状态

（目前本地开发无需配置Git仓库，后续我也将会补充有关Git远程开发小程序的相关内容）

4、目录树状态

如图所示，当某些文件存在变动时，目录树的文件右侧将展示相应的图标来表明这一状态。当某一处于收起状态的目录下存在有变动的文件时，此目录的右侧亦会展示一个圆点图标表明此情况。

U：文件未追踪（Untracked）

A：新文件（Added, Staged）

M：文件有修改（Modified）

+M：文件有修改（Modified, Staged）

C：文件有冲突（Conflict）

D：文件被删除（Deleted）

红点：目录下至少存在一个删除状态的文件

橙点：目录下至少存在一个冲突状态的文件

蓝点：目录下至少存在一个未追踪状态的文件

绿点：目录下至少存在一个修改状态的文件

5、代码历史版本比较

如果某一文件存在修改（Modified），可以右键点击此文件，并选择 “与上一版本比较”，则可以查看当前工作区文件与 head 版本的比较。

小程序调试

第8章模拟器调试小程序

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

1、编译程序

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

2、前后台切换

工具栏中“前后台切换”帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到微信的聊天窗口，会触发一个小程序被设置为后台的回调，下边解释下回调。

回调函数（我们设为A）就是一个参数，将这个函数A作为参数传到另一个函数B里面，当函数B执行完之后，再执行刚刚传进去的函数A，这个过程就叫做回调。

（回调可以理解为回头调用的意思，主函数的事先干完，回头再调用传进来的那个函数。举个例子：约会结束后你送你女朋友回家，然后你说：“到家了给我发条信息。” 然后你女朋友回家以后先给你发了条信息。其实这就是一个回调的过程。你留了个参数函数（要求女朋友给你发短息）给你女朋友，然后你女朋友回家，回家的动作是主函数，她必须先回到家以后，主函数执行完了，再执行传进去的函数，然后你就收到一条信息了）

第9章 调试工具

调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

1、Wxml panel

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

2、Sources panel

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

3、AppData panel

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

4、Storage panel

Storage panel 用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。可以直接在 Storage panel 上对数据进行删除（按 delete 键）、新增、修改。

5、Network panel

Network Panel 用于观察和显示 request 和 socket 的请求情况

6、Console panel

Console panel 有两大功能：

（1）开发者可以在此输入和调试代码

（2）在控制台中可以输入以下命令

build: 编译小程序

preview: 预览

upload: 上传代码

openVendor: 打开基础库所在目录

openToolsLog: 打开工具日志目录

checkProxy(url): 检查指定 url 的代理使用情况

7、Sensor panel

Sensor panel 有两大功能：

（1）读者可以在这里选择模拟地理位置

（2）读者可以在这里模拟移动设备表现，用于调试重力感应 API

真机调试

第10章程序打包

假如读者已经在“小程序开发者工具”中调试没有问题了，可以生产开发版本或体验版本进行真机测试。因为有些模块无法在“小程序开发者工具”中调试，例如：蓝牙模块。

但是在部署自己开发的小程序之前，通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。小程序在打包时，会将所有 js 代码打包成一个文件，为了便于开发者在手机上调试时定位错误位置，因此小程序提供了Source Map支持。（有关Source Map的相关资料可以参考这个链接）

在开发者工具中开启 ES6（ECMAScript 6.0） 转 ES5（ECMAScript 6.0）、代码压缩时，会生成 Source Map 的 .map 文件。开发版小程序中，基础库会使用代码包中的 .map 文件，对 vConsole 中展示的错误信息堆栈进行重新映射（只对开发者代码文件进行）。

第11章 真机调试

（如果你是游客模式将无法使用工具栏中的“真机调试功能”，本章节我们默认不是游客模式，下面将讲解真机调试过程。）

1、发起一个真机远程调试流程，需要先点击开发者工具的工具栏上 “真机调试” 按钮。此时，工具会将本地代码进行处理打包并上传，就绪之后，使用手机客户端扫描二维码即可弹出调试窗口，开始远程调试。

2、使用手机扫描此二维码，即可开始远程调试。要结束调试，直接关闭此调试窗口，或点击右下角 “结束调试” 按钮即可。

远程调试窗口分为两部分，分别是左侧的调试器视图、右侧的信息视图。开发者可以在调试器里直接进行代码的调试，并查看 Storage（上边有讲） 情况；信息视图则可以查看目前与手机和服务器的连接情况，以及发生的错误信息等。

3、在远程调试的调试器里，开发者可以在 Console 面板里对代码进行调试，在 Sources 面板里查看小程序的源代码并进行断点单步调试，在 Storage 面板里查看小程序的 Storage 使用情况等。

注意，要在 Console 里对小程序进行调试，需要将调试的上下文切换到 VM Context 1，如图所示。

WXML、AppData、Storage 面板的操作和开发者工具调试模拟器时的操作一致。注意，如果在右侧信息视图取消勾选了 “使用工具端的 Storage”，则所有的 Storage 数据将被存储在手机上，将不再出现 Storage 面板。

4、下图展示了手机、网络连接的信息。除此之外还包括手机的型号、系统、名称、微信版本等信息，以及通信延时。通信延时越小，与手机的通信越流畅。

在 “连接信息” 里，展示了工具与服务器的连接信息，包括了连接状态、服务器状态等，当连接故障、服务器阻塞影响到调试的过程和流畅度时，此处将展示这一状态。当连接状态为 “已结束” 时，表明调试已被终止。

“警告和错误” 展示了最近发生的错误和警告信息。如果网络连接断开，此处将会询问开发者是否需要重新连接。

5、手机端调试

调试过程中的手机端展示如下所示。当手机无网络或者进入了断点状态时，将会出现一个浮层提示并阻止进一步的操作。

6、小游戏远程调试

如果读者是开发小游戏的，那么与小程序稍微有些不同，在调试窗口的右侧可能会出现 “Contexts” 栏，可以点选希望调试的不同的 JavaScript 上下文。默认情况下，为了方便调试，工具会上传带有完整源代码的 Source Map。如果不希望上传，或者出现代码行列数映射错乱的情况，可以在右下侧选项中关闭这个选项，并取消勾选项目详情中的 “上传代码时自动压缩混淆” 选项。

（以上内容就是对小程序开发者工具的详细讲解，读者可以用它上手自己的小程序开发了，建议读者可以再看看“官方文档”-->“教你设计优质程序”，学习一下小程序的整体设计思路，毕竟开发人员在敲代码之前是需要和产品经理深入沟通的）