微信小程序云开发教程-微信小程序的JS基础-js文件基本结构与生命周期
发布于 4 年前 作者 yong20 289 次浏览 来自 分享

同学们大家好,我是小伊同学,前面我们分别介绍了WXML和WXSS,那么今天我们一起来学习微信小程序前端三种语言的最后一种——Javascript,实际上我们在云开发中,前后端都需要使用JS,因此在第三章我们已经讲解了基本语法等知识,下面我们主要来介绍小程序前端开发中的JS相关知识,今天我们首先来一起学习js文件基本结构与生命周期。



  右图是我们自动生成的一个小程序页面的js文件,我们将结合这个文件来为大家说明。


  对于小程序中的每个页面,都需要在页面对应的 js文件中调用page 方法注册页面实例,指定页面的初始数据、生命周期回调、事件处理函数等。这里的page方法,就是左侧上方的语句,花括号中间为页面内容。也就是说,小程序每个页面的js中都必须写上这个语句,这样才可以创建这个页面,至于页面的内容,则可以按照需要来写,不写任何东西也不会报错。


  在page方法的内容中,首先,我们可以看到一个data对象,它主要用来存放该页面的数据。我们在data中写入的数据,可以通过数据绑定的方式展示在wxml中,这个我们之前已经有所了解。对于data来说,其语法格式是固定的,使用data冒号花括号的形式。对于花括号的内容,则是和我们刚才讲的基本数据类型中的对象类型一致,每一行都是一个属性,使用逗号作为结尾,每条属性为名称、冒号、值的格式。



  在page方法的内容中,主要有两种格式,一种是对象例如data,而另一种就是js函数。函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。他的基本格式为,函数名冒号function特定关键字声明加圆括号花括号,其中圆括号中,为函数的参数,可以有多个或没有,使用逗号分隔,一般在js中对用户响应进行处理时,我们可以通过这里的参数得到包括组件id、组件携带的一些数据等关键信息。在花括号中为函数的内容,即可执行的js代码


  在编译器自动生成的js文件中,只有一个data部分,但是有很多的函数,他们的名称各不相同,但都只有一个或者没有参数。在讲解这些默认创建的函数之前,我们需要给大家讲解一个重要的概念,小程序的生命周期和回调函数。



  在小程序中,每个页面都存在着一条时间线,从页面的加载、显示到界面被销毁是一个完整的流程,我们称这样一个流程叫做生命周期。理解起来很简单,一个页面就像是一条生命,从起点到终点,比如一朵花,从种子、发芽、开花、结果、凋零这样一个过程,页面也是一样,从代码的加载,到页面渲染,然后展示在屏幕上。当我们在不同页面之间切换的时候,就会产生页面的隐藏。当我们关闭小程序时,实际上就是页面的销毁。


  在使用小程序的过程中,虽然我们感觉很流畅,也就在一秒都不到的时间内就能够展示在你的面前,但是在小程序整个生命周期中,这却是一个很复杂的过程,需要执行一连串的代码。在这串代码执行的关键节点上,我们插入了一些函数,就是右边这里展示的这些函数,我们也称之为回调函数。当程序执行到这个流程节点上,要返回js文件中我们编写的代码进行执行,顾名思义称为“回调”。通过在回调函数中编写代码,就能够灵活地控制小程序的页面展示。


  那么这些函数是用来干什么的呢以及都有哪些回调函数呢?我们下一节课再给大家讲解。好了,本节课的内容就到这里,我们明天继续。

回到顶部