• 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里面可以自己定义各种各样的函数。
  • 相关阅读:
    AdminLTE 3.0发布了
    .NET Core ORM 类库Petapoco中对分页Page添加Order By对查询的影响
    【译】ASP.NET Core在 .NET Core 3.1 Preview 1中的更新
    物品编码中心所说的包装指示符
    Entity Framework Core生成的存储过程在MySQL中需要进行处理及PMC中的常用命令
    Asp.Net Core Mvc Razor之RazorPage
    基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理
    Qt的下载地址
    由于MicrosoftVisualStudio14.0DesignerShadowCache导致的一个异常问题
    Spring系列.事务管理原理简析
  • 原文地址:https://www.cnblogs.com/wzndkj/p/11143399.html
Copyright © 2020-2023  润新知