微信小程序云开发教程-微信小程序的JS基础-js文件基本结构与生命周期

同学们大家好，我是小伊同学，前面我们分别介绍了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文件中我们编写的代码进行执行，顾名思义称为“回调”。通过在回调函数中编写代码，就能够灵活地控制小程序的页面展示。

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

想看视频版？

关注公号“微程序学堂”，我们的视频教程即将上线

如果你自己写了好文章想投稿

请联系我们

微信小程序云开发教程-微信小程序的JS基础-js文件基本结构与生命周期相关推荐

微信小程序云开发教程-微信小程序框架的介绍
同学们大家好,我是小伊同学,今天我们来学习微信小程序框架. 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的.相同点在于他们使用的开发语言,代码结构以及代码的 ...
uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
❤️微信小程序云开发教程合集（视频+图文）免费❤️
一.视频版微信小程序云开发视频教程上线啦二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
小程序云开发教程七：贴子的详情及评论功能
我们先看看界面: 我们如果要实现评论功能, 先看一下总的数据结构: 那么需要什么参数呢? 参数如下 comment: 评论内容username: 用户名time: 评论时间userId: 用户idid ...
小程序云开发实现微信支付，不需要搭建服务器
一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...
mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...

微信小程序云开发教程-微信小程序的JS基础-js文件基本结构与生命周期

微信小程序云开发教程-微信小程序的JS基础-js文件基本结构与生命周期相关推荐

最新文章

热门文章