生命周期函数

简介 Introduction

• 也叫 life circle
• 指的是一个对象从创建 → 运行 → 销毁的整个过程
• 每个过程对应一个阶段；每个阶段都可以使用特定的函数来处理 - 生命周期函数
• 小程序、页面和组件都有自己的生命周期函数
• - 小程序 app 的启动 → 运行 → 关闭
• - 页面 page 的加载 → 渲染 → 卸载
• - 组件 component 的加载 → 渲染 → 卸载
• 小程序提供的生命周期函数按次序自动执行

小程序生命周期函数

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

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

页面生命周期函数

• 在各页面的逻辑文件中，除了初始数据、事件处理函数，还包括如下生命周期函数：
• onLoad()
• onShow()
• onReady()
• onHide()
• onUnload()
• 更多信息，请访问 Page

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

组件生命周期函数

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

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