[移动开发]应用生命周期、页面生命周期、组件生命周期

一 应用生命周期

前台、后台定义：

当我们离开应用时，应用不会被直接销毁，而是进入了后台。当我们再次进入到应用时，应用就会从后台进入前台。

那应用什么时候会被真正销毁呢？

当应用进入后台超过一定时间，或者系统资源占用过高，应用才会被真正的销毁。再次打开就需要重新初始化启动应用。

二 页面生命周期

说明

1 onLoad 参数说明

页面生命周期函数 onLoad，是页面最先执行的生命周期函数，如果从上个页面跳转到本页面，可以通过参数option 传递上个页面的数据。

//index.vue
//跳转语句，并在跳转链接上面加上要传递的数据
uni.reLaunch({
    url: 'test?name=我是首页的数据'
});

//me.vue
export default {
    //options参数就是上个页面传递过来的数据
    onLoad: function (options) {
        console.log(options.name);
    }
}

//打印出来的结果
我是首页的数据

2 onPullDownRefresh 函数 用于监听该页面用户下拉页面的动作。

普通页面下拉不会触发 onPullDownRefresh 函数，要先在 pages.json 里面，找到当前页面的 pages 节点，并在style 选项中将 enablePullDownRefresh 设置为 true，下拉页面才可以触发 onPullDownRefresh 函数。
调用完成 onPullDownRefresh 函数后，用 stopPullDownRefresh 函数可以停止当前页面的下拉状态。

//pages.json
{
    "path": "pages/index/index.vue",
    "style": {
        "enablePullDownRefresh": true
    }
}

//页面，隐藏下拉状态
export default{
    onPullDownRefresh(){
        console.log('用户下拉页面时触发')
        uni.stopPullDownRefresh()
    }
}

3 onTabItemTap 参数说明

export default {
    onTabItemTap(options) {
        console.log('被点击tabItem的序号index:' + options.index)
        console.log('被点击tabItem的页面路径pagePath:' + options.pagePath)
        console.log('被点击tabItem的按钮文字text:' + options.text)
    }
}

注意以下几点：

onTabItemTap 常用于点击当前 tabitem，滚动或刷新当前页面。如果是点击不同的 tabitem，一定会触发页面切换。
如果想在 App 端实现点击某个 tabitem 不跳转页面，不能使用 onTabItemTap，可以使用plus.nativeObj.view 放一个区块盖住原先的 tabitem，并拦截点击事件。 在 App 端，从 HBuilderX 1.9 的自定义组件编译模式才开始支持 onTabItemTap。

4 onNavigationBarButtonTap 参数说明

export default {
    onNavigationBarButtonTap(options) {
        console.log('index:' + options.index)
    }
}

5 onBackPress 参数说明

返回结果的格式是这样的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack。

export default {
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

三 组件生命周期

四 页面生命周期和组件生命周期的执行顺序

页面生命周期函数 onLoad：页面加载
页面生命周期函数 onShow：页面显示
beforeCreate：实例初始化
created：实例创建完成
beforeMount：模板编译之前
mounted：模板编译完成
页面生命周期函数 onReady：页面初次显示

页面生命周期函数 onLoad、onShow 会先运行，接着 Login 组件中的 beforeCreate、created
等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。

页面生命周期函数 onLoad、onShow 会先运行，接着组件中的 beforeCreate、created 等组件生命周期函数开始运行。组件加载完成后，页面生命周期函数 onReady 开始运行。

像这样比较重复的生命周期函数，我们推荐使用页面生命周期函数，比如：
组件生命周期函数 created 可以替换为页面生命周期中的 onLoad；
组件生命周期函数 mouted 可以替换为页面生命周期中的 onReady。