小程序的生命周期和触发条件和应用场景

  • 全局生命周期

    • onLaunch 小程序初始化完成时(全局只触发一次)
    • onShow 小程序启动,或从后台进入前台显示时触发
    • onHide 小程序从前台进入后台时触发
    • onError 小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息
  • 页面生命周期

    • onLoad 页面加载时触发,只触发一次
    • onShow 页面显示/切入前台时触发。
    • onHide 页面隐藏/切入后台时触发(点击关闭按钮)
    • onReady 页面初次渲染完成时触发。只触发一次
    • onUnload 页面回退时触发(点击回退按钮)
  • 生命周期函数中一般用来干什么?

    • 调用后台接口获取数据
    • 启动定时任务/销毁定时任务
    • 获取小程序的场景值

关于小程序的场景值?

作用:
获取小程序的打开方式相关的数据,用于给实际的运营提供参考数据

在app.js中获取onShow中的场景值

代码:

  onShow: function (param) {
    // 获取小程序的场景值
    console.log(param.scene)
    // throw new Error('出错了')
    console.log('小程序启动')

  },

小程序的生命周期和触发条件和应用场景_第1张图片

// pages/my/my.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

page的相关参数说明:

属性 作用
data 页面初始数据,和vue的data是一样的,和vue不同的它是个对象
onLoad 生命周期函数–监听页面加载,类型为Function
onReady 生命周期函数–监听页面初次渲染完成
onShow 生命周期函数–监听页面显示
onHide 生命周期函数–监听页面隐藏
onUnload 生命周期函数–监听页面卸载
onPullDownRefresh 页面相关事件处理函数–监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数
onTabItemTap 当前是 tab 页时,点击 tab 时触发
自由设置函数 开发者可以添加任意的函数或数据到 object 参数中,在页面中通过 this 可以访问调用

小程序的生命周期和触发条件和应用场景_第2张图片

视图层和逻辑层(应用层)是同时进行的,逻辑层会通过onLoad和onShow进行对应的初始创建,并且等待视图层的通知,然后等逻辑层接收数据后将数据发送给视图层,视图层接收数据后开始进行页面的初次渲染。

当页面渲染完成后,视图层通知逻辑层,逻辑层调用onReady进入活动状态(这里可以开始页面的交互)

然后每次的逻辑层对数据有进行修改都会通知视图层进行重新渲染,当页面进行切换进入后台的时候触发onHide,当当页面再次切换到前台的时候触发onShow,当调用返回或重定向页面销毁指令执行触发onUnload,页面完成销毁

你可能感兴趣的:(小程序)