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

赤兔Team
1,553 阅读4分钟

极速入门微信小程序 之 生命周期篇(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

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

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

avatar
文章
阅读
粉丝