生命周期函数

简介 Introduction

• 也叫 life circle
• 指的是一个对象从创建 → 运行 → 销毁的整个过程
• 每个过程对应一个阶段；每个阶段都可以使用特定的函数来处理 - 生命周期函数
• 小程序、页面和组件都有自己的生命周期函数

  小程序 app 的启动 → 运行 → 关闭

  页面 page 的加载 → 渲染 → 卸载

  组件 component 的加载 → 渲染 → 卸载

• 小程序提供的生命周期函数按次序自动执行

小程序生命周期函数 App

• 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等
• App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果
• 在 app.js 中，包括：

  onLaunch()

  onShow()

  onHide()

  onError()

App({
  globalData: {
    // 全局数据
    // 其他页面使用 const app = getApp()可以获取app所有的数据
  },
  onLaunch(){
    // 启动；只触发1次
    // 本地数据获取和更新
  },
  onShow(option){
    // 显示、恢复；可以多次触发
    // 进入前台运行
  },
  onHide(){
    // 隐藏、最小化；可以多次触发
    // 进入后台运行
  },
  onError(msg) {
    console.error(msg)
  }
})

页面生命周期函数 Page

• 在各页面的逻辑文件中，除了初始数据、事件处理函数，还包括如下生命周期函数：

  onLoad()

  onShow()

  onReady()

  onHide()

  onUnload()

Page({
  data:{},
  onLoad(option) {
    // 1
    // 页面加载时触发
    // 初始化页面数据
    // 获取页面传参
    // 1个页面只调用1次
    // 如果页面有数据更新，请使用 onShow
  },
  onShow() {
    // 2
    // 可以多次触发
    // 场景：返回时，需要更新的页面，如修改昵称后返回
  },
  onReady() {
    // 3
    // 页面初次渲染完毕后触发
    // 可以与视图层交互，如修改导航栏标题
  },
  onHide() {
    // 可以多次触发
  },
  onUnload() {
    // 触发1次
  }
})

• 页面在 data 中定义数据 products，初始值为空 []
• 页面首次加载时，如果全局数据有数据，就直接使用；如果没有，就从数据库中加载；无论如何，必须要给 products 赋值
• 返回页面时，继续使用之前的 products，无需再次赋值或重新加载数据

        data:{
          products: []
        }
      

• data 中的数据 products 无法直接访问 app 中的全局数据 globalData

data:{
  products: app.globalData.products // 错误
}

• 方案1：使用立即函数

data: {
  products: (function () {
    return app.globalData.products
  })()
}

• 方案2：在页面的 onLoad() 或 onShow() 中获取并赋值；推荐

onLoad(options) {
  if (app.globalData.products && app.globalData.products.length > 0) {
    this.setData({
      products: app.globalData.products
    })
  } else {
    this.loadData()
  }
}

组件生命周期函数

• 组件自身的一些函数：在特殊的时间点或遇到一些特殊的框架事件时被自动触发
• 在组件的逻辑文件中，主要包括
• created()：组件实例刚刚被创建好时
• attached()：在组件完全初始化完毕、进入页面节点树
• detached()：在组件离开页面节点树后
• 更多信息，请访问 组件生命周期

Component({
  lifetimes: {
    created: function () {},
    attached: function () {},
    detached: function() {}
  }
})