小程序生命周期分为应用生命周期和页面生命周期

1、Onload:页面加载时触发,一般在onLoad中发送异步请求来初始化页面数据。

2、onShow:页面显示时触发

3、onReady:页面初次渲染完成时触发。

4、onHide:是页面隐藏时触发,注意不是应用隐藏,切后台时,页面就会隐藏。即整个小程序隐藏时,页面也就隐藏了。另外,在当前页面跳转的时候也相当于当前页面隐藏。

5、onUpload:页面卸载(关闭)时触发,当open-type为redirect,reLaunch,navigateBack时都是关闭当前页面,也即卸载当前页面。

6、onPullDownRefresh:监听用户的下拉动作,当在app.json中配置了允许下拉刷新,在页面中往下拉动就会有下拉刷新的效果。还可以设置下拉刷新时的背景颜色。

下拉刷新时往往需要对页面数据就行初始化,重新发请求来拿数据。

7、onReachBottom:页面上拉触底时才会触发。 如果页面高度不够,就不会发生滚动,也就没有页面上拉触底。故需要让页面出现上下滚动才行。

如何才能实现页面出现上下滚动呢?加一堆view标签就可以了。输入view{$}*100,就会出现100个标签。

在onReachBottom中做上拉加载下一页数据的操作

8、onShareAPPMessage:用户点击右上角转发的时候才会触发,点击右上角的三个点就会弹出转发按钮。点击转发按钮后,由于应用和页面都被隐藏了,所以打印效果如下。

9、onPageScroll:表示页面滚动就可以触发,

10、onResize:页面尺寸改变时触发。由于手机屏幕是固定的,这种情况很少发生,但在小程序发生横屏和竖屏切换时会触发。使小程序中的页面支持屏幕旋转的方法是:在app.json的window段中设置“pageOrientation”:“auto”,这样所有页面都可以发生屏幕旋转,或在页面json文件中配置“pageOrientation”:“auto”,这样只有当前页面发生屏幕旋转。

11、onTabItemTap:当前是标签页(顶部或底部有tabBar的页面),再点击自己的tab item时才会触发。如当前页是标签页demo4,在tabBar中点击demo4时才会触发。而点击其他的Tab item则不会触发。

先使当前页面变成tabBar页面,即在app.json的tabBar中在新增一项

微信小程序:页面生命周期的更多相关文章

  1. 微信小程序之生命周期(三)

    [未经作者本人同意,请勿以任何形式转载] 上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的 ...

  2. [转] 微信小程序之生命周期

    本篇文章介绍小程序的生命周期,由于小程序分为应用和页面两个部分,所以小程序的生命周期就涉及到三个部分,分别是: 应用的生命周期 页面的生命周期 应用的生命周期对页面生命周期的影响 一.应用的生命周期 ...

  3. 教你理解微信小程序的生命周期和运行原理

    转自:http://blog.csdn.net/tsr106/article/details/53052879  写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君 ...

  4. 理解微信小程序的生命周期和运行原理

    写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...

  5. 微信小程序的生命周期和APP对象的使用

    1.生命周期和APP对象的使用: //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSy ...

  6. 微信小程序-APP生命周期与运行机制

    QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...

  7. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  8. 微信小程序-Page生命周期

    QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来 ...

  9. 对微信小程序的生命周期进行扩展 – Typescript 篇

    最近利用业余时间倒腾了一个微信小程序,主要目的是横向比较一些业界小程序平台的架构和做法.因为有在其他平台长期的开发经验,对于小程序的一些机制做了一些辩证的思考.例如,小程序的页面,其实不是一个页面,而 ...

  10. 微信小程序之生命周期

    1. 整个小程序生命周期 App({}) //app.js App({ onLaunch: function (options) { // 小程序初始化完成时(全局只触发一次) // 程序销毁(过一段 ...

随机推荐

  1. VSCode-Prettier和ESLint如何和睦共处?

    1 在VSCode中单独使用Prettier保存代码自动格式化的配置方法 1.1 为什么要使用Prettier? 手动调整代码格式,不仅低效,而且在团队协作开发中,无法保证代码风格统一,所以需要引入自 ...

  2. LSTM机器学习生成音乐

    目录 LSTM机器学习生成音乐 数据集介绍 将mid转成note数组 将note数组转成mid文件 获取数据集并将其保存 将note进行编号 构建数据集 截取数据 进行one-hot编码 构建模型 训 ...

  3. vue后台管理系统遇到的注意事项以及总结

    地址栏加#号问题:Vue-router 中有hash模式和history模式,vue的路由默认是hash模式,一般开发的单页应用的URL都会带有#号的hash模式第一步在router/index.js ...

  4. Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task(枚举/最大连续子序列)

    题目链接:https://codeforces.com/contest/1359/problem/D 题意 有一个大小为 $n$ 的数组,可以选取一段连续区间去掉其中的最大值求和,问求和的最大值为多少 ...

  5. zoj3545Rescue the Rabbit (AC自动机+状压dp+滚动数组)

    Time Limit: 10 Seconds      Memory Limit: 65536 KB Dr. X is a biologist, who likes rabbits very much ...

  6. nginx 80端口跳转到443

    nginx配置文件80配置中增加 rewrite ^ https://$http_host$request_uri? permanent; 如图: https://blog.csdn.net/jian ...

  7. requests -- Python

    使用requests方法后,会返回一个response对象,其存储了服务器响应的内容:如下r表示get请求后的响应对象r = requests.get('http://hz.58.com/sale.s ...

  8. Leetcode(1)-两数之和

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], target ...

  9. docker-compose -----单机多容器管理

    Compose是用于定义和运行多容器Docker应用程序的工具.通过Compose,您可以使用YAML文件来配置应用程序的服务.然后,使用一个命令,就可以从配置中创建并启动所有服务. Docker-C ...

  10. RT-Thread学习笔记2-互斥量与信号量

    目录 1. 临界区保护 1.1 方法一:关闭系统调度保护临界区 1.2 方法二:互斥特性保护临界区 2. 信号量 2.1 信号量的定义 2.2 信号量的操作 3. 生产者.消费者问题 4. 互斥量 4 ...