zoukankan      html  css  js  c++  java
  • JS与小程序页面生命周期

    Page({
      /**
      * 页面的初始数据
      */
      data: {
      },
    
      /**
      * 生命周期函数--监听页面加载
      */
      onLoad: function (options) {
      },
    
      /**
      * 生命周期函数--监听页面初次渲染完成
      */
      onReady: function () {
      },
    
      /**
      * 生命周期函数--监听页面显示
      */
      onShow: function () {
      },
      
      /**
      * 生命周期函数--监听页面隐藏
      */
      onHide: function () {
      },
    
      /**
      * 生命周期函数--监听页面卸载
      */
      onUnload: function () {
      },
    
      /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
      onPullDownRefresh: function () {
      },
    
      /**
      * 页面上拉触底事件的处理函数
      */
      onReachBottom: function () {
      },
    
      /**
      * 用户点击右上角分享
      */
      onShareAppMessage: function () {
      }
    })

    如果是用小程序的开发工具新建的页面,默认情况下面,这个js文件中会有一些默认的代码。如上。我们看一下这些默认代码的结构。

    首先鼠标停留在Page上,会发现他是一个function。这个function接受一个参数,就是花括号里面的内容。就是一个js对象,这个js对象作为一个参数传递给Page这个函数。我们编写js代码都是在这个花括号内部编写的。
    我们首先看下里面的生命周期函数,首先什么是小程序的生命周期函数呢?首先呢,他是一个函数,作用就是用来描述一个页面的生命周期。比如一个人,有幼年,青年,中年,老年这些生命周期。那么这个函数也有他的一个生命周期。比如
    onLoad,监听页面加载,也可以理解为页面初始化的时候,他就会执行这样一个onLoad函数。
    onReady,生命周期函数--监听页面初次渲染完成。
    onShow,生命周期函数--监听页面显示,就是页面显示的时候会执行这个函数。
    onHide,监听页面隐藏,页面隐藏的时候会去执行。
    onUnload,监听页面卸载,页面卸载的时候会去执行。
    生命周期函数是一定有一个时间线的,比如人,有幼年,青年,中年,老年。页面也是有时间线的。我们执行这个js的时候,是以onload-onshow-onready的顺序执行的。一开始的时候onhide,onunload是不会执行的,要页面隐藏或卸载的时候才执行。
    除了这些,还有三个函数是什么呢,这三个并不属于生命周期函数,它们是小程序执行一些特定的操作的时候会触发的函数。
    onPullDownRefresh,监听用户下拉动作
    onReachBottom,页面上拉触底事件的处理函数
    onShareAppMessage,用户点击右上角分享的时候执行这个函数
    如果我们要写自己的js代码的时候,跟默认的函数一样的。在page里面可以自己定义各种各样的函数。
  • 相关阅读:
    flask 源码专题(七):threading.local和高级
    flask 源码专题(六):session处理机制
    flask 源码专题(五):SqlAlchemy 中操作数据库时session和scoped_session的区别
    flask 源码专题(四):wtforms Form实例化流程以及csrf验证
    flask 源码专题(三):请求上下文和应用上下文入栈与出栈
    python 追踪函数调用
    flask 源码专题(一):app.run()的背后
    flask 源码专题(二):请求上下文与全文上下文
    边框间距 | border-spacing (Miscellaneous Level 2)
    边框样式属性 | border-top-style (Backgrounds & Borders)
  • 原文地址:https://www.cnblogs.com/wzndkj/p/11143399.html
Copyright © 2011-2022 走看看