微信小程序 生命周期和页面的生命周期详细介绍

下面详细讲解一下微信小程序的生命周期和页面的生命周期:

微信小程序生命周期介绍

微信小程序生命周期分为两个部分:全局生命周期和页面生命周期。全局生命周期是指在整个小程序中被执行的方法,而页面生命周期则是指在页面中被执行的方法。

全局生命周期

全局生命周期包含以下方法:

1. onLaunch(options)

在小程序初始化完成时执行,只会执行一次。

参数说明:

options:Object,启动小程序时的参数,包含了 queryscenepathshareTicketreferrerInfo 等信息。

示例代码:

App({
  onLaunch: function(options) {
    console.log('小程序初始化完成');
    console.log('options:', options);
  }
})

2. onShow(options)

在小程序启动或从后台进入前台时执行。

参数说明:

options:Object,启动小程序时的参数,包含了 queryscenepathshareTicketreferrerInfo 等信息。

示例代码:

App({
  onShow: function(options) {
    console.log('小程序显示');
    console.log('options:', options);
  }
})

3. onHide()

在小程序从前台进入后台时执行。

示例代码:

App({
  onHide: function() {
    console.log('小程序隐藏');
  }
})

页面生命周期

页面生命周期包含以下方法:

1. onLoad(options)

在页面加载时执行,只会执行一次。

参数说明:

options:Object,页面加载时的参数,包含了 queryscenepathshareTicketreferrerInfo 等信息。

示例代码:

Page({
  onLoad: function(options) {
    console.log('页面加载完成');
    console.log('options:', options);
  }
})

2. onReady()

在页面初次渲染完成时执行。

示例代码:

Page({
  onReady: function() {
    console.log('页面初次渲染完成');
  }
})

3. onShow()

在页面显示时执行。

示例代码:

Page({
  onShow: function() {
    console.log('页面显示');
  }
})

4. onHide()

在页面隐藏时执行。

示例代码:

Page({
  onHide: function() {
    console.log('页面隐藏');
  }
})

5. onUnload()

在页面卸载时执行。

示例代码:

Page({
  onUnload: function() {
    console.log('页面卸载');
  }
})

示例说明

示例一

下面是一段包含了所有生命周期的示例代码:

App({
  //全局生命周期
  onLaunch: function(options) {
    console.log('小程序初始化完成');
    console.log('options:', options);
  },
  onShow: function(options) {
    console.log('小程序显示');
    console.log('options:', options);
  },
  onHide: function() {
    console.log('小程序隐藏');
  },
  //页面生命周期
  onPageNotFound: function() {
    console.log('页面不存在');
  }
})

Page({
  //页面生命周期
  onLoad: function(options) {
    console.log('页面加载完成');
    console.log('options:', options);
  },
  onReady: function() {
    console.log('页面初次渲染完成');
  },
  onShow: function() {
    console.log('页面显示');
  },
  onHide: function() {
    console.log('页面隐藏');
  },
  onUnload: function() {
    console.log('页面卸载');
  }
})

示例二

下面是一个包含跳转页面的示例代码,可以看到跳转后的页面会触发 onLoadonReady 方法,而原页面则会触发 onHideonUnload 方法。

// index.js
Page({
  jump: function() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    })
  }
})

// detail.js
Page({
  onLoad: function () {
    console.log('页面加载完成');
  },
  onReady: function () {
    console.log('页面初次渲染完成');
  },
  onHide: function () {
    console.log('页面隐藏');
  },
  onUnload: function () {
    console.log('页面卸载');
  }
})

希望以上对微信小程序生命周期和页面生命周期的介绍对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序 生命周期和页面的生命周期详细介绍 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS操作json对象key、value的常用方法分析

    今天我们一起来详细讲解一下JS操作json对象key、value的常用方法分析。 常用方法分析 在JS中,我们可以使用以下一些方法来操作json对象中的key和value。 1. 获取json对象的keys 我们可以使用Object.keys()方法来获取json对象中所有的keys,具体用法如下所示: const json = { name: "…

    JavaScript 2023年5月27日
    00
  • JavaScript canvas实现动态点线效果

    下面就是详细讲解 JavaScript canvas 实现动态点线效果的完整攻略。 简介 Canvas 是 HTML5 中一个非常重要的特性,它可以用 JavaScript 来绘制图像,包括各种形状、文本、图片以及动画等。我们可以通过 Canvas 实现各种炫酷的效果,其中动态点线效果就是其中的一种。 实现过程 1. 构建 Canvas 环境 首先,我们需要…

    JavaScript 2023年6月11日
    00
  • javascript数组的定义及操作实例

    下面就是关于“JavaScript数组的定义及操作实例”的完整攻略。 什么是JavaScript数组? 在 JavaScript 中,数组是一种特殊的变量,它们用于存储多个值,这些值可以是任何类型的数据,比如整数、字符串、对象等等。JavaScript中的数组是一种无序集合,数组中的元素可以通过索引访问,索引从0开始。 JavaScript数组的定义方式 定…

    JavaScript 2023年5月27日
    00
  • JavaScript中调用函数的4种方式代码实例

    让我来详细讲解一下“JavaScript中调用函数的4种方式代码实例”。 1. 直接调用函数 直接调用函数指的是使用函数名,后跟一对圆括号,不带任何修饰符或执行环境调用函数。 示例: function sayHello() { console.log("Hello!"); } sayHello(); 上述示例中我们定义了一个函数 sayH…

    JavaScript 2023年5月27日
    00
  • JS日期对象简单操作(获取当前年份、星期、时间)

    下面是JS日期对象简单操作的完整攻略: 获取当前年份 获取当前年份可以通过JavaScript中的Date对象和其相关的方法来实现。具体步骤如下: 创建一个Date对象,可以使用new关键字来创建,不传入任何参数即可表示当前日期时间。 const date = new Date(); 使用getFullYear()方法获取当前日期中的年份,返回值是一个四位整…

    JavaScript 2023年5月27日
    00
  • 这段js代码得节约你多少时间

    这段JS代码节约了很多处理数组的时间。具体是通过使用Array.reduce()方法来将数组中的元素合并成一个值,从而避免了使用循环操作数组的需要,大大提高了代码效率。 下面是完整的攻略: 1. 理解 Array.reduce() 方法 Array.reduce() 方法是 JavaScript 数组常用的高阶函数之一,它对数组中的所有元素进行迭代,并将它们…

    JavaScript 2023年5月27日
    00
  • ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    下面是关于ES6中类(class)和继承(extends)的详细讲解: 什么是类(class) 类(class)是ES6中的一个新特性,是一种对象构造器,它可以通过类来创建对象,其语法定义如下: class MyClass { // 类的构造方法,当通过new关键字实例化类对象时,会调用这个方法来初始化对象的属性 constructor(args) { //…

    JavaScript 2023年5月28日
    00
  • Javascript计算时间差的函数分享

    下面我来为你详细讲解“JavaScript计算时间差的函数分享”的完整攻略。在JavaScript中,我们可以通过Date对象来获取当前时间,并利用Date对象的方法计算时间差。 获取当前时间 我们可以使用new Date()获取当前时间,具体代码如下: const now = new Date(); console.log(now); 上述代码中,now就…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部