微信小程序详解(7.自定义组件:Component 和应用生命周期页面生命周期)

最新推荐文章于 2024-06-24 08:45:12 发布

success_on

最新推荐文章于 2024-06-24 08:45:12 发布

阅读量3.3k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/a2690656046/article/details/118304671

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

介绍:

首先,我们要明白,自定义组件是什么东西,能干什么,
那么.既然是自定义组件,那么当然是自己定义的一个模块封装后,这个模块就叫做自定义组件,我们可以写多个功能不同的自定义组件,当我们需要使用时,只需要把它们引入到我们的项目中就可以直接使用了,极大的方便了我们的项目搭建和功能完善,并且使项目耦合降低，可读性强和维护性成本降低.

步骤:

1.创建一个自定义的文件夹,这个就不多做描述,直接在文件中和pages同级的位置创建一个自定义的文件,然后保存, 他就自动生成了
(注意:这个方式只有在微信小程序中使用时才会自动生成)

2.创建自定义组件后接受一个 Object 类型的参数。

参数
Object object
在这里插入图片描述

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

(注意:在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name=“attr value”），应用于数据绑定时采用驼峰写法（attr=""）)
在这里插入图片描述
属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好。

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。

多数情况下，属性最好指定一个确切的类型。这样，在 WXML 中以字面量指定属性值时，值可以获得一个确切的类型.

Bug & Tips:

使用 this.data 可以获取内部数据和属性值；但直接修改它不会将变更应用到界面上，应使用 setData 修改。
生命周期函数无法在组件方法中通过 this 访问到。
属性名应避免以 data 开头，即不要命名成 dataXyz 这样的形式，因为在 WXML 中， data-xyz=""会被作为节点 dataset 来处理，而不是组件属性。
在一个组件的定义和使用时，组件的属性名和 data
字段相互间都不能冲突（尽管它们位于不同的定义段中）。
从基础库 2.0.9 开始，对象类型的属性和 data
字段中可以包含函数类型的子字段，即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。
bug : 位于 slot 中的自定义组件没有触发 pageLifetimes 中声明的页面生命周期，此问题在 2.5.2 中修复。
bug : 对于 type 为 Object 或 Array 的属性，如果通过该组件自身的 this.setData
来改变属性值的一个子字段，则依旧会触发属性 observer ，且 observer 接收到的 newVal
是变化的那个子字段的值， oldVal 为空， changedPath 包含子字段的字段名相关信息；目前推荐使用 observers
定义段代替。

组件生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component构造器中定义的数据 data 。此时还不能调用 setData 。通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached会被触发。

定义生命周期方法
生命周期方法可以直接定义在 Component 构造器的第一级参数中。

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。
可用的全部生命周期如下表所示。
在这里插入图片描述
组件所在页面的生命周期
还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
在这里插入图片描述

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

页面生命周期

在这里插入图片描述

总结:

自定义组件Component:

自己定义的一个模块封装后,这个模块就叫做自定义组件,我们可以写多个功能不同的自定义组件,当我们需要使用时,只需要把它们引入到我们的项目中就可以直接使用了,极大的方便了我们的项目搭建和功能完善,并且使项目耦合降低，可读性强和维护性成本降低.

应用生命周期:
应用生命周期的作用范围为整个应用,当应用开始创建完毕到应用关闭,这其中的各个过程,如创建前,创建后,挂载前,挂载后,一直到销毁后(应用关闭),这其中个各个过程就是应用的生命周期.

页面生命周期:
1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。
2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。
3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
4、当小程序后台运行或跳转到其他页面时，触发onHide方法。
5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

总结注意点:

创建自定义组件时,自动生成文件这个方式只有在微信小程序中使用时才会自动生成
组件中在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name=“attr value”），应用于数据绑定时采用驼峰写法（attr=""）
然后,就是应用生命周期和页面生命周期的区分了,一个是应用创建到结束为一个生命周期,一个为应用中的一个页面的打开和关闭为一个生命周期.

好了,那么我们的微信小程序基础部分就到这里了,祝大家好运

success_on

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
微信小程序详解(7.自定义组件:Component 和应用生命周期页面生命周期)

介绍:首先,我们要明白,自定义组件是什么东西,能干什么,那么.既然是自定义组件,那么当然是自己定义的一个模块封装后,这个模块就叫做自定义组件,我们可以写多个功能不同的自定义组件,当我们需要使用时,只需要把它们引入到我们的项目中就可以直接使用了,极大的方便了我们的项目搭建和功能完善,并且使项目耦合降低，可读性强和维护性成本降低.步骤:1.创建一个自定义的文件夹,这个就不多做描述,直接在文件中和pages同级的位置创建一个自定义的文件,然后保存, 他就自动生成了(注意:这个方式只有在微信小程序中使用时
复制链接

扫一扫