uni-app 生命周期

 

生命周期分為：頁面生命周期和應用生命周期

 

生命周期可參考：uni-app官方API

 

注意平台支持，僅某個平台支持會顯示，5+App是超HTML5+的App方案.

 

例如分享：只有小程序支持.這時我們就要采用跨終端解決方案：https://uniapp.dcloud.io/platform

 

1.應用生命周期

 

2.頁面生命周期

<template>
    <view class="content">
        <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>
        <view>
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>

<script>
    
    // 跨終端解決方案:https://uniapp.dcloud.io/platform
    // 生命周期:https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
    
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            console.log('頁面加載')
        },
        onShow() {
            console.log('頁面顯示')
        },
        onReady(){
            console.log('頁面初次顯示')
        },
        onHide() {
            console.log('頁面隱藏')
        },
        onUnload() {
            console.log('頁面卸載')
        },
        onBackPress(){
            console.log('頁面返回...')
        },
        onShareAppMessage() {
            console.log('分享!')
        },
        onReachBottom() {
            console.log('滾動到底部加載...')
        },
        onPageScroll(){
            console.log('頁面滾動...')
        },
        onPullDownRefresh() {
            console.log('下拉刷新...')
            uni.stopPullDownRefresh();
        },
        
        // #ifdef APP-PLUS
        onNavigationBarButtonTap(){
            
        },
        // #endif
        
        methods: {
            tap(){
                console.log('tap點擊!');
            }
        }
    }
</script>

<style lang="scss">
    .content {
        text-align: center;
        height: 400upx;
    }

    .logo {
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>

 

頁面棧以何種方式進入或退出以及tabbar的路由切換觸發頁面生命周期的行為.