当前位置: 首页 > news >正文

页面、组件、应用、生命周期(微信小程序)

文章目录

      • 页面生命周期函数
      • 组件生命周期函数
      • 应用(App)生命周期函数
      • 页面与组件生命周期的执行顺序
      • 注意事项

在微信小程序中,生命周期函数是指页面或组件在不同阶段会被自动调用的特定函数。这些函数可以帮助开发者在适当的时机完成特定的初始化、清理或交互逻辑。


页面生命周期函数

页面生命周期函数是作用于小程序中的页面,处理页面加载、显示、隐藏等事件。

函数名描述
onLoad(options)页面加载时触发,参数为打开当前页面路径中的参数。
onShow()页面显示时触发,每次进入页面都会执行。
onReady()页面初次渲染完成时触发,仅执行一次。
onHide()页面被隐藏时触发,如跳转到其他页面或切入后台。
onUnload()页面卸载时触发,如关闭当前页面或返回上一页。
onPullDownRefresh()监听用户下拉刷新动作,需在 app.json 中开启 "enablePullDownRefresh"
onReachBottom()监听页面触底事件,如用于加载更多数据。
onPageScroll()监听页面滚动,参数为滚动距离(单位 px)。
onShareAppMessage(options)用户点击右上角分享时触发,可自定义分享内容。
onShareTimeline()用户点击分享按钮分享到朋友圈时触发(需要设置 enableShareTimeline)。
onAddToFavorites()用户点击收藏时触发,需设置 enableAddToFavoritestrue
onResize()监听页面尺寸变化,如屏幕旋转(横竖屏切换)。
onTabItemTap(item)监听点击 tab 时触发,仅在 tab 页面有效。

组件生命周期函数

组件生命周期函数用于处理组件的创建、更新、销毁等阶段的事件。

函数名描述
created()在组件实例刚刚被创建时触发。
attached()在组件实例进入页面节点树时触发。
ready()在组件布局完成后触发,可以操作 DOM 节点。
moved()在组件实例被移动到其他位置时触发。
detached()在组件实例被从页面节点树移除时触发。
error(error)当组件方法抛出错误时触发,参数为错误信息。
lifetimes.show()组件被展示时触发(支持页面级别的监听)。
lifetimes.hide()组件被隐藏时触发(支持页面级别的监听)。
lifetimes.resize()监听组件尺寸变化。

应用(App)生命周期函数

应用生命周期函数用于处理小程序的整体生命周期,主要是小程序的启动、切换前后台等。

函数名描述
onLaunch(options)小程序初始化时触发,全局只触发一次。
onShow(options)小程序启动或从后台进入前台时触发。
onHide()小程序从前台进入后台时触发。
onError(error)小程序发生脚本错误或 API 调用失败时触发。
onUnhandledRejection(reason)未处理的 Promise 拒绝触发。
onPageNotFound(options)当页面不存在时触发,可进行页面跳转(最多触发一次)。
onThemeChange(theme)小程序主题发生变化时触发,参数为主题信息。
onUnhandledRejection(reason)未捕获的 Promise 错误触发,参数为错误原因。

页面与组件生命周期的执行顺序

  1. 页面首次加载时
    • App.onLaunch -> App.onShow -> Page.onLoad -> Page.onShow -> Page.onReady
  2. 页面切换
    • 离开页面:Page.onHide
    • 新页面加载:Page.onLoad -> Page.onShow -> Page.onReady
  3. 页面卸载
    • Page.onUnload
  4. 小程序切后台
    • Page.onHide -> App.onHide
  5. 小程序切回前台
    • App.onShow -> Page.onShow

注意事项

  1. onPullDownRefreshonReachBottom

    • 需要在 app.jsonpage.json 中配置相应的功能开关。
    • 在数据加载完成后,需调用 wx.stopPullDownRefresh() 停止刷新动画。
  2. onShareAppMessage

    • 如果未定义该方法,分享时将无法自定义内容,显示默认的页面标题和链接。
  3. onPageNotFound

    • 必须在 App 的配置中设置 "entryPagePath" 否则可能不会触发。
  4. 组件生命周期

    • 对于组件与页面交互,需要关注组件的 attacheddetached 阶段,以进行初始化和清理操作。

通过合理利用生命周期函数,可以更高效地管理小程序的状态和资源,提高开发体验和用户体验。

在这里插入图片描述

相关文章:

页面、组件、应用、生命周期(微信小程序)

文章目录 页面生命周期函数组件生命周期函数应用(App)生命周期函数页面与组件生命周期的执行顺序注意事项 在微信小程序中,生命周期函数是指页面或组件在不同阶段会被自动调用的特定函数。这些函数可以帮助开发者在适当的时机完成特定的初始化…...

书生第四期实训营进阶岛——L2G4000 InternVL 多模态模型部署微调实践

基础任务 体验InternVL 运行demo 效果如下: 使用XTuner对InternVL进行微调 运行demo 效果如下:...

国内 ChatGPT中文版镜像网站整理合集(2024/11/08)

一、GPT中文镜像站 ① yixiaai.com 支持GPT4、4o以及o1,支持MJ绘画 ② chat.lify.vip 支持通用全模型,支持文件读取、插件、绘画、AIPPT ③ AI Chat 支持GPT3.5/4,4o以及MJ绘画 1. 什么是镜像站 镜像站(Mirror Site&#xff…...

SpringBoot整合Liquibase对数据库管理和迁移

简介 Liquibase是一个用于用于跟踪、管理和应用数据库变化的开源工具,通过日志文件(changelog)的形式记录数据库的变更(changeset),然后执行日志文件中的修改,将数据库更新或回滚(rollback)到一致的状态。它的目标是提供一种数据库类型无关的…...

太空旅游:科技能否让星辰大海变为现实?

内容概要 在这个快速变化的时代,太空旅游成为了一个让人热血沸腾的话题。想象一下,坐在一颗漂浮的太空舱里,手中端着饮料,眺望着无尽的星辰大海,简直就像科幻电影中的情节一样。不过,这不仅仅是一个空洞的…...

[JAVAEE] 面试题(四) - 多线程下使用ArrayList涉及到的线程安全问题及解决

目录 一. 多线程下使用ArrayList 1.1. 自行判断加锁 1.2 使用Collections.synchronizedList()套壳加锁 1.3 CopyOnWriteArrayList类 二. 总结 一. 多线程下使用ArrayList 多线程下使用ArrayList会涉及到线程安全问题, 例如: public static void main(String[] args) thro…...

Elasticsearch-linux环境部署

本文主要介绍linux下elasticsearch的部署。通过在一台linux服务器中分别对elasticsearch-6.7.2版本,elasticsearch-7.3.0版本来进行安装,记录在安装elasticsearch-7.3.0版本时出现的异常情况,以及elasticsearch-head的安装。 基础环境 本机已…...

LeetCode 每日一题 长度为 K 的子数组的能量值

长度为 K 的子数组的能量值 给你一个长度为 n 的整数数组 nums 和一个正整数 k 。 一个数组的 能量值 定义为: 如果 所有 元素都是依次 连续 且 上升 的,那么能量值为 最大 的元素。 否则为 -1 。 你需要求出 nums 中所有长度为 k 的 子数组 的能量值。 …...

人工智能——小白学习指南

知孤云出岫 目录 1. **智能评测系统**2. **个性化学习路径推荐**3. **虚拟学习助手**4. **学习行为分析**5. **数据驱动的教学决策**6. **自动化课程推荐**7. **数据隐私与安全保护** 人工智能知识点的总结和学习路线,以数据表格形式呈现,并附带在教育行…...

go 集成Gin Web开发框架

引入gin的依赖 下载并安装 gin go get -u github.com/gin-gonic/gin 将 gin 引入到代码中 import "github.com/gin-gonic/gin" 开始 package mainimport "github.com/gin-gonic/gin"func main() {r : gin.Default()r.GET("/ping", func(c …...

c++ 多态性

类的多态 多态概念入门 #include <iostream> using namespace std;/* 多态的前提: 拥有继承关系的类中有相同的函数(返回类型、函数名、形参列表) 多态解决的问题&#xff1a;1、派生类的对象被赋值给基类对象时2、派生类的对象初始化基类的引用时3、基类的指针指向派生…...

块存储、文件存储和对象存储详细介绍

块存储、文件存储和对象存储介绍 块存储&#xff1a;像跑车&#xff0c;因为它们都能提供快速的响应和高性能&#xff0c;适合需要即时数据访问的场景&#xff0c;比如数据库和虚拟化技术。 文件存储&#xff1a;像货车&#xff0c;因为它们都能承载大量货物&#xff08;文件&…...

移植 AWTK 到 纯血鸿蒙 (HarmonyOS NEXT) 系统 (9) - 编译现有的AWTK应用程序

AWTK 应用程序开发完成后&#xff0c;在配置文件中添加 harmonyos 的选项&#xff0c;通过create_project.py脚本即可生成 DevEco Studio的工程。 安装开发环境 DevEco Studio HarmonyOS 的开发工具。 Python 运行环境。 git 源码管理工具。 下载 awtk 和 awtk-harmonyos…...

ssm基于BS的仓库在线管理系统的设计与实现+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码看文章最下面 需要定制看文章最下面 目 录 第一章 绪论 1 1.1 研究背景 1 1.2 研究意义 1 1.3 研究内容 2 第二章 开发环境与技术3 …...

面试题:Spring(一)

1. Spring框架中bean是单例么&#xff1f; Service Scope("singleton") public class UserServiceImpl implements UserService { }singleton : bean在每个Spring IOC容器中只有一个实例。prototype&#xff1a;一个bean的定义可以有多个实例。 2. Spring框架中的…...

MySQ怎么使用语法介绍(详细)

一、什么是库结构 库结构的意思就是指数据库的结构。所以&#xff0c;理解“库结构”就要先理解“库”是什么。 在数据库的上下文中&#xff0c;库指的是一个数据库。简单来说&#xff0c;数据库&#xff08;库&#xff09;是用来存储和管理数据的容器。它不仅存储实际的数据…...

新能源汽车与公共充电桩布局

近年来,全球范围内对新能源汽车产业的推动力度不断增强,中国新能源汽车市场也呈现蓬勃发展的势头,在政策与市场的共同推动下,新能源汽车销量持续增长。然而,据中国充电联盟数据显示,充电基础设施建设滞后于新能源汽车数量增长的现状导致充电桩供需不平衡,公共充电桩服务空白区域…...

【GIT】sourceTree的“当前分支“,“合并分支“与“检出分支的区别

GIT三款经典可视化 由上文文档得出灵感写出此篇 这三个概念在 Git 操作中都是很常见的&#xff0c; 来逐个解析&#xff1a; 1. 当前分支 “当前分支”就是你目前正在工作的分支。你在进行任何代码修改、提交等操作时&#xff0c;都会应用到“当前分支”上。换句话说&#xf…...

【Git】如何在 Git 中高效合并分支:完整指南

目录 引言1. 切换到主分支1.1 切换分支命令1.2 相关命令1.3 切换分支示意图 2. 合并分支2.1 基本合并命令2.2 合并选项2.3 合并流程示意图 3. 解决冲突3.1 解决冲突的步骤3.2 相关命令3.3 解决冲突示意图 4. 本地更新分支4.1 拉取远程更改4.2 更新主分支4.3 拉取远程更新到本地…...

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代&#xff0c;抖音电商以其独特的魅力&#xff0c;成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中&#xff0c;成都睿明智科技有限公司犹如一艘稳健的航船&#xff0c;引领着无数企业驶向成功的彼岸。今天&#xff0c;就让我们一起揭开成…...

数据库存储有什么作用

数据库存储就是把数据安全、规范、高效地存起来&#xff0c;方便以后用&#xff0c;核心作用可以分成这几块&#xff1a;1. 持久化保存程序关掉、电脑重启&#xff0c;数据不会丢失不像内存一断电就清空&#xff0c;数据库存在硬盘里长期保存2. 统一管理数据把零散的文件、记录…...

Unity UGUI实战:手把手教你打造一个可拖拽、可弯曲的UI连线组件(附完整源码)

Unity UGUI实战&#xff1a;打造可拖拽、可弯曲的智能连线系统 在游戏开发中&#xff0c;可视化连接系统是构建技能树、流程图、科技树等复杂UI结构的核心组件。传统实现往往局限于静态线条或简单的直线连接&#xff0c;缺乏交互性和动态美感。本文将带你从零构建一个支持实时拖…...

GG3M贝叶斯决策数学体系:六大核心领域落地应用与差异化壁垒

GG3M贝叶斯决策数学体系&#xff1a;六大核心领域落地应用与差异化壁垒摘要 GG3M的贝叶斯更新与决策数学体系&#xff0c;基于原创“事实层—模型层—元模型层”三层级架构&#xff0c;以系统长期反熵增演化为核心决策标尺&#xff0c;从“智能参数优化”跨越至“智慧框架迭代”…...

告别恼人红叉!保姆级教程:用acme.sh给宝塔面板IP地址换上Let‘s Encrypt免费证书

从红叉到绿锁&#xff1a;零成本为宝塔面板IP地址部署可信SSL证书全指南 每次打开宝塔面板&#xff0c;那个刺眼的红色安全警告是否让你如鲠在喉&#xff1f;作为服务器管理员&#xff0c;我们比谁都清楚自签名证书的实际安全性&#xff0c;但浏览器固执的警告提示却让新手用户…...

FPGA实战:手把手教你用Vivado的MMCM IP核动态调整ADC采样时钟相位(附仿真避坑指南)

FPGA实战&#xff1a;Vivado MMCM动态相位调整的工程化实现与深度避坑指南 在高速数据采集系统中&#xff0c;ADC采样时钟相位的精确控制往往是决定信号完整性的关键因素。当FPGA工程师发现采样数据存在周期性抖动或眼图闭合时&#xff0c;动态调整时钟相位便成为优化系统性能的…...

小红书自动评论的‘伪需求’与真风险:聊聊RPA工具养号背后的封号逻辑与合规玩法

小红书自动化评论的合规边界&#xff1a;效率与账号安全的博弈术 凌晨三点&#xff0c;某MCN机构运营负责人李然被连续不断的手机提示音惊醒——团队管理的12个小红书达人账号同时收到平台封禁通知&#xff0c;而这一切都源于他们三天前部署的那套"高效互动系统"。这…...

Miri最佳实践清单:构建安全Rust代码的20条黄金法则

Miri最佳实践清单&#xff1a;构建安全Rust代码的20条黄金法则 【免费下载链接】miri An interpreter for Rusts mid-level intermediate representation 项目地址: https://gitcode.com/GitHub_Trending/mi/miri Miri是Rust的中级中间表示解释器&#xff0c;它能帮助开…...

06-AI 编程助手实战

OpenClaw + ACP:AI 编程助手实战 “让 AI 帮你写代码、调 Bug、做重构——这就是 ACP 的魔力。” 在软件开发领域,如何让 AI 真正成为程序员的得力助手,而非仅仅是「代码补全工具」?OpenClaw 给出的答案是 ACP(Agent Coding Protocol)。通过这一协议,OpenClaw 能够与业界…...

告别虚拟机!在Windows上用WSL2和NDK r27c交叉编译Android动态库(附CMake集成避坑指南)

在Windows上利用WSL2与NDK r27c高效构建Android动态库的完整指南 对于Android开发者而言&#xff0c;跨平台编译一直是个令人头疼的问题。传统虚拟机方案虽然功能完整&#xff0c;但资源占用高、启动慢&#xff0c;而纯Windows环境下的NDK工具链又常常遇到各种兼容性问题。本文…...

全能解析工具UniExtract2:多格式提取的效率革命

全能解析工具UniExtract2&#xff1a;多格式提取的效率革命 【免费下载链接】UniExtract2 Universal Extractor 2 is a tool to extract files from any type of archive or installer. 项目地址: https://gitcode.com/gh_mirrors/un/UniExtract2 在数字化信息处理领域&…...