共计 2314 个字符，预计需要花费 6 分钟才能阅读完成。
笔者因为工作须要，已经加入过一个微信小程序同 SAP 系统集成的我的项目，因而从零开始学习了微信小程序的开发常识。这里通过系列文章把本人所学分享进去，心愿对相干学习者有所帮忙。
本系列的前一篇文章：微信小程序开发系列 (一)：开发环境搭建和微信小程序的视图设计与开发, 咱们介绍了微信小程序的开发环境搭建，并且从一个 Hello World 级别的例子，理解了微信小程序 MVC 架构中 View 即视图层的设计基础知识。
本文咱们首先来学习微信小程序如何单步调试。
微信小程序的单步调试步骤
在上一篇微信小程序视图源代码的解说里，咱们通过逐行解说代码的形式，介绍了微信小程序视图的根本开发思路。然而学习控制器 index.js 的实现，仅仅采取动态的代码走查还不够，咱们须要将微信小程序启动起来，通过单步调试的形式逐行解说，通过控制器的调用上下文能对微信小程序的控制器实现有更深刻的理解。
为此咱们先要学会微信小程序的调试办法。
关上微信开发者工具，点击工具栏的 调试器 按钮：
开发者工具左边的区域当初从上到下一分为二：下面蓝色区域还是代码编辑页面，上面红色区域就是微信小程序的调试工具。
做过前端开发的敌人们，能够一眼就看出这其实就是 Chrome 开发者工具。
在调试器里关上咱们的控制器 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 标签页能显示以后渲染好的视图的明细：
大家相熟了微信小程序的调试器，就能持续进行微信小程序控制器的学习了。
微信小程序的控制器实现
严格意义上说，依照微信小程序官网文档里介绍的，微信小程序理论采取的是 React 和 Vue 的 MVMM 的设计思路，MVVM 是 Model-View-ViewModel 的简写，实质上是 MVC 模式的改进版。MVVM 架构中，View 的状态和行为被抽象化，从而将视图 UI 和业务逻辑离开。
简略来说就是不要再让 JavaScript 间接操控 DOM，JavaScript 只须要治理状态，而后再通过一种模板语法来形容状态和界面构造的关系即可。
上面咱们来逐行剖析 index.js 的代码：
// 获取利用实例
const app = getApp();getApp 是微信框架的办法，返回以后小程序的利用实例。通常状况下这是微信小程序控制器执行的第一行代码：
这个利用实例的创立是在咱们小程序控制器的拜访范畴之外由微信框架创立的，而后间接在getApp 函数里返回创立好的 app 实例：
为什么这个 app 实例如此重要，以至于放到控制器的第一行代码来创立呢？咱们间接在调试器里输出 app 而后回车，能看到这个 app 对象里蕴含了 globalData 这个属性和很多有用的办法。
有了 app 实例后，下一步须要创立的就是 Page 实例了。这个实例代表以后小程序页面，通过构造函数 Page 进行创立。
咱们同样能够在微信小程序调试器里输出 Page 而后回车查看这个构造函数的源代码，
或者间接单步调试进去学习。下图就是 Page 构造函数单步执行的状况，输出参数 e 为一个 Json 对象：
这个输出参数 e 蕴含的内容有：
- 咱们控制器 index.js 里实现的一个 json 对象，名称为 data（作为以后微信小程序页面的数据模型，即 MVC 中的 M），如下图红色下划线所示。
- 咱们控制器 index.js 里实现的三个 JavaScript 函数，用于响应小程序上用户点击事件。
总结一下，任何微信小程序，其控制器的逻辑只有两步：
- 调用微信小程序框架提供的规范函数
getApp，取得一个小程序实例。 - 调用微信小程序页面构造函数
Page，初始化页面实例。咱们在控制器内次要的编码逻辑，次要集中在传入这个 Page 构造函数的输出参数，即一个 JSON 对象。
而这个 JSON 对象蕴含的属性也只有两类：
- 第一类是另一个 JSON 对象，作为 MVC 中的 M，即数据模型。这个 JSON 数据模型的字段被绑定到微信小程序视图的某个 UI 元素，比方 Text, Image 的对应属性，这样就主动把数据模型里的字段显示到 UI 上了。
- 第二类是咱们本人开发的 JavaScript 函数，用于响应微信小程序的用户输出，比方视图上的按钮点击事件等等。
本系列的下一篇文章会具体介绍如何用 JavaScript 函数响应微信小程序的用户点击事件。
总结
单步调试技术是程序员学习简直任何一门技术时都必须把握的基本技能。本文首先介绍了在微信开发者工具里进行微信小程序单步调试的步骤，接着继本教程前一系列学习了微信小程序视图设计后，持续学习微信小程序的控制器实现。
本教程前一步骤的文章：微信小程序开发系列 (一)：开发环境搭建和微信小程序的视图设计与开发。
