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

小程序

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(){})，简写(document).ready(function())，简写(function(){});

组件生命周期

 Component({properties:{innerText:{type:String}},data:{},methods:{},created:function(){// 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setDataconsole.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()加载顺序相关推荐

小程序的上拉加载功能
小程序页面上拉加载步骤首先,在需要实现的页面js文件中,创建一个获取请求数据的方法: getdata(bool){let _this = thiswx.showLoading({title: '加载 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序scroll-view上拉加载更多
微信小程序scroll-view上拉加载更多 1.wxml代码 <scroll-view class="scroll-view-container" scroll-ybind ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
微信小程序体验版数据加载不了，打开调试模式下才行（在微信开发者工具上也能加载数据）
记一次微信小程序体验版数据加载不了的解决过程(请求不到数据),供大家参考: 注:域名已经备案.https已经配置.ssl证书在1.2以上版本.小程序后台已经配置服务器域名注:域名已经备案.https ...
微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...

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

小程序

原生JS

Jquery

组件生命周期

小程序页面onload()，onready()加载顺序相关推荐

最新文章

热门文章