您的位置:

uniapp生命周期详解

一、创建阶段

在uniapp中,创建阶段的生命周期函数有两个,分别是onLaunch和onLoad。其中onLaunch只在小程序初始化时触发一次,而onLoad在每次页面加载时都会触发。

1、onLaunch函数:在小程序初始化完成时,会触发onLaunch函数。这个函数一般用于全局的数据初始化和逻辑处理。

// 全局变量的定义和初始化

// 需要在onLaunch里边定义和初始化

App({

  globalData: {

    userInfo: null

  }

})

2、onLoad函数:在小程序页面加载时,会触发onLoad函数,可以在这个函数中进行特定页面的数据初始化和逻辑处理。

Page({

  data: {

    motto: 'Hello World'

  },

  onLoad: function (options) {

    // 页面初始化 options为页面跳转所带来的参数

    console.log(options)

  }

})

二、渲染阶段

在uniapp中,渲染阶段的生命周期函数只有一个,就是onReady。这个函数在页面渲染完成时触发。

Page({

  onReady: function () {

    // 页面渲染完成

  }

})

在onReady函数中,可以进行一些DOM操作。

三、更新阶段

在uniapp中,更新阶段的生命周期函数有两个,分别是onShow和onHide。onShow函数在页面显示时触发,onHide函数在页面隐藏时触发。

1、onShow函数:在页面显示时,会触发onShow函数,可以在这个函数中进行页面数据的更新和逻辑处理。

Page({

  onShow: function () {

    // 页面显示

  }

})

2、onHide函数:在页面隐藏时,会触发onHide函数,可以在这个函数中进行页面数据的保存和清除。

Page({

  onHide: function () {

    // 页面隐藏

  }

})

四、销毁阶段

在uniapp中,销毁阶段的生命周期函数只有一个,就是onUnload。这个函数在页面被销毁时触发。

Page({

  onUnload: function () {

    // 页面卸载

  }

})

五、其他生命周期函数

除了上面提到的五个生命周期函数,uniapp还有其他的一些生命周期函数。

1、onShareAppMessage:在页面转发时触发。

Page({

  onShareAppMessage: function () {

    return {

      title: '自定义转发标题',

      path: '/page/user?id=123'

    }

  }

})

2、onPullDownRefresh:在下拉刷新时触发。

Page({

  onPullDownRefresh: function () {

    console.log('下拉刷新')

  }

})

3、onReachBottom:在上拉触底时触发。

Page({

  onReachBottom: function () {

    console.log('上拉触底')

  }

})

4、onPageScroll:在页面滚动时触发。

Page({

  onPageScroll: function (e) {

    console.log(e.scrollTop)

  }

})

5、onResize:在页面尺寸改变时触发。

Page({

  onResize: function (size) {

    console.log(size.windowWidth)

    console.log(size.windowHeight)

  }

})

6、onTabItemTap:在tab栏被点击时触发。

Page({

  onTabItemTap(item) {

    console.log(item.index)

    console.log(item.pagePath)

    console.log(item.text)

  }

})

总结

通过本文的介绍,我们了解了uniapp的生命周期函数,以及每个生命周期函数的作用。在编写uniapp应用时,生命周期函数能够让我们在特定的时机进行特定的处理,使应用更加健壮和高效。