「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

uniapp生命周期函数(仅写常用的生命周期函数, 不常用的就不写了, 如果有需求可以去官网查看)

在uniapp中,生命周期函数分为应用生命周期函数、页面生命周期函数和组件生命周期函数.

一.应用生命周期函数

应用生命周期函数只能在App.vue中监听有效,在其他页监听无效

1. onLaunch: 当uni-app初始化完成时触发(全局只触发一次);
2. onShow: 当uni-app启动, 或从后台进入前台显示(例如小程序中, 用户分享页面再进来就会触发一次onShow);
3. onHide: 当uni-app从前台进入后台;
4. onError: 当uni-app报错时触发;

二.页面生命周期函数

页面是指在pages中声明的页面, 如果在components里边新建的组件应该用组件生命周期函数

1. onLoad: 监听页面加载, 其参数为上个页面传递的数据;(只加载一次)

// url:'pages/xxx/xxx?data=data'
onLoad(e){
    console.log(e.data); //data为上个页面传递的参数, e的类型为Object
}

2. onShow: 监听页面显示;(当点击进入其他页面再回来时, 会触发此函数; 如果需要数据变化, 可写在这个函数里)

onLoad(){
    this.getData();//1.页面加载getData函数执行一次
},
onShow(){
    //4.页面从`pages/xxx/xxx`返回触发onShow, getdata函数执行第三次
    this.getData();//2.页面首次加载也会触发onShow, getData函数执行第二次 
},
methods:{
    //3.点击进入其他页面
    clickChange(){
        uni.navigateTo({
            url: 'pages/xxx/xxx'
        })
    }
}

3. onReady: 监听页面初次渲染完成;(如果渲染速度快, 会在页面进入动画完成前触发)

4. onHide: 监听页面隐藏;

5. onUnload: 监听页面卸载;(当用户离开页面时, 触发onUnload函数)

onLoad(){
   uni.$on("getData",function(e){
       console.log(e);//监听数据
   })
},
onUnload(){
    uni.$off("getData");//页面卸载时结束监听数据
}

6. onResize: 监听窗口尺寸变化;

7. onPullDownRefresh: 监听用户下拉动作(下拉刷新)

• 需要现在pages.json中, 找到对应的pages节点, 并在整体的style选项中开启enablePullDownRefresh;
• 如果想让某页不能下拉刷新, 可以在该页的style中设置enablePullDownRefresh为false;
• uni.stopPullDownRefresh可以停止当前页面的下拉刷新;
• 如果没写停止下拉刷新事件, 在页面下拉之后下拉的动画不会自动消失;

//pages.json
{
    "pages":[{
        "path":"pages/xxx/xxx",
        "style":{
            "enablePullDownRefresh": true
        }
    }]
}
//pages/xxx/xxx
onPullDownRefresh(){
    console.log('下拉刷新了')
    //1s后停止页面刷新动画, 再次下拉时仍会先执行onPullDownRefresh, 1s后执行停止事件
    setTimeout(function(){
        uni.stopPullDownRefresh()
    },1000)
}

8.onReachBottom: 页面滚动到底部的时间, 常用于下拉下一页数据(上拉加载)

• 可以在pages.json中设置具体页面底部触发距离onReachBottomDistance.
• 如果使用了scroll-view导致页面没有滚动, 则不会触发触底事件

9.onTabItemTap: 点击tab时触发, 参数为Object

• index: 被点击tabItem的序号, 从0开始

10.onShareAppMessage: 用户点击右上角分享

11.onPageScroll: 监听页面滚动(可以获取滚动距离)

onPageScroll: function(e){
    console.log("页面滚动距离为"+e.scrollTop)
}

12.监听原生标题栏按钮点击事件

13.onBackPress: 监听页面返回

返回的参数类型为对象, event={from:backbutton、navigateBack},backbutton表示返回来源是点击左上角返回按钮还是安卓返回键, navigateBack是通过uni.navigateBack返回的.

三.组件生命周期函数

1. beforeCreate: 实例初始化之后调用;

2. created: 在实例创建完成后立即被调用;

3. beforeMount: 在挂载开始之前调用;

4. mounted: 挂载到实例上去之后调用

props从父页面传过来的数据可以在mounted中打印