用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2021-2-19 09:57

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

组件生命周期

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


搭建父子组件结构
  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

      
         {{item.text}} 
      
      复制代码
  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 当组件内的代码出现错误时触发");
    }
  }
})
复制代码

效果

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏