微信小程序> 小程序页面onload(),onready()加载顺序

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

浏览量:602 时间: 来源:幻想的小飞

小程序

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

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

原生JS

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

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

Jquery

(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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎