微信开发者工具IDE主界面、调试工具介绍
参考了微信官方文档。
过去0前端基础的我如果能提前看到这篇文章,应该会少走很多弯路。
文档中的截图来自项目:“黄蔷的记事本第一季”,以下简称“此项目”。
工具栏介绍
IDE界面最上面一行是工具栏,在此项目中主要用到的工具有模拟器、编辑器、调试器、云开发、编译预览。单击后即可显示/隐藏对应的模块,现在依次介绍各部分功能。
模拟器介绍
模拟器可以显示当前代码对应的预览界面,并能够模拟用户在其上进行点击、拖动、跳转界面。前端框架效果可以非常直观地反映在模拟器界面。
编辑器介绍
## 文本编辑
文本编辑器,支持多栏对比显示,具有相对完善的代码匹配提示的功能。有一定的错误纠正提示(图中bar后的大括号下有红色波浪线),鼠标移动到上面会有错误原因显示。
但是有一些地方不够“完美”,比如引号中的“{{}}”还有部分属性的配置。
经常command+S保存是个好习惯(虽然保存就会自动重新编译,有时要1s左右)。
目录显示
目录可以快速定位到特定文件。简单介绍一下各个文件的主要作用:
.js一般用于内部逻辑,主要是node.js的语法,兼容一些微信的SDK接口;wxss用于模板设计,主要是CSS语法规则;wxml介于两者之间,一方面会调用一些.js中的一些函数,另一方面主要用于位置排版,并调用wxss中给出的模型。.json文件此项目中没有用到
调试器在这里插入图片描述
调试器功能很多,用好了可以非常方便地调试界面。下面逐个介绍此项目中常用的一些功能。
Console
Console作为主要的输出框,能够显示一些运行时的警告,以及使用console.log(“变量名称”)进行实时输出,调试时作用很大。
如下图是一个抛出的错误,编译器告知了错误原因(randomNum未定义),在错误的第一个链接处我们能发现错误的文件是newPublish.js,且该错误在66行。
Network
Network模块可以监视与数据库的交互,能够具体地显示数据的交互过程。可以作为检视数据库调用的一个工具。
不起眼但是用起来很方便的两个小按钮
检视元素对应的wxml/wxss代码
单击该按钮后再点击调试器界面中的某个模块,会在调试器中显示对应模块的代码:
可以在下面文档中进行快速的调试,比如多次修改width直到满意,或者点掉前面的勾相当于快速注释对应行。这边可以非常快地进行样式的调整,直到觉得满意再将代码复制进文本编辑器保存,这样可以调整文字、边框大小、位置的时候比较方便。
(注:一般都用rpx或者百分比来显示,比较容易兼容不同横纵比例的不同机型。)
清空Console栏
这个在交通标志牌中应用广泛的标志在这里表示的是清空Console中的内容。对于为了检视特定输出的时候是比较方便的。个人经常用。
云开发
云开发部分默认是另外一个窗口,此项目主要用到其中的“数据库”内容。之后会补充云开发窗口相关的具体内容。