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

 更新时间:2022年02月10日 10:14:42   作者:幻想的小飞  
本文主要介绍了小程序页面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()加载顺序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现京东放大镜效果

    JavaScript实现京东放大镜效果

    这篇文章主要为大家详细介绍了JavaScript实现京东放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 几个有趣的Javascript Hack

    几个有趣的Javascript Hack

    在网上看到几个有意思的Javascript代码,和大家分享一下。直接将代码拷贝到IE中即可,注意代码为一样。不可分行
    2010-07-07
  • js实现列表向上无限滚动

    js实现列表向上无限滚动

    这篇文章主要为大家详细介绍了js实现列表向上无限滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript函数中的防抖与节流原生实现及第三方库的使用

    JavaScript函数中的防抖与节流原生实现及第三方库的使用

    当你频繁的触发用户界面时,会不停的触发事件处理函数,可能导致界面卡顿,浏览器奔溃,页面空白等情况,而解决这一问题的,正是函数节流与函数防抖,所以本文将给大家介绍一下JavaScript函数中的防抖与节流原生实现及第三方库的使用,需要的朋友可以参考下
    2023-10-10
  • uniapp中uni-popup的具体使用

    uniapp中uni-popup的具体使用

    本文主要介绍了uniapp中uni-popup的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • javascript  数组排序与对象排序的实例

    javascript 数组排序与对象排序的实例

    这篇文章主要介绍了javascript 数组排序与对象排序的实例的相关资料,需要的朋友可以参考下
    2017-07-07
  • 基于JS实现web端录音与播放功能

    基于JS实现web端录音与播放功能

    这篇文章主要介绍了纯js实现web端录音与播放功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 基于JavaScript实现验证码功能

    基于JavaScript实现验证码功能

    这篇文章主要介绍了基于JavaScript实现验证码功能的相关资料
    2017-04-04
  • JS实现的Unicode编码转换操作示例

    JS实现的Unicode编码转换操作示例

    这篇文章主要介绍了JS实现的Unicode编码转换操作,结合完整实例形式分析了javascript实现Unicode编码转换的具体操作技巧,需要的朋友可以参考下
    2017-04-04
  • 移动web开发之touch事件实例详解

    移动web开发之touch事件实例详解

    下面小编就为大家分享一篇移动web开发之touch事件实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01

最新评论