微信小程序开发系列教程

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

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

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

这个教程的前两篇文章，介绍了如何用下图所示的微信开发者工具自动生成一个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函数，用于响应小程序上用户点击事件。

总结一下，任何微信小程序，其控制器的逻辑只有两步：

调用微信小程序框架提供的标准函数getApp，获得一个小程序实例。
调用微信小程序页面构造函数Page，初始化页面实例。我们在控制器内主要的编码逻辑，主要集中在传入这个Page构造函数的输入参数，即一个json对象。

而这个json对象包含的属性也只有两类：

第一类是另一个json对象，作为MVC中的M，即数据模型。这个json数据模型的字段被绑定到微信小程序视图的某个UI元素，比如Text, Image的对应属性，这样就自动把数据模型里的字段显示到UI上了。
第二类是我们自己开发的JavaScript函数，用于响应微信小程序的用户输入，比如视图上的按钮点击事件等等。

这个系列的下一篇文章会详细介绍如何用JavaScript函数响应微信小程序的用户点击事件。

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

微信小程序开发系列四：微信小程序之控制器的初始化逻辑相关推荐

微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
微信小程序开发（四）小程序数据绑定以及数据的动态获取与赋值
我们在编写js代码的时候,给一个id绑定一个数据可以先获取该id,然后在进行赋值 var text = document.getElementById("id"); text.te ...
Jerry Wang的微信小程序开发系列文章
微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列教程三:微信小程序的调试方法微信小程序开发系列四:微信小程序之控制器的初始化逻辑 ...
微信小程序开发系列七：微信小程序的页面跳转
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发系列五：微信小程序中如何响应用户输入事件
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
.NET微信公众号开发系列 - 项目介绍
由于业务需要,需要开发微信公众号.不过没有查询到比较有用的信息,只能自己摸索前进. 写这个微信公众号开发系列,希望能提供一些帮助. 需要的功能有创建订单.查看订单.还有基本的用户管理. 由于团队人员有 ...

微信小程序开发系列四：微信小程序之控制器的初始化逻辑

微信小程序开发系列教程

微信小程序开发系列四：微信小程序之控制器的初始化逻辑相关推荐

最新文章

热门文章