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

2018-09-07 621

微信小程序开发系列教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MicroMessenger版本号：6.6.6

Wechat lib: 库文件版本2.0.9

navigation: 3ms 跳转时间3毫秒

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

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

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

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

微信关注我们

原文链接：https://yq.aliyun.com/articles/637246

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

CMakeLists.txt

示例(在编写CMakeLists.txt前, 创建好src, include, lib, bin, build目录, 其中cmake ..在build目录中执行) # 一般都会先声明cmake的版本 CMAKE_MINIMUM_REQUIRED(VERSION 2.8) PROJECT(hello_world) # Release 和 Debug IF(NOT CMAKE_BUILD_TYPE) SET(CMAKE_BUILD_TYPE Release) ENDIF() # SET()用于赋值, 类似于 int a = 100 # SET(EXECUTABLE_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/bin) # SET(LIBRARY_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/lib) # AUX_SOURCE_DIRECTORY也是用于赋值, 只不过是特定于目录的 AUX_SOURCE_DIRECTORY(${PROJECT_SOURCE_DIR}/src SRC_DIR) # 设置头文件路径 INCLUDE_DIRECTORI...

2018-09-08

553

<!DOCTYPE html> <h4> ©ParisGabriel <dir> 2018/9/1 QQ:1546079656 Eminl:1546079656@qq.com </dir> </h4>  <html>   <head>  <title>首页</title>  <meta charset="utf-8"> <!-- 选...

2018-09-08

588

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。