微信小程序中的生命周期与生命周期函数浅析介绍

2024-04-16 06:14:45

一、生命周期

概念

生命周期（Life Cycle）是指一个对象从创建-->运行-->销毁的整个阶段

小程序的生命周期

小程序启动，表示生命周期的开始
小程序关闭。表示生命周期的结束
中间小程序的整个运行过程就是小程序的生命周期

二、生命周期函数

概念

是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

作用

允许程序员在特定的时间点，执行某些特定的操作

分类

1）小程序应用生命周期函数

伴随着小程序的整个生命周期：启动-->运行-->销毁

需要在app.js文件中进行声明，示例代码如下：

App({
    //小程序初始化完成会执行onLaunch，全局只会触发一次，用于页面初始化相关工作
    onLaunch:function(options){ },
    //小程序启动时或者从后台进入前台显示时触发onShow
    onShow:function(options){ },
    //小程序从前台进入后台时触发onHide
    onHide:function(options){ }
})

2）小程序页面生命周期函数

伴随着小程序页面的整个生命周期：加载-->渲染-->销毁

需要在页面.js文件中进行声明，示例代码如下：

Page({
    onLoad:function(options){ },//监听页面的加载，只会调用一次
    onShow:function(options){ },//监听页面显示
    onReady:function(options){ },//监听页面初次渲染完成，只会调用一次
    onHide:function(options){ },//监听页面隐藏
    onUnload:function(options){ },//监听页面卸载，只会调用一次
})

3）小程序自定义组件的生命周期函数

分别是created、attached、detached函数

第一，当组件实例刚被创建完成，触发created函数

但此时还不能调用setData函数
在这时间点，只用于给组件的this添加一些自定义的属性字段

第二，当组件完全初始化完毕进入页面节点树，触发attached函数

此时，this.data已经被初始化完毕
最为关键的生命周期，可以进行大多数初始化的工作，例如发送网络请求获取页面的初始数据

第三，当组件离开页面节点树后，触发detached函数

退出一个页面时，会触发页面内每个自定义组件的detached函数
此时适合做一些清理性质的收尾工作

组件全部的生命周期函数如下：

4）定义组件的生命周期函数

在小程序组件中，组件的生命周期函数的定义有新旧两种方式

第一种，直接定义在Component构造器内与data节点平级的第一级参数中
第二种，可以在lifetimes字段内进行声明（推荐，其优先级最高，且专门放生命周期函数）

自定义组件.js文件

//定义组件生命周期函数的两种方式
Component({
     //推荐用法
     lifetimes:{
         attached(){ },
         detached(){ },
      }
     //旧的定义方式，与data节点平级
      attached(){ },
      detached(){ },
})

注：如果同时存在两种新旧定义方式，那么旧的定义方式将会被覆盖掉

三、总结

生命周期强调的是一个时间段，一个过程
生命周期函数强调的是某个时间点，是过程中的某个节点
注意区别不同类别的生命周期函数，不能搞混淆

到此这篇关于微信小程序中的生命周期与生命周期函数浅析介绍的文章就介绍到这了,更多相关小程序生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序生命周期详解

微信小程序之----生命周期在app.js的app()中注册程序在页面.js中的Page({})中注册页面. 执行效果:
微信小程序的生命周期的详解

今天记录一下微信小程序的app生命周期及各页面的生命周期. (一)小程序的生命周期在app.json中进行监听,三个方法 ①onLauch方法只在小程序启动时触发一次. ②onShow方法,在小程序启动时,及由后台切换至前台显示时触发. ③onHide方法,在小程序由前台显示切换至后台时触发. 可以通过 ↓ 这张图片,感受一下各生命周期. 比较有趣的地方是,小程序启动时会触发两次onShow,我不知道是为什么.希望了解的同学解释一下. (二)页面的生命周期 1.在index中我添加了两种方式跳
微信小程序App生命周期详解

微信小程序App生命周期: onLaunch--当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow --当小程序启动,或从后台进入前台显示,会触发 onShow onHide --当小程序从前台进入后台,会触发 onHide onError --当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 //app.js App({ /** *当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */ onLaunch: fun
微信小程序生命周期和页面的生命周期详细介绍

微信小程序生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS
微信小程序生命周期函数详解

微信小程序生命周期函数小程序中判断当前首页是从其他页面返回,还是由入口打开由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化解决方法:在小程序 data 数据中声明一个变量 isClose 默认为 true 用于判断是否为从入口打开,当点击跳转页面或者关闭小程序的时候,会触发 OnHide 函数在此函数中将判断 isClose is true 的时候即为关闭之后在打开,当跳转页面时首先将 isClose 设置为 false, 这样触发 OnHi
微信小程序生命周期详解

微信小程序生命周期通俗的讲,生命周期就是指一个对象的生老病死. 从软件的角度来看,生命周期指程序从创建.到开始.暂停.唤起.停止.卸载的过程. 下面从一下三个方面介绍微信小程序的生命周期: 应用生命周期页面生命周期应用生命周期影响页面生命周期 >>>应用生命周期用户首次打开小程序,触发 onLaunch(全局只触发一次). 小程序初始化完成后,触发onShow方法,监听小程序显示. 小程序从前台进入后台,触发 onHide方法. 小程序从后台进入前台显示,触发 onShow方法
微信小程序组件生命周期的踩坑记录

组件生命周期,通常是我们业务逻辑开始的地方. 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复. 组件 attached 生命周期执行次数按照通常的理解,除moved/show/hide等生命周期可能多次执行外, 严格意义上与组件加载相关的生命周期,如:created.attached.ready等,每个组件实例应该只执行一次.但是事实真的如此吗? 背景这个问题的发现,源于我们在小程序的报错日志中, 收到大量类似Cannot red
微信小程序页面生命周期详解

微信小程序页面生命周期介绍,具体如下页面生命周期函数 onLoad--监听页面加载 onReady--监听页面初次渲染完成 onShow--监听页面显示 onHide--监听页面隐藏 onUnload--监听页面卸载 Page({ /** * 页面的初始数据 */ data: { banner_url:data.bannerList(), open:false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log
微信小程序中target和currentTarget的区别小结

前言在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时 currentTarget和target都是组件的一些属性值集合,由"data-属性名"定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元素还是父元素,都是当前事件,应用e.currentTarget target:触发事件的源组件(事件注册/绑定所在组件) 举个例子: &
uniapp在微信小程序中使用ECharts的方法

今天使用uniapp集成Echarts,实现地图图表的展示可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv
微信小程序中实现车牌输入功能

目录前言背景大猜想找规律结构和样式组件实现参数键盘类型的判断获取输入内容组件传参组件使用测试解决键盘类型判断的bug 结束语组件的代码使用页面代码前言哈哈哈,上新文章啦.好久没有更新啦,今天乘着休息来总结下之前用的到自定义键盘来输入车辆号牌微信组件.下面是效果图,请欣赏: 背景近期做了一个和车有关的项目,有车肯定就有车牌,我们都知道车牌是有一定规律的,如果简单的给个输入框的话......这里省略一万字哈,从小我的编程老师告诉我不要相信任何用户输入的东西.嗯嗯!
微信小程序中的生命周期与生命周期函数浅析介绍

目录一.生命周期概念分类二.生命周期函数概念作用分类三.总结一.生命周期概念生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段小程序的生命周期小程序启动,表示生命周期的开始小程序关闭.表示生命周期的结束中间小程序的整个运行过程就是小程序的生命周期分类应用生命周期特指小程序从启动-->运行-->销毁的过程页面生命周期特指小程序中每个页面的加载-->渲染-->销毁的整个过程自定义组件生命周期组件实例被
150行代码带你实现微信小程序中的数据侦听

在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快
微信小程序中插入激励视频广告并获取收益(实例代码)

最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 . 激励式视频广告用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 "关闭广告" 按钮),将获得该小程序下发的奖励.广告触发场景与奖励内容均由流量主自定义. 新建广告位首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告. 插入广告
微信小程序中的onLoad详解及简单实例

微信小程序中的onLoad onLoad是一个生命周期函数,表示页面加载 onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数举个栗子~ 当我们在页面first的js脚本中有一个点击方法onTap 当点击时页面跳转到second页面,用?id = secondId的形式为second页面传递一个值(这里的secondId是一个已经获取过的值) onTap: function(){ wx.navigateTo({ url: "second?id=&qu
微信小程序中悬浮窗功能的实现代码

问题场景所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s
微信小程序中正确使用地图的方法实例

目录前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市总结前言今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方

微信小程序中的生命周期与生命周期函数浅析介绍

目录

一、生命周期

概念

分类

二、生命周期函数

概念

作用

分类

三、总结

相关推荐

随机推荐