• 0

  • 492

  • Favorite

极速入门微信小程序 之 生命周期篇(3-组件)

1 month ago

极速入门微信小程序 之 生命周期篇(3-组件)

留步 点赞 关注 你的爱心可能会促进前端大佬更好的发挥余热

组件生命周期

现时代的前端项目开发,都是基于组件化的,因此学好微信小程序-组件的生命周期会更加有利于我们开发高质量的项目代码。

搭建父子组件结构

  1. 新建组件 components\chitu\chitu

    image-20210218220855986

  2. 页面中引用

    1. index.json

      {
        "usingComponents": {
          "chitu":"/components/chitu/chitu"
        }
      }
      复制代码
    2. index.wxml

      <chitu></chitu>
      复制代码

组件生命周期

组件自身的生命周期

生命周期 描述
created 在组件实例刚刚被创建时执行
attached 在组件实例进入页面节点树时执行
ready 在组件在视图层布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行
error 每当组件方法抛出错误时执行

组件所在页面的生命周期

还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义。其中可用的生命周期包括:

生命周期 描述
show 组件所在的页面被展示时执行
hide 组件所在的页面被隐藏时执行
resize 组件所在的页面尺寸变化时执行

具体实现可以参考如下

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})
复制代码

created

组件实例刚刚被创建时触发 此时不 setData 不生效

触发时机

组件实例刚刚被创建时触发

作用

可以给 this 添加一些自定义属性

代码

Component({
  lifetimes: {
    /**
     * 组件刚刚创建完毕
     */
    created() {
      console.log("created 组件刚刚创建完毕");
    } 
  }
})
复制代码

效果

2021-02-18221117

attached

组件实例 被创建到页面节点时触发 此时已经可以使用 setData

触发时机

组件实例 被创建到页面节点时触发 此时已经可以使用 setData

作用

一般用在发送异步请求获取数据赋值data然后渲染页面

代码

Component({
  lifetimes: {
    /**
     * 组件实例 被创建到页面节点时触发
     */
    attached(){
      console.log("attached 组件实例 被创建到页面节点时触发");
    }
  }
})
复制代码

效果

2021-02-18221118

ready

组件视图渲染完毕后触发

触发时机

组件视图渲染完毕后触发

作用

可以用在获取渲染结束后的节点样式

代码

Component({
  lifetimes: {
    /**
     * 组件视图渲染完毕后触发
     */
    ready() {
      console.log("ready 组件视图渲染完毕后触发 ");
    },
  }
})
复制代码

效果

2021-02-18221119

moved

当组件节点位置发生改变时生效

触发时机

我们这样理解 存在一个数组 通过循环生成了一系列组件,当数组中的元素发生位置改变时,那么其中的组件的位置也发生了改变。这样便会触发 move 生命周期

作用

可用做组件自身由于位置改变而附带的副作用

代码

  1. 父页面

    1. index.js

            
      Page({
        data: {
          list: [
            { id: 0, text: 0 },
            { id: 1, text: 1 }
          ]
        },
        onLoad: function () {
          setTimeout(() => {
            const [a, b] = this.data.list;
            const list = [b, a];
            this.setData({ list })
          }, 2000);
        },
      })
      复制代码
    2. index.wxml

      <view>
        <chitu wx:for="{{list}}" wx:key="id"> {{item.text}} </chitu>
      </view>
      复制代码
  2. 子组件

    1. wxml

      <view><slot></slot></view>
      复制代码
    2. js

      Component({
          /**
           * 组件的位置发生改变时触发
           */
          moved() {
            console.log("moved 组件的位置发生改变时触发");
          }
        }
      })
      复制代码

效果

定时器等待 2s 通过 setData 修改数组 同时观察页面中的 文本

2021-02-18221121

detached

当组件在页面中被移除时触发

触发时机

当组件在页面中被移除时触发 组件在父页面中通过 wx:if 实现了隐藏即为被移除

作用

停止异步任务

代码

  1. 父页面

    1. index.js

      Page({
        data: {
          show: true
        },
        onLoad: function () {
          setTimeout(() => {
            this.setData({ show: false })
          }, 2000);
        }
      })
      复制代码
    2. index.wxml

      <view>
        <chitu wx:if="{{show}}">赤兔</chitu>
      </view>
      复制代码
  2. 子组件

    Component({
      lifetimes: {
        /**
         * 当组件在页面中被移除时触发
         */
        detached(){
          console.log("detached 当组件在页面中被移除时触发");
        } 
      }
    })
    复制代码

效果

2021-02-18221122

error

当组件内代码出现错误时触发

触发时机

当组件内代码出现错误时触发

作用

可以用做收集错误信息 或者给出用户友好提示

代码

Component({
  lifetimes: {
    created() {
      // 瞎调用一通
      this.setabcd();
    },
    /**
     * 当组件内的代码出现错误时触发
     */
    error(){
      console.log("error 当组件内的代码出现错误时触发");
    }
  }
})
复制代码

效果

2021-02-18221123

技术交流群

947593379

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

php

492

Relevant articles

未登录头像

No more data