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

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

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

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

二.页面的生命周期

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. title: 'Hello'
  6. }
  7. },
  8. onLoad(option) {
  9. console.log('页面加载了',option);
  10. },
  11. onShow() {
  12. console.log('页面显示了');
  13. },
  14. onReady() {
  15. console.log('页面初次渲染完成了');
  16. },
  17. onHide() {
  18. console.log('页面隐藏了');
  19. },
  20. onUnload() {
  21. console.log('页面卸载了');
  22. },
  23. methods: {
  24. }
  25. }
  26. // onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(应用于页面传参)
  27. // onshow 监听页面的显示. 页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
  28. // onReady 监听页面初次渲染完成
  29. // onHide 监听页面隐藏
  30. // onunload 监听页面卸载
  31. // 注意:tabbar 的页面展现过程一个后就保留在内容中,再次切换tabbar页面,只会触发每个页面的onShow,不会触发onLoad
  32. </script>

发表评论

表情:
评论列表 (有 0 条评论,288人围观)

还没有评论,来说两句吧...

相关阅读

    相关 uniapp 应用生命周期

    应用生命周期 目录: components:存放可复用的组建 pages:页面存放位置 static:存放本地资源(图片,视频,只能存在这个文件夹中,代码不会被解析