下面对微信web开发者工具做个简单的介绍
下载:
在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容
下载地址:
前往 开发者工具下载页面
模拟器:UI视图
这里是个小程序的模拟器,建议使用iphone6,原因后面会说到,
这里是小程序的一个功能区域啊,下面会一个逐一讲解,先看下一块,
这个区域是我们在调试的时候,去查看变量的值和状态的一个区域
我们来看一下编辑区域:
编辑区域就是我们要写代码的地方了,左侧就是一个树状管理器,目录结构文件类型会在后面(小程序文件类型与代码构成)的文章做讲解.
点击上面的"+"号会创建目录和文件,如下图,
如果要在根目录下创建文件夹,如下图,
小程序还给了一个很好的查找功能,点击放大镜,可以快速匹配到与你关键字相关的页面
调试:
就是上在说的调试器了,
Console:
顾名思义就是控制台了,会显示一些编译错误啊或是警告信息之类的,还有console.log()时,输出自己调试的一些信息
Sources:
这个能功区域主要就是让我们用打断点的,调试代码的,断点打在.JS文件(调试快捷键F10\F8)
左侧是编译过后的一个树状目录结构,和刚刚上面的目录是对应该的,但是它会把一些WXML,WXSS等文件编译了,所以在这里是看不到的,这里就只有JS
这里你会发现同一个文件名会有两个JS,一个是.js的,一个是后面带[sm]的,他们两个有什么区别呢,
[sm]文件,其实就是你的源代码文件,它跟你编译器里写的代码是一模一样的.
.js文件其实是已经给你编译过后的文件.看下图
Network:
这个大家应该都比较熟悉了,就看几个常用用要的话,比如左侧NAME,这就是些网络链接具体的列表
这里应该是用的最多的,是具体查看每一个网络请求信息的一个地方,
比如这个
headers:就是显示一个它的每一个
preview:就是一个预览
http:请求头的一个信息.response就是显示的请求返回信息的一个地方
timingz:每一个请求的具体耗费时间的一个管理
Storage:
查看缓存数据
小程序有个很牛逼的地方就是支持本地缓存,比如我现在的项目,用户第一次使用输入身份证号,下次使用会默认填充
AppData:
根页面相关的,进行数据绑定的
后面具体用到数据绑定的时候会再详细介绍,
Wxml:
实际就是小程序的一个UI界面,和UI代码
这些功能都一目了然了,我就不说什么了
再多说一句,因为小程序会校验证书,如果你是测试开发,在"详情"勾选不校验
了解了这些基本就没什么问题了