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

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

微信小程序生命周期介绍

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

全局生命周期

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

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日

相关文章

  • JavaScript中清空数组的方法总结

    JavaScript 中清空数组的方法总结 JavaScript 中清空一个数组可以使用多种方法,本文将对常见的清空数组的方式进行总结。 1. 直接使用赋值操作符 可以将一个空数组赋值给目标数组,直接清空数组。 var arr = [1, 2, 3]; arr = []; console.log(arr); // [] 2. 使用数组的splice方法 使用…

    JavaScript 2023年5月27日
    00
  • 一次微信小程序内地图的使用实战记录

    下面我将详细讲解使用微信小程序内地图的操作步骤和注意事项,以及两条示例说明。 一、前期准备 1. 开通小程序云开发环境 首先需要开通小程序云开发环境,可以参考微信官方文档进行操作。 2. 获取高德地图API Key 在使用高德地图之前,需要在高德开放平台上注册账号,并获取API Key。具体流程可以参考高德地图官方文档。 3. 安装必要的npm包 使用微信小…

    JavaScript 2023年6月11日
    00
  • js实现精确到秒的日期选择器完整实例

    下面就是关于“js实现精确到秒的日期选择器完整实例”的详细攻略。 1. 实现思路 根据需求,我们需要实现一个日期选择器,可以精确到秒,并且用户选择的日期和时间要能够转化成特定格式的字符串。实现思路如下: 创建DateSelector构造函数,接受一个DOM元素作为参数,用于将日期选择器添加到该元素中。 在构造函数中创建一个input元素,用户可以通过该元素选…

    JavaScript 2023年5月27日
    00
  • 网页设计中HTML代码、CSS代码和javascript的技巧和细节

    HTML、CSS和JavaScript是网页设计中最常用的三种技术,它们分别负责网页内容、样式和交互。在使用这些技术时需要注意一些技巧和细节,下面我们具体来分析一下。 HTML代码技巧 标签语义化 HTML标签应该使用语义化的标签,尽量符合内容的语义。比如说,文字内容应该使用<p>标签,图片应该使用<img>标签,标题应该使用h1~h…

    JavaScript 2023年5月19日
    00
  • Javascript类型转换的规则实例解析

    标题:Javascript类型转换的规则实例解析 JavaScript类型转换 在JavaScript中,类型转换是非常常见的操作,在进行类型转换时可能会涉及自动类型转换和强制类型转换两种方式。 自动类型转换 自动类型转换是JavaScript中的一种默认行为,在运行代码时,如果需要把一个数据类型赋值给另外一个数据类型时,JavaScript会自动进行类型转…

    JavaScript 2023年5月20日
    00
  • javascript操作Cookie(设置、读取、删除)方法详解

    JavaScript操作Cookie(设置、读取、删除)方法详解 什么是Cookie Cookie是一种存储在用户浏览器中的小文本文件,它包含网站的服务器发给浏览器的信息,可以用来识别已经访问过该网站的用户。因为Cookie是纯文本格式并且只存储少量信息,所以它们不会对系统性能产生太大影响。 设置Cookie 通过JavaScript可以轻松地设置Cooki…

    JavaScript 2023年6月11日
    00
  • JavaScript与JQuery框架基础入门教程

    JavaScript与JQuery框架基础入门教程 什么是JavaScript? JavaScript 是一种编程语言,通常用于在网页上添加交互性和动态性。不像 HTML 和 CSS,JavaScript 是一种脚本语言,它需要通过浏览器来解释和执行。JavaScript 是一种非常流行的编程语言,它的使用广泛,可用于开发网页、移动应用、游戏等。 JavaS…

    JavaScript 2023年5月18日
    00
  • 一文读懂JS中的var/let/const和暂时性死区

    一文读懂JS中的var/let/const和暂时性死区 在 JavaScript 中,变量声明语句有三种:var、let 和 const。除此之外,ES6 引入了新的概念——暂时性死区。 var var 是 ES5 中引入的声明变量的关键字,它的作用域是函数作用域或全局作用域。使用 var 声明的变量可以在函数内部或全局范围内访问(也可以在任意位置声明,在函…

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