找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1588

所属分类: 微信开发 微信小程序开发资源



本版块为微信小程序资源分享区,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo源码及开发教程等。

快捷导航www.henkuai.com):微信小程序社区微信小程序导航微信小程序资源下载微信小程序官方课程

[更新动态] 【helloworld】-微信小程序教程-入门篇【5】-狂兔科技

[复制链接]
查看: 9086|回复: 15
最佳答案
0 

9

主题

34

帖子

1191

积分

专家路上

积分
1191
 楼主| 发表于 2016-11-1 20:19:24 | 显示全部楼层 |阅读模式
本帖最后由 狂兔科技 于 2016-11-1 22:21 编辑

1. 开篇导言    
  • 本节目标:通过之前的讲解,相信大家对于微信小程序本身有了一定的认识。本篇将专注于讲解IDE的调试功能。
  • 目标用户:无编程经验,但对微信小程序感兴趣的同学。
  • 学习目标:了解并使用微信开发工具的调试功能。
  • 案例分析:helloworld小程序。
  • 代码下载
  • 传送门:

目录:微信小程序教程-开篇导言-狂兔科技
上一篇:【helloworld】-微信小程序教程-入门篇【4】-狂兔科技   
下一篇:【helloworld】-微信小程序教程-入门篇小结【6】-狂兔科技

  • 备注:有编程经验或看过微信官网简易教程的同学,请酌情略过该章节。


2. 调试区
如下图:

调试工具分为6 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage。
熟悉Chrome浏览器(F12)的同学,可能眼前一(没错,基本一致)。

3. Wxml panel
Wxml panel:用于帮助开发者开发 Wxml 转化后的界面。
通过对于页面结构及对应的 wxss 属性的修改,可以在模拟器中实施查看效果。
通过调试模块左上角的选择器,可快速定位页面中组件对应的 wxml 代码。

(图片来自于官网)

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

  • 代码导航栏(蓝色区域部分)

top下为域名列表。每个域名中包含与其相关的脚本文件。

  • 代码显示区(绿色区域部分)

代码区的左侧,通过点击可以下断点。
左下角的【{}】可以format代码结构。

  • 调试区(橙色部分)

Watch:可以添加要查看的expressions(变量、表达式)。
Call Stack:查看调用堆栈。
其它部分留着以后详谈。

5. Network panel
Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况。后章节详细讨论。

(来自于官网)

6. Appdata panel
Appdata panel 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。

上图将【Hello World】更改为【Hello MINA】

7. Storage panel
Storage panel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。本项目为log,见下图:


8. Console panel
Console panel:输出小程序的log或者输入,调试代码,如下图绿色部分。

通过点击console中右侧椭圆部分,可以快速定位到相应的文件中(【index.js [sm]:24 onLoad】)。
橙色部分为调试代码的例子。

9. 小结
注意:多动手来习惯于用调试工具来解决项目的问题。

10. 预告
下一篇将对入门篇做一个总结。


回复

使用道具 举报

最佳答案
1 

0

主题

2

帖子

80

积分

新人求带

积分
80
发表于 2016-11-1 21:09:19 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

157

帖子

1481

积分

禁止发言

积分
1481
发表于 2016-11-2 09:54:55 | 显示全部楼层
我只是路过打酱油的。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

150

帖子

1206

积分

专家路上

积分
1206
发表于 2016-11-2 11:10:25 | 显示全部楼层
看到这帖子真是高兴!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

53

积分

新人求带

积分
53
发表于 2016-11-4 16:00:52 | 显示全部楼层
我只是路过打酱油的。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

35

帖子

302

积分

略知一二

积分
302
发表于 2016-11-28 16:09:50 | 显示全部楼层
感谢楼主
回复

使用道具 举报

最佳答案
0 

0

主题

35

帖子

302

积分

略知一二

积分
302
发表于 2016-12-6 09:47:26 | 显示全部楼层
开森
回复

使用道具 举报

最佳答案
0 

0

主题

13

帖子

153

积分

新人求带

积分
153
发表于 2017-1-11 08:01:49 | 显示全部楼层
支持楼主,学习学习
2017年1月10日 10:11:03 加入论坛,开始研究小程序
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

9

帖子

75

积分

新人求带

积分
75
发表于 2017-3-30 18:44:32 | 显示全部楼层
小程序入门5
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

117

积分

新人求带

积分
117
发表于 2017-4-10 17:45:21 | 显示全部楼层
5555555555555555555555555
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com