uni-app的生命周期什么是 uni-app uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨

什么是 uni-app

uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。 uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。

使用 uni-app 的前置条件

不要认为uni-app 可以跨多端，就感觉开发难度会直线上升。如果说，你开发过小程序，恰好又会vue，那么你的学习成本会非常的低。如果你原生小程序与vue 都没有接触过的话，我建议你花一些时间，看一看他们的管方文档。再回来学习uni-app。

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

一.应用生命周期函数

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

onLaunch: 当uni-app初始化完成时触发(全局只触发一次);
onShow: 当uni-app启动, 或从后台进入前台显示(例如小程序中, 用户分享页面再进来就会触发一次onShow);
onHide: 当uni-app从前台进入后台;
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: 监听页面隐藏;

onHide(){
      let allPages = getCurrentPages(); //获取当前页面栈的实例；
      console.log(allPages);
      let lastPages = allPages.length - 1; // 获得倒数第二个元素的索引；
      console.log(lastPages);
      let option = allPages[lastPages].options; // 获得上个页面传递的参数；
      console.log(option);
},

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返回的.

uni-app的生命周期