返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序页面onload(),onready()加载顺序详解
  • 146
分享到

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

2024-04-02 19:04:59 146人浏览 八月长安
摘要

目录小程序原生jsJquery小程序 onLoad(Object query) 页面加载时触发。一个页面只会调用一次,可以在 onLoad的参数中获取打开当前页面路径中的参数。onS

小程序

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

--结束END--

本文标题: 小程序页面onload(),onready()加载顺序详解

本文链接: https://lsjlt.com/news/138666.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 小程序页面onload(),onready()加载顺序详解
    目录小程序原生JSJquery小程序 onLoad(Object query) 页面加载时触发。一个页面只会调用一次,可以在 onLoad的参数中获取打开当前页面路径中的参数。onS...
    99+
    2024-04-02
  • SpringBootbean查询加载顺序流程详解
    目录背景探索-源码进一步思考背景 SpringBoot bean 加载顺序如何查看,想看加载了哪些bean, 这些bean的加载顺序是什么? 实际加载顺序不受控制,但会有一些大的原则...
    99+
    2023-03-12
    SpringBoot bean加载顺序 SpringBoot加载bean
  • 小程序怎么让页面延时加载
    使用定时器延迟跳转,实现页面延时加载wx.showToast({title: "成功修改",icon: 'success',duration: 2000,})setTimeo...
    99+
    2024-04-02
  • 微信小程序如何重新加载页面
    微信小程序有提供一个下拉刷新的功能,操作步骤如下:打开小程序。点击右上角的“···”。会弹出一些功能信息,选择“刷新”即可。...
    99+
    2024-04-02
  • 小程序如何缩短页面加载时间
    小程序缩短页面加载时间的方法:减少页面中重复的HTTP请求数量,如网页中的图片、baiform、flash等元素都会发出HTTP请求,因此需要减少页面中非必要的元素。css样式的定义放置在文件头部。Javascript脚本放在文件末尾。压缩...
    99+
    2024-04-02
  • 微信小程序如何加载分包页面
    小程序分包加载实例{"pages": ["pages/index", "pages/shopcart"],"subpackages":&nb...
    99+
    2024-04-02
  • 微信小程序 h5页面跳转小程序(超详细讲解)
    h5跳转小程序 实战项目从无到完整的h5跳转小程序经验,跳转方式分为云函数跳转和开放性标签跳转。 开放性标签是针对微信里面浏览器使用的,而云函数跳转在外部以及微信里面都可以使用。 建议需要的同学先全部...
    99+
    2023-09-11
    微信小程序 小程序 微信 前端
  • JavaWeb中web.xml初始化加载顺序详解
    需求说明做项目时,为了省事,起初把初始化的配置都放在每个类中 static加载,初始化配置一多,就想把它给整理一下,这里使用servlet中的init方法初始化。web.xml说明首先了解下web.xml中元素的加载顺序: 启动web项目...
    99+
    2023-05-31
    web.xml 加载顺序 ava
  • 【微信小程序】认识小程序页面
    ✅作者简介:大家好我是hacker707,大家可以叫我hacker,新星计划第三季python赛道Top1🏆 📃个人主页:hacker707的csdn博客 ...
    99+
    2023-09-06
    微信小程序 javascript
  • 小程序js页面怎么加样式
    小程序js页面加样式的案例:在对应的.wxml文件中添加以下代码:<view >  <view class="cont" style="bac...
    99+
    2024-04-02
  • 微信小程序为什么启动页面加载很久
    微信小程序页面加载慢可以对页面图片进行处理,从而解决加载缓慢的问题。采用分布式,将图片上传到云端,图片地址存储到数据库,去云端获取图片访问链接,以提高页面加载速度。在后台图片进行质量处理,压缩图片大小,转换为webp格式。使用微信image...
    99+
    2024-04-02
  • 如何获取小程序页面小程序码
    获取小程序页面小程序码的方法:用电脑登录微信公众平台,进入小程序管理后台。点击导航栏中的“工具”选项菜单,再选“生成小程序码”功能。填入小程序APPID进行搜索,然后点下一步。填入页面地址后,点确定生成小程序码,保存生成的小程序码图片即可。...
    99+
    2024-04-02
  • 小程序页面传参数怎么加密
    小程序页面传参数加密的案例:封装了一个url.js工具类,代码:// 构建urlconst buildURL = (url, query = {}, isSeq...
    99+
    2024-04-02
  • 小程序web-view页面如何返回小程序
    小程序web-view页面返回小程序的方法:用navigateTo跳转可以返回,代码:// <script type="text/javascript" src="https...
    99+
    2024-04-02
  • 微信小程序实现本地分页加载
    本文实例为大家分享了微信小程序实现本地分页加载的具体代码,供大家参考,具体内容如下 先看看效果图: 下面附上代码:(这些图片的地址记得改成自己的) 1、js文件: // pages...
    99+
    2024-04-02
  • uniapp中全局页面挂载组件(小程序)
    uniapp中页面全局挂载组件 首先我说的方法不是全局引入注册使用的时候把标签放在页面中 所需库 vue-inset-loader 步骤: 1.首先需要把uniapp项目 初始化 npm init 下载所需库 npm i vue-inset...
    99+
    2023-08-17
    uni-app 小程序 javascript
  • Springboot常用注解及配置文件加载顺序详解
    Springboot常用注解及底层实现 1、@SpringBootApplication:这个注解标识了一个SpringBoot工程,她实际上是另外三个注解的组合,分别是: @Sp...
    99+
    2024-04-02
  • 【微服务】spring 控制bean加载顺序使用详解
    目录 一、前言 二、使用@order注解控制顺序 2.1 @order 注解使用示例 2.2 order注解顺序失效问题 2.2.1 @order失效问题解决办法 2.3 实现Ordered接口 三、使用@dependon注解控制顺序 四、...
    99+
    2023-09-30
    spring bean加载顺序 控制bean的加载顺序 如何控制bean的顺序
  • 微信小程序怎么在app.json添加页面
    微信小程序在app.json添加页面配置的方法:微信小程序中的每一个页面的“路径+页面名”都要写在app.json的pages中。并且按照顺序打开,排在第一的页面就是初始页面。例如:"pages":["page...
    99+
    2024-04-02
  • 小程序新加页面如何加入底部菜单
    首先,进入微信开发者工具,打开小程序项目文件,在项目文件中,查找到app.json文件,并打开;app.json文件打开后,在文件中添加以下代码即可将新的页面加入到底部菜单;"tabBar": {"c...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作