专栏首页Jerry的SAP技术分享微信小程序开发系列四:微信小程序之控制器的初始化逻辑

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

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog.csdn.net/article/details/82532309

微信小程序开发系列教程

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了。在这个基础上,让我们进一步学习微信小程序控制器,掌握在小...

    Jerry Wang
  • 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • WordPress 博客微信小程序开发经验分享

    说起微信小程序很多站长们应该都不陌生,刚开始的时候明月对小程序也有过关注,后来因为实在是想不出来自己的需求点在哪里留给淡忘了,上个月在看到【守望轩】博客开源的“...

    明月登楼
  • 微信小程序背后的思考

    (2017年)1月9日,万众期待的微信小程序正式发布;朋友圈早早地被微信小程序的相关信息所刷屏,极客人也耐不住心里的好奇心,也关注了几个微信小程序尝了尝鲜儿。从...

    极客人
  • 水果店小程序开发 生鲜水果店如何借力微信小程序多样化营销?

    门店经营最需要考虑的就是获得客户,在线下实体门店经营中,因为租金和人工成本的不断上涨,导致获客成本也随之不断上涨,仅靠线下门店获取客户,门店难以生存。

    微信小程序开发加盟服务商
  • 记住微信这个特殊功能,关键时刻将派上大用场

    前些天,我的iPhone出现了卡顿现象,在使用微信时,总提示存储空间不够,必须清理。去设置里面查了一下,发现微信“吃”掉了大部分存储空间,高达几个GB,而我的手...

    罗超频道
  • 移动互联网下半场,小程序开发的市场在哪里?

      在2019年微信公开课上,张小龙就公开对微信小程序生态链上参与者表示了“如果只是想借助小程序来做流量生意,他一点也不看好”。这个清晰的价值观说明了,小程序归...

    鸭梨小程序iyali
  • 前微信海外运营总监刘翌:如何用小程序做 10 亿用户的生意?

    2017 年,小程序一整年都在完善其基础架构和开放能力,2018 年将是小程序的爆发元年。

    知晓君
  • 解决6.5.16及以上版本微信内部M页不能唤起APP

    最近微信唤起app的数据急速下降,产品同学告诉我们大事来了,微信不能唤起Android的App了!!

    静默加载

扫码关注云+社区

领取腾讯云代金券