微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程
这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
微信小程序开发系列四:微信小程序之控制器的初始化逻辑的更多相关文章
- 微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候须要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID.接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列教程三:微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- WordPress版微信小程序开发系列(二):安装使用问答
自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...
- 微信小程序开发系列二:微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
- 微信小程序开发系列一:微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
随机推荐
- hdu-5718 Oracle(水题)
题目链接: Oracle Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- 第一次往github上传文件步骤
第一次往github上传文件步骤: 1> 从右上角 '+' 位置下拉菜单中,创建一个repository 2>从右上角头像位置下拉菜单 setting中设置 SSH keys 3>打 ...
- NOIP2003题解
传送门 考查题型 搜索 字符串 模拟 dp T1 神经网络 题目背景 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷 ...
- 高性能框架gevent和gunicorn在web上的应用及性能测试
WSGI Server有哪些: 比如 Flask,webpy,Django.CherryPy 都带着 WSGI server .当然性能都不好,自带的web server 更多的是测试用途, 发布时则 ...
- 出现ImportError: No module named win32api异常
ImportError: No module named win32api出现异常 实际是需要安装和自己python兼容的win32all 在http://starship.python.net/cr ...
- Quartz 2D(常用API函数、绘制图形、点线模式)
Quzrtz 2D 绘图的核心 API 是 CGContextRef ,它专门用于绘制各种图形. 绘制图形关键是两步: 1.获取 CGContextRef ; 2.调用 CGContextRef 的方 ...
- Event Handling Guide for iOS--(三)---Event Delivery: The Responder Chain
Event Delivery: The Responder Chain 事件传递:响应链 When you design your app, it’s likely that you want to ...
- hexo博客实现多终端共享&webhook自动化部署
摘要:好不容易搭建了hexo,还不满足.想要实现在小程序上也能访问博客,又不想再写一个后台.每次更新文章到服务器之后,希望能自动同步到网站上面.如果你有这样的需求,那么希望这篇文章能帮助到你. 我的配 ...
- FZU2277 Change(dfs序+树状数组)
传送门 题意 q次操作,操作有两种: 1 v x k:a[v]+=x,a[v']+=x-k(v'是v的子节点)... 2 v:查询\(a[v]mod(10^9+7)\) 分析 子节点增加的值为\(x+ ...
- Codeforces404C【构造】
题意: 一个图有n个点,每一个点最多连接k条直线,给出多有起点到终点的距离,没有环,不能输出重边,输出所有有连接的单向边 思路: 就是简单想-不知道怎么说了,画个图,我们建边,那么距离是 i 就是连距 ...