uni-app 教程
- 第1节:uni-app 介绍
- 第2节:uni-app 由来
- 第3节:uni-app 快速上手
- 第4节:uni-app 如何学习
- 第5节:uni-app 框架简介
- 第6节:uni-app 生命周期
- 第7节:uni-app 路由
- 第8节:uni-app 页面样式与布局
- 第9节:uni-app 使用Vue.js注意事项
- 第10节:uni-app Vue组件
- 第11节:uni-app Vue特性支持表
- 第12节:uni-app 使用Weex/nvue 注意事项
- 第13节:uni-app 使用HTML5+注意事项
- 第14节:uni-app 条件编译
- 第15节:uni-app 跨端开发注意事项
- 第16节:uni-app 高效开发技巧
- 第17节:uni-app 性能优化建议
- 第18节:uni-app 开放生态
- 第19节:uni-app 其他项目转 uni-app
- 第20节:uni-app 混合开发
- 第21节:uni-app 开源样式资源汇总
- 第22节:uni-app 选型评估指南
- 第23节:uni-app 常见问题
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 等生命周期: