生命周期

我们都知道生命周期是一组名称固定且会自动被调用执行的函数，在开发小程序时也有专门的的生命周期函数分别有3种类型。

应用级别
页面级别
组件级别

2.1 应用级别

首先要知道应用级别的生命周期函数定义在 app.js 当中，且生命周期函数的名称及执行情况如下表所示：

生命周期	必填	说明
onLaunch	否	监听小程序初始化，全局只会执行 1 次
onShow	否	监听小程序启动或切前台
onHide	否	监听小程序切后台

2.1.1 基本语法

通过代码演示用法：

App({
  onLaunch() {
    console.log('小程序启动了，只会执行 1 次！')
  },
  onShow() {
    console.log('小程序处于前台状态！')
  },
  onHide() {
    console.log('小程序处于后台状态！')
  },
})

提示:

用户在点击右上角的胶囊关闭小程序时，小程序并示被销毁，只是将小程序置于后台运行了，因此小 onLaunch 并不会重复执行。当小程序执行停留在后台约5分钟后小程序会自动被销毁，再次打开小程序时 onLaunch 会再次被执行。

使用场景

通过应用级别的生命周期可以进行一些全局性的设置，如检测用户的登录状态（后期项目中会用到）、获取小程序的场景值等。

2.1.2 场景值

所谓的场景描述的是用户打开小程序的方式，如扫码、搜索、分享等，并且每个场景都对应了一个数值，即场景值，根据这个场景值来判断用户打开小程序的方式，进而分析用户的行为，常见的场景值如下表所示：

场景值 ID	说明
1001	发现栏小程序主入口
1011	扫描二维码
1007	单人聊天会话中的小程序消息卡片

获取小程序的声景值只能在全局生周期函数 onLaunch、onShow 中获取，代码如下所示

App({
  onLaunch(params) {
    // 1001 发现栏小程序主入口
    // 1011 扫描二维码
    // 单人聊天会话中的小程序消息卡片
    console.log(params.scene)
  },
  onShow(params) {
    // 也可以获取场景值ID
    console.log(params.scene)
  },
})

2.2 页面级别

页面级别的生命周期函数写在页面对应的页面 .js 当中：

生命周期	必填	说明
onLoad	否	监听页面加载，只会执行 1 次
onShow	否	监听页面显示
onReady	否	监听页面初次渲染完成，只会执行 1 次
onHide	否	监听页面隐藏
onUnload	否	监听页面卸载

2.2.1 基本语法

以首页的 .js 为例演示用法：

Page({
  // ...省略前面小节的代码
  onShow() {
    // 其次执行
    console.log('首页处于显示状态...')
  },

  onReady() {
    console.log('首页初次渲染完成了...')
  },

  onLoad() {
    // 最先执行
    console.log('首页面加载完毕...')
  },

  onHide() {
    console.log('首页处于隐藏状态...')
  },

  onUnload() {
    console.log('首页面即将卸载...')
  }
})

通过上述代码的演示大家要掌握页面生命周期的如下特点：

onLoad 和 onReady 只会执行 1 次
onShow 和 onHide 会不重复执行
普通链接跳转及切换 Tab 页面不会卸载，页面处理隐藏的状态

2.3 组件级别

组件级的生命周期函数，是通过 lifetimes 来定义，主要的生命周期函数有：

created 组件实例刚刚被创建好时，created 生命周期被触发，该生命周期中无法调用 setData，一般为组件添加一些自定义属性字段。
attached 在组件完全初始化完毕、进入页面节点树后，attached 生命周期被触发。


  // 组件生命周期
  lifetimes: {
    created() {
      // this.setData({message: '此时不能调用 setData'})
      // 为当前组件实例自定义属性 author
      this.author = 'itcast';
    },
    attached() {
      // 没有什么限制了，可以执行任意的操作
      this.setData({ message: '组件进入到页面节点了...' });
    },
  },
});

小程序生命周期