代码编辑
（以上进行了工具的界面和设置方面的学习，让你认识了小程序开发者工具，下面你该使用它来编写代码了，因此这部分我们对代码进行相关设置）
第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 仓库，编辑器可以展示目前的 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 支持。
本文地址：IT百科频道 https://www.hkm168.com/tags/886391_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
