我的编程空间,编程开发者的网络收藏夹
学习永远不晚

小程序页面onload(),onready()加载顺序详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

小程序页面onload(),onready()加载顺序详解

小程序

  • onLoad(Object query) 页面加载时触发。一个页面只会调用一次,可以在 onLoad
  • 的参数中获取打开当前页面路径中的参数。
  • onShow() 页面显示/切入前台时触发。
  • onReady() 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

所以加载顺序是先加载onLoad,再是onShow,最后onReady

原生JS

  • document.ready 表示文档结构加载完成(不包含图片等非文字媒体文件);ready如果定义多个,都会按渲染顺序执行。
  • window.onload 包含图片等在内的所有元素都加载完成。但是,onload不管定义多少个,只执行一个(最后一个)

所以加载顺序是先加载ready,后onload,正好和小程序相反

Jquery

( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) , 简 写 (document).ready(function(){}),简写(document).ready(function()),简写(function(){});组件生命周期

 Component({
        properties:{
            innerText:{
                type:String
            }
        },
        data:{

        },
        methods:{

        },
        created:function(){
            // 组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setData
            console.log('Component-1 >> created');
        },
        attached:function(){
            // 组件生命周期函数,在组件实例进入页面节点树时执行。
            console.log('Component-1 >> attached');
        },
        ready:function(){
            // 在组件布局完成后执行,此时可以获取节点信息
            console.log('Component-1 >> ready');
        },
        moved:function(){
            // 在组件实例被移动到节点树另一个位置时执行
            console.log('Component-1 >> moved');
        },
        detached:function(){
            // 在组件实例被从页面节点树移除时执行
            console.log('Component-1 >> detached');
        },
        lifetimes:{
            // 组件生命周期声明对象,将组件的生命周期收归到该字段进行声明,原有声明方式仍旧有效,如同时存在两种声明方式,则lifetimes字段内声明方式优先级最高
            created:function(){
                console.log('Component-1 lifetimes >> created');
            },
            attached:function(){
                console.log('Component-1 lifetimes >> attached');
            },
            ready:function(){
                console.log('Component-1 lifetimes >> ready');
            },
            moved:function(){
                console.log('Component-1 lifetimes >> moved');
            },
            detached:function(){
                console.log('Component-1 lifetimes >> detached');
            }
        },
        pageLifetimes:{
            // 组件所在页面的生命周期声明对象,目前仅支持页面的show和hide两个生命周期
            show:function(){
                console.log('Component-1 pageLifetimes >> Show');
            },
            hide:function(){
                console.log('Component-1 pageLifetimes >> Hide');
            }
        }

    })

可以看到组件中只执行了lifetimes中的生命周期函数,外层的生命周期函数并没有执行。而且可以看到先执行组件的created/attached函数,随后执行页面的onLoad/onShow,再执行组件的ready,最后执行页面的onReady,这是页面中引入组件时组件的生命周期函数执行顺序。

现行玩所有组件的created,再执行所有组件的attached,然后执行页面的onLoad和onShow,再执行所有组件的ready,最后执行页面的onReady。当页面被卸载时,先执行页面的onUnload,再执行组件的detached。页面不卸载,不会触发组件的detached

到此这篇关于小程序页面onload(),onready()加载顺序详解的文章就介绍到这了,更多相关小程序onload(),onready()加载顺序内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

小程序页面onload(),onready()加载顺序详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

SpringBootbean查询加载顺序流程详解

当你在项目启动时需要提前做一个业务的初始化工作时,或者你正在开发某个中间件需要完成自动装配时。你会声明自己的Configuration类,但是可能你面对的是好几个有互相依赖的Bean
2023-03-12

JavaWeb中web.xml初始化加载顺序详解

需求说明做项目时,为了省事,起初把初始化的配置都放在每个类中 static加载,初始化配置一多,就想把它给整理一下,这里使用servlet中的init方法初始化。web.xml说明首先了解下web.xml中元素的加载顺序: 启动web项目
2023-05-31

uniapp中全局页面挂载组件(小程序)

uniapp中页面全局挂载组件 首先我说的方法不是全局引入注册使用的时候把标签放在页面中 所需库 vue-inset-loader 步骤: 1.首先需要把uniapp项目 初始化 npm init 2.下载所需库 npm i vue-ins
2023-08-17

微信小程序使用onreachBottom实现页面触底加载及分页效果

小程序还没有使用pc端的那种分页格式,下面这篇文章主要给大家介绍了关于微信小程序使用onreachBottom实现页面触底加载及分页效果的相关资料,需要的朋友可以参考下
2022-11-13

编程热搜

目录