Page({
  /**
  * 页面的初始数据
  */
  data: {
  },   /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
  },   /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
  },   /**
  * 生命周期函数--监听页面显示
  */
  onShow: function () {
  },
  
  /**
  * 生命周期函数--监听页面隐藏
  */
  onHide: function () {
  },   /**
  * 生命周期函数--监听页面卸载
  */
  onUnload: function () {
  },   /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {
  },   /**
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
  },   /**
  * 用户点击右上角分享
  */
  onShareAppMessage: function () {
  }
})

如果是用小程序的开发工具新建的页面,默认情况下面,这个js文件中会有一些默认的代码。如上。我们看一下这些默认代码的结构。

首先鼠标停留在Page上,会发现他是一个function。这个function接受一个参数,就是花括号里面的内容。就是一个js对象,这个js对象作为一个参数传递给Page这个函数。我们编写js代码都是在这个花括号内部编写的。
我们首先看下里面的生命周期函数,首先什么是小程序的生命周期函数呢?首先呢,他是一个函数,作用就是用来描述一个页面的生命周期。比如一个人,有幼年,青年,中年,老年这些生命周期。那么这个函数也有他的一个生命周期。比如
onLoad,监听页面加载,也可以理解为页面初始化的时候,他就会执行这样一个onLoad函数。
onReady,生命周期函数--监听页面初次渲染完成。
onShow,生命周期函数--监听页面显示,就是页面显示的时候会执行这个函数。
onHide,监听页面隐藏,页面隐藏的时候会去执行。
onUnload,监听页面卸载,页面卸载的时候会去执行。
生命周期函数是一定有一个时间线的,比如人,有幼年,青年,中年,老年。页面也是有时间线的。我们执行这个js的时候,是以onload-onshow-onready的顺序执行的。一开始的时候onhide,onunload是不会执行的,要页面隐藏或卸载的时候才执行。
除了这些,还有三个函数是什么呢,这三个并不属于生命周期函数,它们是小程序执行一些特定的操作的时候会触发的函数。
onPullDownRefresh,监听用户下拉动作
onReachBottom,页面上拉触底事件的处理函数
onShareAppMessage,用户点击右上角分享的时候执行这个函数
如果我们要写自己的js代码的时候,跟默认的函数一样的。在page里面可以自己定义各种各样的函数。

JS与小程序页面生命周期的更多相关文章

  1. [转] 微信小程序之生命周期

    本篇文章介绍小程序的生命周期,由于小程序分为应用和页面两个部分,所以小程序的生命周期就涉及到三个部分,分别是: 应用的生命周期 页面的生命周期 应用的生命周期对页面生命周期的影响 一.应用的生命周期 ...

  2. 教你理解微信小程序的生命周期和运行原理

    转自:http://blog.csdn.net/tsr106/article/details/53052879  写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君 ...

  3. 理解微信小程序的生命周期和运行原理

    写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...

  4. 小程序的生命周期 launchApp

    https://developers.weixin.qq.com/miniprogram/dev/api/launchApp.html?search-key=生命周期 launchApp(OBJECT ...

  5. 微信小程序-APP生命周期与运行机制

    QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...

  6. 微信小程序之生命周期(三)

    [未经作者本人同意,请勿以任何形式转载] 上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的 ...

  7. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  8. 微信小程序生命周期——小程序的生命周期及页面的生命周期。

    最近在做微信小程序开发,也发现一些坑,分享一下自己踩过的坑. 生命周期是指一个小程序从创建到销毁的一系列过程. 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面. 首先来 ...

  9. 微信小程序之生命周期

    1. 整个小程序生命周期 App({}) //app.js App({ onLaunch: function (options) { // 小程序初始化完成时(全局只触发一次) // 程序销毁(过一段 ...

随机推荐

  1. CTF 资源

    1.<CTF 工具集>包括web工具.渗透环境.隐形工具.逆向工具.漏洞扫描工具.sql注入工具.暴力破解工具.加解密工具等等. 参考地址:https://www.ctftools.com ...

  2. SpringMVC:学习笔记(11)——依赖注入与@Autowired

    SpringMVC:学习笔记(11)——依赖注入与@Autowired 使用@Autowired 从Spring2.5开始,它引入了一种全新的依赖注入方式,即通过@Autowired注解.这个注解允许 ...

  3. 【嵌入式硬件Esp32】Ubuntu18.04 更换阿里云软件源

    使用Ubuntu 的apt-get来安装软件是总是因为官方源的速度太慢而抓狂. 但是用阿里云的源就很快,下面总结一下如何更换Ubuntu的软件源. 一.备份sudo cp /etc/apt/sourc ...

  4. Nginx负载均衡-如何自定义URL中的hash key2

    upstream backend1 {            server 192.168.3.236:555;            server 192.168.3.236:222;        ...

  5. 【OpenGL开发】关于GLEW扩展库

    GLEW是一个跨平台的C++扩展库,基于OpenGL图形接口.使用OpenGL的朋友都知道,window目前只支持OpenGL1.1的涵数,但 OpenGL现在都发展到2.0以上了,要使用这些Open ...

  6. Freemarker讲解

    FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现 ...

  7. linux本地内核提权之CVE-2019-13272(鸡肋)

    CVE-2019-13272 发布时间: 2019月7月17日 影响内核版本: Linux Kernel < 5.1.17 漏洞描述: 译文 kernel 5.1.17之前版本中存在安全漏洞,该 ...

  8. kafka原理分析

    #kafka为什么有高吞吐量 1 由于接收数据时可以设置request.required.acks参数,一般设定为1或者0,即生产者发送消息0代表不关心kafka是否接收成功,也就是关闭ack:1代表 ...

  9. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  10. [转帖]TPC-C解析系列04_TPC-C基准测试之数据库事务引擎的挑战

    TPC-C解析系列04_TPC-C基准测试之数据库事务引擎的挑战   http://www.itpub.net/2019/10/08/3331/ OceanBase这次TPC-C测试与榜单上Oracl ...