热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序中控制器的初始化逻辑是什么

微信小程序中控制器的初始化逻辑是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决

微信小程序中控制器的初始化逻辑是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

下面介绍微信小程序的控制器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函数,用于响应微信小程序的用户输入,比如视图上的按钮点击事件等等。

看完上述内容,你们掌握微信小程序中控制器的初始化逻辑是什么的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程笔记行业资讯频道,感谢各位的阅读!


推荐阅读
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
  • 本文介绍了ASP.NET Core MVC的入门及基础使用教程,根据微软的文档学习,建议阅读英文文档以便更好理解,微软的工具化使用方便且开发速度快。通过vs2017新建项目,可以创建一个基础的ASP.NET网站,也可以实现动态网站开发。ASP.NET MVC框架及其工具简化了开发过程,包括建立业务的数据模型和控制器等步骤。 ... [详细]
  • ps:写的第一个,不足之处,欢迎拍砖---只是想用自己的方法一步步去实现一些框架看似高大上的小功能(比如说模型中的toArraytoJsonsetAtt ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • React项目中运用React技巧解决实际问题的总结
    本文总结了在React项目中如何运用React技巧解决一些实际问题,包括取消请求和页面卸载的关联,利用useEffect和AbortController等技术实现请求的取消。文章中的代码是简化后的例子,但思想是相通的。 ... [详细]
  • 如何提高PHP编程技能及推荐高级教程
    本文介绍了如何提高PHP编程技能的方法,推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力,本文提醒读者要有足够的耐心和时间投入。通过实践操作学习,可以更好地理解和掌握PHP语言的特异性,特别是单引号和双引号的用法。同时,本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言,建议读者要从整体来考虑局部,培养大局观。最后,本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • SpringBoot简单日志配置
     在生产环境中,只打印error级别的错误,在测试环境中,可以调成debugapplication.properties文件##默认使用logbacklogging.level.r ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 程序员_阿里Antd藏圣诞节彩蛋 程序员被离职
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了阿里Antd藏圣诞节彩蛋程序员被离职相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 我正在尝试使用scrapycrallsingle运行完美运行的scrapy蜘蛛,但我无法在python脚本中运行它.主要问题是从不执行SingleBlogSpider.parse方 ... [详细]
  • layui表格分页不生效怎么办
    web前端|Layui教程layuiweb前端-Layui教程小程序实例源码,ubuntuip切换,tomcat默认端改为80,爬虫完整源码,微信小程序php接口,seo专业培训班 ... [详细]
  • 这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。脚本数据保存如果您已初始化dataProcessor,则用户或以编程方式所做的任何更改都将自动 ... [详细]
author-avatar
诺亚方舟菲芘袁子陽
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有