微信小程序的控制器实现
严格意义上说,按照微信小程序官方文档里介绍的,微信小程序实际采取的是 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 函数响应微信小程序的用户点击事件。
总结
单步调试技术是程序员学习几乎任何一门技术时都必须掌握的基本技能。本文首先介绍了在微信开发者工具里进行微信小程序单步调试的步骤,接着继本教程前一系列学习了微信小程序视图设计后,继续学习微信小程序的控制器实现。
本教程前一步骤的文章:微信小程序开发系列 (一) :开发环境搭建和微信小程序的视图设计与开发。