E企盈营销工具技术服务商 热线:4006-838-530

微信小程序开发工具介绍及断点代码调试)

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发工具介绍及断点代码调试)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏