uni-app 生命周期

胸怀万里世界, 放眼无限未来。这篇文章主要讲述uni-app 生命周期相关的知识,希望能为你提供帮助。
生命周期分为:页面生命周期和应用生命周期
 
生命周期可参考:uni-app官方API
 
注意平台支持,仅某个平台支持会显示,5+App是超html5+的App方案.
 
例如分享:只有小程序支持.这时我们就要采用跨终端解决方案:https://uniapp.dcloud.io/platform
 
 
1.应用生命周期
 

uni-app 生命周期

文章图片

 
 
2.页面生命周期
 
uni-app 生命周期

文章图片

 
 
 
1 < template> 2< view class="content"> 3< image class="logo" src="https://www.songbingjia.com/static/image/myHover.png" @click="tap"> < /image> 4< view> 5< text class="title"> {{title}}< /text> 6< /view> 7< /view> 8 < /template> 9 10 < script> 11 12// 跨终端解决方案:https://uniapp.dcloud.io/platform 13// 生命周期:https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F 14 15export default { 16data() { 17return { 18title: \'Hello\' 19} 20}, 21onLoad() { 22console.log(\'页面加载\') 23}, 24onShow() { 25console.log(\'页面显示\') 26}, 27onReady(){ 28console.log(\'页面初次显示\') 29}, 30onHide() { 31console.log(\'页面隐藏\') 32}, 33onUnload() { 34console.log(\'页面卸载\') 35}, 36onBackPress(){ 37console.log(\'页面返回...\') 38}, 39onShareAppMessage() { 40console.log(\'分享!\') 41}, 42onReachBottom() { 43console.log(\'下拉加载...\') 44}, 45onPageScroll(){ 46console.log(\'页面滚动...\') 47}, 48onPullDownRefresh() { 49console.log(\'上拉刷新...\') 50uni.stopPullDownRefresh(); 51}, 52 53// #ifdef APP-PLUS 54onNavigationBarButtonTap(){ 55 56}, 57// #endif 58 59methods: { 60tap(){ 61console.log(\'tap点击!\'); 62} 63} 64} 65 < /script> 66 67 < style lang="scss"> 68.content { 69text-align: center; 70height: 400upx; 71} 72 73.logo { 74height: 200upx; 75width: 200upx; 76margin-top: 200upx; 77} 78 79.title { 80font-size: 36upx; 81color: #8f8f94; 82} 83 < /style>

 
 
页面栈以何种方式进入或退出以及tabbar的路由切换触发页面生命周期的行为.
 
uni-app 生命周期

文章图片

 
 
【uni-app 生命周期】 

    推荐阅读