uniapp生命周期执行顺序 uni-app 生命周期

生命周期

应用生命周期

uni-app 支持如下应用生命周期函数：

注意

• 应用生命周期仅可在 App.vue 中监听，在其他页面监听无效。
• onlaunch 里进行页面调整，如遇白屏报错，请参考 https://ask.dcloud.net.cn/article/35942

示例代码

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log("App Launch")
        },
        onShow: function() {
            console.log("App Show")
        },
        onHide: function() {
            console.log("App Hide")
        }
    }
</script>

页面生命周期

uni-app 支持如下页面生命周期函数：

onInit使用注意

• 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
• 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
• 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onReachBottom 使用注意 可在 pages.json 里定义具体页面底部的触发距离 onReachBottomDistance，比如设为 50，那么滚动页面到距离底部 50px 时，就会触发 onReachBottom 事件。

如使用 scroll-view 导致页面没有滚动，则触底事件不会被触发。scroll-view 滚动到底部的事件请参考 scroll-view 的文档

onPageScroll 参数说明：

注意

• onPageScroll 里不要写交互复杂的 js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非 h5 端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
• 如果想实现滚动时标题栏透明渐变，在 App 和 H5 下，可在 pages.json 中配置 titleNView 下的 type 为 transparent，参考。
• 如果需要滚动吸顶固定某些元素，推荐使用 css 的粘性布局，参考插件市场。插件市场也有其他 js 实现的吸顶插件，但性能不佳，需要时可自行搜索。
• 在 App、微信小程序、H5 中，也可以使用 wxs 监听滚动，参考；在 app-nvue 中，可以使用 bindingx 监听滚动，参考。
• onBackPress 上不可使用 async，会导致无法阻止默认返回

onTabItemTap 参数说明：

注意

• onTabItemTap 常用于单击当前 tabitem，滚动或刷新当前页面。如果是单击不同的 tabitem，一定会触发页面切换。
• 如果想在 App 端实现点击某个 Tabitem，则不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一个区块盖住原先的 TAbitem，并拦截点击事件。
• 支付宝小程序平台 onTabltemTap 表现为点击非当前 tabitem 后触发，因此不能用于实现点击返回顶部这种操作。

  
  

  onTabItemTap : function(e) {
      console.log(e);
      // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
  },

onNavigationBarButtonTap 参数说明：

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式为json对象：{"text":"测试","index":0}
}

onBackPress 某些参数对象说明：

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log("from:" + options.from)
    }
}

注意

• nvue 页面支持的生命周期参考：nvue 生命周期介绍。
• 支付宝小程序真机可以监听到非 navigateBack 引发的返回事件（使用小程序开发工具时不会触发 onBackPress），不可以阻止默认返回行为

组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期：