测试
全部博文（931）
分类： 架构设计与优化
2019-04-21 22:03:34
这个教程的前两篇文章，介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序，并讲解了这个自动生成的微信小程序的视图开发原理。
本文继续介绍这个微信小程序的控制器index.js的实现, 即MVC设计理念的C-Controller-控制器。不过严格意义上说，按照微信小程序官方文档里介绍的，微信小程序实际采取的是React和Vue的MVMM的设计思路，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态，然后再通过一种模板语法来描述状态和界面结构的关系即可。
下面我们来逐行分析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函数，用于响应小程序上用户点击事件。
总结一下，任何微信小程序，其控制器的逻辑只有两步：
而这个json对象包含的属性也只有两类：
这个系列的下一篇文章会详细介绍如何用JavaScript函数响应微信小程序的用户点击事件。
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
