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

目录
  • 小程序
  • 原生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()加载顺序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 仅IE9/10同时支持script元素的onload和onreadystatechange事件分析

    如下 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>IE9/10同时支持script元素的onload和onreadystatechange事件</title> <script src="http://code.jquery.com/jquery.min.js" onload="ale

  • 各浏览器对link标签onload/onreadystatechange事件支持的差异分析

    1,onload事件 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny

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

    目录 小程序 原生JS Jquery 小程序 onLoad(Object query) 页面加载时触发.一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数. onShow() 页面显示/切入前台时触发. onReady() 页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互. 所以加载顺序是先加载onLoad,再是onShow,最后onReady 原生JS document.ready 表示文档结构加载完成(不包含图片等非文字媒

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • Springboot常用注解及配置文件加载顺序详解

    Springboot常用注解及底层实现 1.@SpringBootApplication:这个注解标识了一个SpringBoot工程,她实际上是另外三个注解的组合,分别是: @SpringBootConfiguration:源码可以看到,这个注解除了元注解外,实际就只有一个@Configuration,把该类变成一个配置类,表示启动类也是一个配置类: @EnableAutoConfiguration:是开启自动配置的功能,向Spring容器中导入了一个Selector,用来加载ClassPath

  • 关于JSP配置文件web.xml加载顺序详解

    一. 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<context-param>和<listener>两个结点. 2.紧急着,容创建一个ServletContext(servlet上下文),这个web项目的所有部分都将共享这个上下文. 3.容器将<context-param>转换为键值对,并交给servletContext. 4.容器创建<listener>中的类实例,创建监听器. 二. load-on-startup 元

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

    需求说明 做项目时,为了省事,起初把初始化的配置都放在每个类中 static加载,初始化配置一多,就想把它给整理一下,这里使用servlet中的init方法初始化. web.xml说明 首先了解下web.xml中元素的加载顺序: 启动web项目后,web容器首先回去找web.xml文件,读取这个文件 容器会创建一个 ServletContext ( servlet 上下文),整个 web 项目的所有部分都将共享这个上下文 容器将 转换为键值对,并交给 servletContext 容器创建 中的

  • 使用@Order控制配置类/AOP/方法/字段的加载顺序详解

    目录 @Order控制配置类/AOP/方法/字段的加载顺序 1.AOP加载顺序 2.配置类加载顺序 @Order使用与Aop多切面执行顺序 @Order控制配置类/AOP/方法/字段的加载顺序 1.AOP加载顺序     @Component     @Aspect     @Order(1)     public class Aspect1 {         ...         System.out.println("aop-1 加载了");     }     @Compon

  • 微信小程序页面滑动屏幕加载数据效果

    滑动屏幕加载数据是任何小程序中都会用到的功能,本文我就将这个功能整理给大家,希望对大家有意.我们先看看效果图: 创建目录 首先我们现在项目中创建资讯目录,以下是我自己创建的目录,大家可以根据自己的需求创建.如图所示: 创建lists.js文件 以下是lists.js代码 var app = getApp() Page({ data: { newsList: [], lastid: 0, toastHidden: true, confirmHidden: true, isfrist: 1, loa

  • 浅谈Java中父类与子类的加载顺序详解

    复制代码 代码如下: class Parent {    // 静态变量    public static String p_StaticField = "父类--静态变量";    // 变量(其实这用对象更好能体同这一点,如专门写一个类的实例)     //如果这个变量放在初始化块的后面,是会报错的,因为你根本没有被初始化    public String p_Field = "父类--变量";    // 静态初始化块    static {        S

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

  • 微信小程序实现触底加载与下拉刷新的示例代码

    目录 触底加载 loader函数思考 loader函数实现 触底加载动画 触底加载的优点 下拉刷新 最后 在最近做小程序的时候有这么一个很常见的需求,加载一个信息列表,要求需要触底加载和下拉刷新,我突然想起来掘金小册界面和这个需求很相似,接下来我给大家介绍一下我的实现方案. 触底加载 步骤如下: 封装一个loader函数 在监听页面加载的时候触发这个loader函数 在监听到触底的时候再次触发这个函数 onLoad: function (options) { this.loadBooks(thi

随机推荐