目录
- 小程序
- 原生JS
- Jquery
小程序
- 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()加载顺序内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！
您可能感兴趣的文章:
- 各浏览器对link标签onload/onreadystatechange事件支持的差异分析
- 仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
