微信小程序——生命周期详解(代码解读)

在这里插入图片描述

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:微信小程序学习分享
✨特色专栏:国学周更-心性养成之路
🥭本文内容:微信小程序——使用 Vant 组件实现 Popup 弹出层(各位置弹出详细代码分享)

文章目录

    • 一、生命周期分类
      • 1、应用生命周期
      • 2、页面生命周期
    • 二、生命周期案例详解
      • 1、应用生命周期函数案例
      • 2、页面生命周期函数案例

在这里插入图片描述

一、生命周期分类

  小程序中的生命周期函数可以分为两类:应用生命周期和页面生命周期。

1、应用生命周期

  定义: 小程序的生命周期函数是在app.js中调用,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调。

  • onLaunch: 小程序初始化时触发,只执行一次。可以做一些全局的初始化操作。
  • onShow: 小程序启动或从后台进入前台时触发。可以在此进行页面状态的更新或数据的初始化。
  • onHide: 小程序从前台进入后台时触发。可以在此做一些资源释放或数据保存的操作。
  • onError: 小程序发生脚本错误或 API 调用失败时触发。

  在应用生命周期中,onLaunch是小程序初始化的入口函数,而onShow和onHide则是用来处理小程序的前后台切换。onError用于处理小程序中的错误,比如脚本错误或 API 调用失败等。

2、页面生命周期

  • onLoad: 页面加载时触发,只执行一次。可以在此进行页面初始化的操作,比如发送网络请求获取数据。
  • onShow: 页面被显示时触发,可以用来进行页面状态更新。
  • onReady: 页面初次渲染完成时触发,表示页面已经准备好,可以和视图层进行交互。
  • onHide: 页面被隐藏时触发,可以做一些资源释放或数据保存的操作。
  • onUnload: 页面被关闭时触发,可以做一些清理工作。

  在页面生命周期中,onLoad和onReady是页面的初始化阶段,onShow和onHide用于在页面显示和隐藏时进行响应,而onUnload则是在页面被完全关闭时触发。

二、生命周期案例详解

1、应用生命周期函数案例

  • onLaunch:
    该函数在小程序初始化时触发,只执行一次。
    可以在此进行全局的初始化操作,比如获取用户信息、登录等。

示例代码:

App({onLaunch: function() {// 小程序初始化时执行的操作console.log("小程序初始化");// 获取用户信息wx.getUserInfo({success: function(res) {console.log(res.userInfo);}});}
})
  • onShow:
    该函数在小程序启动或从后台进入前台时触发。
    可以在此进行页面状态的更新或数据的初始化。

示例代码:

App({onShow: function() {// 小程序启动或从后台进入前台时执行的操作console.log("小程序显示");// 更新用户状态this.globalData.isLogin = true;}
})
  • onHide:
    该函数在小程序从前台进入后台时触发。
    可以在此做一些资源释放或数据保存的操作。

示例代码:

App({onHide: function() {// 小程序从前台进入后台时执行的操作console.log("小程序隐藏");// 保存数据wx.setStorageSync('data', this.globalData.data);}
})
  • onError:
    该函数在小程序发生脚本错误或 API 调用失败时触发。
    可以在此做错误处理或日志记录。

示例代码:

App({onError: function(err) {// 小程序发生错误时执行的操作console.log("小程序出错", err);// 记录日志wx.reportAnalytics('error', {message: err.message,stack: err.stack});}
})

2、页面生命周期函数案例

  • onLoad:
    该函数在页面加载时触发,只执行一次。
    可以在此进行页面初始化的操作,比如发送网络请求获取数据。

示例代码:

Page({onLoad: function(options) {// 页面加载时执行的操作console.log("页面加载");// 发送网络请求wx.request({url: 'https://api.example.com/data',success: function(res) {console.log(res.data);}});}
})
  • onShow:
    该函数在页面被显示时触发。
    可以用来进行页面状态更新。

示例代码:

插入代码
复制代码
Page({onShow: function() {// 页面显示时执行的操作console.log("页面显示");// 更新页面状态this.setData({isReady: true});}
})
  • onReady:
    该函数在页面初次渲染完成时触发。
    表示页面已经准备好,可以和视图层进行交互。

示例代码:

Page({onReady: function() {// 页面初次渲染完成时执行的操作console.log("页面渲染完成");// 执行交互操作wx.showToast({title: "页面已加载"});}
})
  • onHide:
    该函数在页面被隐藏时触发。
    可以做一些资源释放或数据保存的操作。

示例代码:

插入代码
复制代码
Page({onHide: function() {// 页面隐藏时执行的操作console.log("页面隐藏");// 释放资源this.data.list = null;}
})
  • onUnload:
    该函数在页面被关闭时触发。
    可以做一些清理工作。

示例代码:

插入代码
复制代码
Page({onUnload: function() {// 页面被关闭时执行的操作console.log("页面关闭");// 清理工作wx.removeStorageSync('data');}
})

  码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/80693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

比较字符串和字符

Leetcode 93&#xff08;复原ip地址&#xff09; 比较字符串&#xff08;数字型&#xff09;大致有两种方法&#xff1a; 1、通过Integer.valueOf()转化成数字 class Solution {List<String> result new ArrayList<>();LinkedList<String> temp new Lin…

[uni-app] iOS/Android端 禁止单个页面侧滑返回的处理记录

需要禁止部分页面侧滑返回 iOS端 popGesture 但是实测后, 其实设置popGesture:none 是无效的 真正可以用的是这个 disableSwipeBack android端 别的方案没有逐一尝试, 这边可以在需要禁止的页面的 onBackPress onBackPress() {// 禁止侧滑(但注意也会禁止导航返回,导航返…

算法强训:第三十二天

文章目录 淘宝网店斐波那契凤尾一、淘宝网店IO链接 本题思路:本题是一道简单的语法题,按照题意要求即可。 #include <iostream> using namespace std; int main() {int arr[]={0,31,28,31,30,31,30,31,31,30,31,30,31};int year1,month1,day1,year2,month2,day2;while…

docker 存储挂载比较

docker存储概述 接触 docker 的朋友都知道&#xff0c;docker 镜像是以 layer 概念存在的&#xff0c;一层一层的叠加&#xff0c;最终成为我们需要的镜像。但该镜像的每一层都是 ReadOnly 只读的。只有在我们运行容器的时候才会创建读写层。文件系统的隔离使得&#xff1a; …

【Linus】vim的使用:命令模式、底行模式、插入模式、视图模式、替换模式的常用操作介绍

目录 注意&#xff1a;以下操作前提是要确保你输入法是英文模式 一、进入和退出各个模式的方法 1.命令模式 2.底行模式 3.插入模式 4.视图模式 5.替换模式 二、在命令模式中一些常用的操作 1.移动光标 2.删除文字 3.复制 4.替换 5.撤销上一次操作 6.更改 7.跳至…

华为云云耀云服务器L实例评测|评测使用

目录 一、云服务器的类型和功能 二&#xff0c;云服务器的优点 三&#xff0c;使用华为云耀云服务器使用 一、云服务器的类型和功能 企业可以从多种类型的云服务器中进行选择。三个主要模型包括&#xff1a; 公有云服务器&#xff1a;云服务器最常见的表达方式是虚拟机 (VM)&am…

进化算法、遗传编程和学习

一、说明 进化算法是一系列搜索算法&#xff0c;其灵感来自自然界&#xff08;达尔文主义&#xff09;进化过程。所有不同家庭成员的共同点是&#xff0c;通过应用受自然遗传学和自然选择启发的 算子&#xff0c;通过进化出最初 随机的候选解决方案群体来解决问题&#…

每日一博 - 闲聊Microservice Architecture

文章目录 概述图解小结 概述 典型微服务架构通常包括以下组件&#xff1a; 负载均衡器&#xff08;Load Balancer&#xff09;&#xff1a;用于将传入的流量分发到多个API网关实例以提高可用性。 内容分发网络&#xff08;CDN&#xff0c;Content Delivery Network&#xff0…

MFC中的类继承图的基本框架

一、类继承关系 从图中可知&#xff0c;在MFC中大多数的类都派生于CObject类&#xff0c;它的主要作用是为子类提供一些基本的功能&#xff0c;这些派生类构成了MFC应用程序的基本框架&#xff0c;它们各自的功能描述如表1所示。 派生类 功能描述 CCmdTarget 用于处理用户请…

Python list列表删除元素(4种方法)

在 Python列表中删除元素主要分为以下 3 种场景&#xff1a; 根据目标元素所在位置的索引进行删除&#xff0c;可以使用 del 关键字或者 pop() 方法&#xff1b;根据元素本身的值进行删除&#xff0c;可使用列表&#xff08;list类型&#xff09;提供的 remove() 方法&#xf…

Pytest系列-数据驱动@pytest.mark.parametrize(7)

简介 unittest 和 pytest参数化对比&#xff1a; pytest与unittest的一个重要区别就是参数化&#xff0c;unittest框架使用的第三方库ddt来参数化的 而pytest框架&#xff1a; 前置/后置处理函数fixture&#xff0c;它有个参数params专门与request结合使用来传递参数&#x…

CLIP 基础模型:从自然语言监督中学习可转移的视觉模型

一、说明 在本文中&#xff0c;我们将介绍CLIP背后的论文&#xff08;Contrastive Language-I mage Pre-Training&#xff09;。我们将提取关键概念并分解它们以使其易于理解。此外&#xff0c;还对图像和数据图表进行了注释以澄清疑问。 图片来源&#xff1a; 论文&#xff1a…

Layui + Flask | 实现注册、登录功能(案例篇)(08)

此案例内容比较多,建议滑到最后点击阅读原文,阅读体验更佳。后续也会录制案例视频,将在本周内上传到同名的 b 站账号。 已经看了 layui 表单相关的知识,接下来就可以实现注册功能,功能逻辑如下: 项目创建 新建 flask 项目下载 layui 文件,解压之后复制到指定文件编写前…

前缀和实例4(和可被k整除的子数组)

题目&#xff1a; 给定一个整数数组 nums 和一个整数 k &#xff0c;返回其中元素之和可被 k 整除的&#xff08;连续、非空&#xff09; 子数组 的数目。 子数组 是数组的 连续 部分。 示例 1&#xff1a; 输入&#xff1a;nums [4,5,0,-2,-3,1], k 5 输出&#xff1a;7 …

系统性能调优:提升服务器响应速度

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

95.qt qml-诺谦通用可扩展多功能QML界面

支持如下所示: 1.可扩展多功能交互&#xff0c;用户可以根据自己喜欢使用常用功能&#xff0c;针对多功能项目非常有用&#xff01;2.登录用户信息显示&#xff0c;历史消息显示&#xff0c;皮肤黑白风格切换 如下图所示: 自带一个功能界面&#xff0c;可以通过功能界面添加不…

第十三章总结

一.泛型 1.定义泛型类 泛型机制语法&#xff1a; 类名<T> 其中&#xff0c;T是泛型的名称&#xff0c;代表某一种类型。 【例13.6】创建带泛型的图书类 代码&#xff1a; 结果&#xff1a; 2.泛型的常规用法 (1)定义泛型类时声明多个变量 class MyCla…

算法通过村第八关-树(深度优先)青铜笔记|经典算法题目

文章目录 前言1. 二叉树里面的双指针1.1 判断两棵树是否相同1.2 对称二叉树1.3 合并二叉树 2. 路径专题2.1 二叉树的所有路径2.2 路径总和 3. 翻转的妙用总结 前言 提示&#xff1a;人类的底里是悲伤&#xff0c;我们都在用厚重的颜料&#xff0c;覆盖那些粗糙的线稿。--张皓宸…

ros2学习笔记:shell环境变量脚本setup.bash[-z][-n][-f]参数作用

-n作用 [ -n 字符串 ] or [ 字符串 ] 字符串的长度为非零&#xff08;有内容&#xff09;则为真。加-n与不加-n结果相同。 -z作用 [ -z 字符串 ] 字符串的长度为零则为真。 字符串为空即NULL时为真&#xff0c;与上面的-n相反。 -f作用 [ -f FILE ] 如果 FILE 存在且是一…

【C语言】指针和数组笔试题解析(2)

【C语言】指针和数组笔试题解析&#xff08;1&#xff09;&#xff0c; 这是第一篇关于sizeof与strlen在指针中的应用&#xff0c;而这一篇主要讲解在各种情形下的灵活运用&#xff0c;也是大厂中经典的面试题 第一题&#xff1a; int main() {int a[5] { 1, 2, 3, 4, 5 };in…