微信小程序开发系列教程三:微信小程序的调试方法

简介: 微信小程序开发系列教程三:微信小程序的调试方法

微信小程序开发系列教程

微信小程序开发系列一:微信小程序的申请和开发环境的搭建


微信小程序开发系列二:微信小程序的视图设计


image.png


这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。


image.png


这个系列的下一步,会继续介绍这个微信小程序的控制器index.js的实现。在上一篇微信小程序视图源代码的讲解里,我们通过逐行讲解代码的方式,介绍了微信小程序视图的基本开发思路。但是讲控制器index.js, 仅仅采取静态的代码走查还不够,我们需要将微信小程序启动起来,通过单步调试的方式逐行讲解,通过控制器的调用上下文能对微信小程序的控制器实现有更深入的了解。


为此我们先要学会微信小程序的调试方法。


打开微信开发者工具,点击工具栏的“调试器”按钮:


image.png


开发者工具右边的区域现在从上到下一分为二:上面蓝色区域还是代码编辑页面,下面红色区域就是微信小程序的调试工具。


image.png


做过前端开发的朋友们,可以一眼就看出这其实就是Chrome的开发者工具。


我在我的微信公众号“汪子熙”上也写过一篇Chrome开发者工具的使用技巧介绍,感兴趣的朋友可以去看看:



image.pngimage.png



链接如下:https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484306&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a#rd


在调试器里打开我们的控制器index.js, 单击行号"3", 然后行号3自动被高亮,说明第3行已经成功设置好了一个断点。



image.png

点击“编译”按钮,我们的小程序自动启动,设置在控制器里的断点就自动触发了。这样我们就可以通过单步调试的方式来学习微信小程序控制器的调用上下文了。



image.png

微信小程序的调试器在手机上仍然可以打开。在手机上访问微信小程序,点击屏幕右下角的vConsole按钮。


image.pngimage.png


接着整个手机屏幕就被微信小程序的调试器充满了。这个调试器和电脑上安装的微信开发者工具相比,仅仅能显示日志和执行一些简单的JavaScript操作,但是不能像电脑上那样,进行JavaScript代码的调试。



image.pngimage.png

我们注意到上图的“command…”输入框可以输入一些简单的JavaScript命令,比如console.log(“Jerry”)。


image.pngimage.png

然后可以在手机的调试器上看到输出的Jerry:


image.pngimage.png

System标签页可以看到一些微信小程序性能相关的参数和性能参数:


MicroMessenger版本号:6.6.6


Wechat lib: 库文件版本2.0.9


navigation: 3ms 跳转时间3毫秒


domComplete(domLoaded): dom加载总共花费19毫秒


image.pngimage.png

WXML标签页能显示当前渲染好的视图的明细:


image.pngimage.png

大家熟悉了微信小程序的调试器,就能开始下一章节关于微信小程序控制器的学习了。

image.png

相关文章
|
2天前
|
存储 缓存 JSON
微信小程序使用本地存储方法
微信小程序使用本地存储方法
12 1
|
2天前
|
存储 缓存 小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
|
23天前
|
前端开发 小程序 JavaScript
小程序页面导航全家桶:navigateTo、redirectTo、switchTab等方法一网打尽,快速掌握不同场景下的最佳应用!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
26天前
|
小程序 前端开发 JavaScript
微信小程序开发前端基础知识一
微信小程序开发前端基础知识一
|
26天前
|
前端开发 小程序
微信小程序开发前端基础知识二
微信小程序开发前端基础知识二
|
29天前
|
小程序 JavaScript 前端开发
如何开发一个微信小程序
如何开发一个微信小程序
62 0
|
29天前
|
JSON 小程序 JavaScript
【微信小程序开发】环境介绍和基本使用
【微信小程序开发】环境介绍和基本使用
|
1月前
|
缓存 小程序 前端开发
微信小程序开发知识点
微信小程序开发知识点
125 0
|
29天前
|
小程序 开发工具
《探索微信小程序开发:从入门到精通》
《探索微信小程序开发:从入门到精通》
21 0
|
1月前
|
小程序 前端开发 JavaScript
使用Springboot+vue+微信小程序开发校园二手商城系统
使用Springboot+vue+微信小程序开发校园二手商城系统

热门文章

最新文章