zoukankan      html  css  js  c++  java
  • 小程序的生命周期函数

    app.js中的生命周期

    app.js是小程序全局的app对象

    //app.js
     
    App({
     
      /*
        当小程序初始话完成,会触发onlaunch(全局只触发一次),onlaunch在手机后台到前台切换是不会执行的。如果
        要要他再次执行,除非在手机中关闭(关闭不是切换到后台,而是直接删除小程序的后台运行)小程序,然后重新打开,才能执行,
      */
      onLaunch: function () {
     
        console.log("小程序的初始话:onlaunch")
      },
      /**
       * 当小程序启动,或者是重后台进入到前台的时候,会执行onshow,
       * 那我们可以通过这个option中的scene值来判断不同进入场景
       */
      onShow:function(option){
        console.log("小程序onshow,:onShow",option)
      },
      /*小程序重前台进入到后台的时候,会触发:onHide*/
      onHide:function(){
        console.log("小程序重前台进入到后台的时候,会触发:onHide")
     
      },
      /**可以在全局使用 */
      globalData: {
        userInfo: null
      }
    })
    

    执行App.js生命周期的时候以及在整个App对象我们可以做什么?

    1、在注册app的时候,我们可以通过onshow来判断用户进入小程序的场景(option里面的scene判断场景值)

    2、我们可以在生命周期函数中,做一些数据请求。

    3、我们可以在app中设置一个全局对象,让所有的页面都可以使用。(globalData里面定义的对象,是全局对象,可以在任何页面使用。)

    页面的生命周期函数

    除了针对整个小程序的app.js的全局生命周期函数之外,每个页面都有专属的页面生命周期函数。例如:index.js

    // pages/test/test.js
     
     
    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        msg:'own is sb',
        name:"tank",
        num :12,
        num1:1,
        flag:false,
        name_list:[{"name":"jason",love:"piao"},{name:"tank",love:"own"},{name:"egon",love:"洗脚"}],
        tank:{name:"tank",love:"own"},
        color:"blue"
      },
     
      /**
       * 生命周期函数--监听页面加载,页面如果不关闭,这个onload只执行一次
       */
      onLoad: function (options) {
          console.log("onLoad")
      },
     
       /**
       * 生命周期函数--监听页面显示,页面从底下切到上面的时候也会执行
       */
      onShow: function () {
        console.log("onShow")
      },
     
     
     
     
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        console.log("onHide")
      },
     
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        console.log("onHide")
      },
     
       /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
     
      },
     
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
          console.log("onPullDownRefresh")
      },
     
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        console.log("onReachBottom")
      },
    })
     
    // pages/test/test.js
    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        msg:'own is sb',
      },
     
      /**
       * 生命周期函数--监听页面加载,页面如果不关闭,这个onload只执行一次
       */
      onLoad: function (options) {
          console.log("onLoad")
      },
     
       /**
       * 生命周期函数--监听页面显示,页面从底下切到上面的时候也会执行
       */
      onShow: function () {
        console.log("onShow")
      },
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        console.log("onHide")
      },
     
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        console.log("onHide")
      },
     
       /**
       * 生命周期函数--监听页面初次渲染完成,这个真实dom要渲染的时候,就会执行
       */
      onReady: function () {
     
      },
     
      /**
       * 页面相关事件处理函数--监听用户下拉动作,如果你要监听这个动作,然后触发底下的函数的话,你必须"enablePullDownRefresh" :true配置成可以下拉刷新。
       */
      onPullDownRefresh: function () {
          console.log("onPullDownRefresh")
      },
     
      /**
       * 页面上拉触底事件的处理函数,如果要成功触发这个事件,必须页面显示不够一页显示
       */
      onReachBottom: function () {
        console.log("onReachBottom")
      },
     
    })
    

    onLoad函数:在页面第一次加载的时候触发,或者是在页面被摧毁后,重新加载该页面的时候也执行。(页面从无到有的时候触发)

    onShow函数:如果原来的页面没有被销毁,从其他页面再次进入原来的页面,就会执行onShow。(从新的页面返回原来的页面,或者从后台进入页面)

    onHide函数:当原来的页面被新的页面覆盖导致原页面被隐藏的时候触发。(从原来的页面到新的页面,或者从当前页面到后台)

    onUnload函数:在页面被摧毁的时候执行

    onPullDownRefresh函数:用户下拉刷新的时候触发,用于刷新数据的功能

    onReachBottom函数:页面上拉的时候触发,用于页面上拉获取底部更多信息的功能

    onReady函数:在onload和onshow之后触发,由页面通知触发。

    在页面的page对象中可以做哪些事情?

    1、在生命周期函数中,向服务器请求数据

    2、在data中初始化数据,给wxml使用

    3、监听wxml事件,绑定对应的事件

    4、监听页面的上拉,下拉等

  • 相关阅读:
    vue:自定义指令
    vue 声明周期
    组件之间的通信
    vue动态组件keepalive
    vuecli的使用
    数据结构线性表(C#) 天高地厚
    HOOK钩子函数 天高地厚
    OSI模型 天高地厚
    HTTP 天高地厚
    说说JSONP 天高地厚
  • 原文地址:https://www.cnblogs.com/cnhyk/p/12572459.html
Copyright © 2011-2022 走看看