10. uniapp 生命周期学习两种页面/应用生命周期-蒲公英云

10. uniapp 生命周期学习两种页面/应用生命周期

男娘i 2022-11-17 14:56 288阅读 0赞

一.应用的生命周期函数
放在App.vue主组件中：

<script>
    //    应用的生命周期函数
    export default {
        onLaunch: function() {            // 当uni-app,初始化完成时触发
            console.log('App Launch')
        },
        onShow: function() {            // 当uni-app启动,或从后台进入前台显示
            console.log('App Show')
        },
        onHide: function() {            // 当uni-app,    从前台进入后台
            console.log('App Hide')
        },
        onError:function(err){            // 报错了    报错时触发    比如说显示里面的consol    少了一个字母e就会报错打印在显示台
            console.log('出现异常了',err);
        }
    }
</script>

二.页面的生命周期

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad(option) {
            console.log('页面加载了',option);
        },
        onShow() {
            console.log('页面显示了');
        },
        onReady() {
            console.log('页面初次渲染完成了');
        },
        onHide() {
            console.log('页面隐藏了');
        },
        onUnload() {
            console.log('页面卸载了');
        },
        methods: {
        }
    }
    // onLoad    监听页面加载,其参数为上个页面传递的数据,参数类型为Object(应用于页面传参)
    // onshow    监听页面的显示.    页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    // onReady    监听页面初次渲染完成
    // onHide     监听页面隐藏
    // onunload    监听页面卸载
    // 注意:tabbar 的页面展现过程一个后就保留在内容中,再次切换tabbar页面,只会触发每个页面的onShow,不会触发onLoad
</script>