微信小程序学习–生命周期（2）

最新推荐文章于 2025-08-13 18:24:36 发布
原创 最新推荐文章于 2025-08-13 18:24:36 发布 · 159 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序 #生命周期

本文详细解析了小程序中Page和App的生命周期函数，包括onLoad、onReady、onShow、onHide、onUnload等Page级函数，以及onLaunch、onShow、onHide、onError等App级函数。阐述了它们的触发时机及执行顺序，帮助开发者理解小程序运行流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Page生命周期

在index.js文件添加

Page() 接受一个object参数，其指定页面的初始数据、生命周期函数、时间处理函数等。

生命周期函数：

onLoad 监听页面加载 ===》 调用列表数据方法

onReady 监听页面初次渲染完成 ===》可以在这个时候 wx.setNavigationBarTitle(Object object) 动态设置当前页面的标题

onShow 监听页面显示

onHide 监听页面隐藏

onUnload 监听页面卸载 ===》 点击返回时触发

onPullDownRefresh 监听用户下拉动作

onReachBottom 页面上拉触底事件函数

onShareAppMessage 用户点击右上角分享

App生命周期

在app.js文件中添加

onLaunch 生命周期函数 --监听小程序初始化 ==》 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow 生命周期函数 --监听小程序显示 ==》 当小程序启动，或从后台进入前台显示，会触发 onShow

onHide 生命周期函数 --监听小程序初隐藏 ==》 进入后台

onError 错误监听函数

运行：

（1）程序启动时

首先执行的是App的生命周期函数

接着再执行Page的生命周期函数

（2）当点击“后台”时，会触发以下函数（即程序被转到后台时）

首先执行Page的onHide生命周期函数

再执行App的onHide生命周期函数

（3）当点击“前台”时（即程序返回前台时）

首先执行Page的onShow生命周期函数

再执行App的onShow生命周期函数

微信小程序的生命周期实例演示-——-微信小程序教程系列（2）(1)
2401_84123026的博客
04-20 704
)运行：（1）当启动home页面时，会触发以下3个函数第一执行onLoad函数——在文档加载的时候会执行第二执行onShow函数——在页面显示的时候会执行第三执行onReady函数——在页面初次渲染完成时执行（2）在Home页面时，当点击左上角“返回”，会触发以下函数onUnload函数——在页面销毁时执行Page Onload 函数（3）在Home页面时，当点击“后台”时，会触发以下函数（即程序被转到后台时）onHide函数——在页面隐藏时会执行。
微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）
xcbyaya的博客
04-06 939
示例：演示App的生命周期函数app.js：App({console.log(“App生命周期函数——onLaunch函数”);},console.log(“App生命周期函数——onShow函数”);},console.log(“App生命周期函数——onHide函数”);},console.log(“App生命周期函数——onError函数”);})运行：（1）程序启动时，会触发以下2个函数。
微信小程序学习历程(一)
Running_FE的博客
07-04 1781
https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=768795281&docid=0000a26e1aca6012e896a517556c01&devtools=1 微信小程序官网： https://developers.weixin.qq.com/m...
微信小程序之生命周期
nicexibeidage的博客
03-01 872
本篇文章介绍小程序的生命周期，由于小程序分为应用和页面两个部分，所以小程序的生命周期就涉及到三个部分，分别是：应用的生命周期页面的生命周期应用的生命周期对页面生命周期的影响一、应用的生命周期App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。object参数说明：属性类型描述触发时机onLaunchFunction生命周期函数--监听小程序初始化当小程序...
小程序生命周期
齐枫的博客
06-12 485
应用的生命周期 App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。 object参数说明： 属性 类型 描述 触发时机 onLaunch Function 生命周期函数–监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onShow Function 生...
微信小程序如何重写Page方法？以及重写Page方法给开发者带来的好处
Jack, what else can you do besides holding your little darling?
12-01 1636
微信小程序如何重写Page方法？以及重写Page方法给开发者带来的好处
【小程序】wepy：官方demo报错 pages/index.js 出现脚本错误或者未正确调用 Page()
吴纯玲的博客
07-09 4793
直接wepy init生成的wepy项目，在微信开发者工具中报下面的错   百度网上的解决方法 1.Page({}) 第一种说法，js文件没有Page({})方法调用，所以报错，要在对应的js文件添加上述语句。实则官方demo生成的js文件，有Page()方法调用，此说法不成立 2.微信开发者工具版本问题 第二种说法，微信开发者工具版本低，更新至最新版本即可解决。实则我用的就是最新...
前端学习笔记-微信小程序学习笔记
01-09
前端学习笔记-微信小程序学习笔记 微信小程序是一种基于微信平台的轻量级应用程序，提供了前端开发的解决方案。本笔记总结了微信小程序的基本组成部分、JSON 配置文件的作用、WXML 模板语法、WXSS 样式语言、JS ...
微信小程序-微信小程序–剪刀石头布小游戏
08-06
在这个“微信小程序-微信小程序–剪刀石头布小游戏”项目中，开发者构建了一个基于微信小程序平台的简单互动游戏，让用户在微信环境下体验经典的剪刀石头布玩法。 该项目的核心技术主要包括以下几个方面： 1. **...
微信小程序的生命周期实例演示-——-微信小程序教程系列（2）
2301_82242204的博客
04-01 1168
,// 生命周期函数–监听页面初次渲染完成console.log(“Page onReady函数”);},// 生命周期函数–监听页面显示console.log(“Page onShow函数”);},// 生命周期函数–监听页面隐藏console.log(“Page onHide函数”);})运行：（1）当启动home页面时，会触发以下3个函数第一执行onLoad函数——在文档加载的时候会执行第二执行onShow函数——在页面显示的时候会执行。
微信小程序学习
weixin_30905981的博客
08-26 1629
最近工作正好有闲暇时间，根据公司安排先前期学习调研一下“微信小程序”，以供后期解决相关的运营需求，而本篇文章就是我对此次学习的一次总结。 什么是小程序 ？ 如何全面具体的学习？ 注册与新建小程序 认识开发工具 目录结构与代码构成 JSON 配置文件 WXML 模版文件 WXSS 样式文件 JS 脚本文件 小程序的执行流程 小程序知识体系导图 小程序开发的重要说明 WXSS 模版语法 ...
小程序05 深入小程序框架
weixin_30716141的博客
09-18 417
MINA框架 概述 之前介绍的WXML、WXSS、JS、WXS都是运行在MINA框架上。 MINA的核心是一个响应的数据绑定系统。整个系统分为两块：视图层(View) 和 逻辑层(App Service)。MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。 框架实现 框架原理图如下： View视图层：wxml...
教你理解微信小程序的生命周期和运行原理
11-06 1万+
写微信小程序，他的生命周期不能不知道，不知道小程序就会出现各种bug而无法解决。小助君公众号带你学习小程序的生命周期和运行原理。小程序由两大线程组成：负责界面的线程（view thread）和服务线程（appservice thread），各司其职由互相配合小程序的生命周期借鉴了Android的生命周期，如果你了解过Android的APP开发，那么理解小程序的就会很简单。界面线程有四大状态： 1.
微信小程序把玩（五）页面生命周期
热门推荐
FUCK
09-24 4万+
这里只要熟悉页面的基本生命周期即可，业务在指定生命周期函数内书写。以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事，具体怎么掌握只有慢慢尝试和摸索 代码处理:这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改！下面贴下代码注释也比较详细index.wxml<!--index.
【整理】小程序页面Page构造页面-初始数据、生命周期回调、事件处理函数
ssdate的专栏
06-29 1221
使用 Page 构造器注册页面 简单的页面可以使用Page()进行构造。 //index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 //页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 }, onShow: function() { // 页面出现在前台时执行 ..
智慧校园|智慧校园管理小程序|基于微信小程序的智慧校园管理系统设计与实现(源码+数据库+文档)
weixin_66413741的博客
08-12 535
采用智慧校园管理系统可以有效管理，使信息管理能够更加科学和规范。智慧校园管理系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理智慧校园管理系统信息，查看智慧校园管理系统信息，管理智慧校园管理系统。 总之，智慧校园管理系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
微信小程序中实现表单自动填充功能的方法
learning_tom的博客
08-09 369
用户注册/登录表单：记住用户名、邮箱等订单提交表单：保存收货人信息、地址等个人资料表单：保存用户常用信息搜索表单：保存历史搜索记录。
uniapp微信小程序-登录页面验证码的实现(springboot+vue前后端分离)EasyCaptcha验证码 超详细
m0_71546806的博客
08-13 934
本文介绍了一个基于Vue2+SpringBoot的登录系统验证码实现方案。前端使用Vue2+ElementUI+Axios，封装了RedisCaptcha验证码组件，支持点击刷新、过期提示等功能；后端采用SpringBoot+Redis+EasyCaptcha，通过Redis存储验证码并设置5分钟有效期。系统实现了验证码生成、验证和刷新功能，同时提供了完善的错误处理和状态管理。该方案具有组件可复用、分布式共享、安全性高等特点，适用于登录、注册等需要验证码验证的场景。
腾讯位置商业授权微信小程序关键词输入提示
最新发布
qcloud0755_的博客
08-13 680
腾讯位置商业授权微信小程序关键词输入提示
微信小程序App与页面生命周期详解
微信小程序的生命周期管理和页面生命周期是开发过程中至关重要的部分，主要关注于`App.js`文件中的核心函数及其触发时机。下面对这两个关键知识点进行详细解析。 **1. 小程序的生命周期——App.js** 在微信小程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值