小程序--自定义组件(一)

创建自定义组件

1. 根目录下创建components文件夹
2. 创建子文件夹 test（自定义名称）
3. test 文件夹下右键选择–新建 Component

全局使用组件

在app.json–usingComponents下配置 导入组件的路径

  "usingComponents": {
    "may-test": "/components/test/test"
  }

应用

<may-test > </may-test>

局部使用组件

想再在某个指定的页面内单独使用组件 在当前的 json 内 usingCompontens
例如：index下 的index.json中配置

  "usingComponents": {
    "may-test":"/components/test/test"
  },

应用
index.wxml 下使用

<may-test> </may-test>

自定义组件样式

组件样式隔离的注意点:
⚫ app.wxss 中的全局样式对组件无效
⚫ 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

修改组件的样式隔离选项:
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能
够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：

Component({
  options: {
    // 样式隔离选项
    // styleIsolation: "isolated" //启动样式隔离
    // styleIsolation: "shared" //自定义组件样式也会影响页面   和企业设置了  isolated 和  apply-shared
    styleIsolation: "apply-shared",//表示页面wxss样式将影响到自定义组件， 但自定义组件样式不会影响到页面
    }
    )}

styleIsolation 的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件

自定义组件的data和methods

data数据
在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：

Components(
{
 /**
 *组件初始化数据
 */
 data:{
   count: 0
  }
 }
)

methods方法
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：

Components(
{
   methods: {
    showInfo() {
      console.log(this.data);
      console.log(this.properties);
      console.log(this.data === this.properties);
      //修改   properties 参数
      this.setData({
        max: this.properties.max + 1
      })
    },
    addn1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addn2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    },
    _randomColor() {  //自定义方法建议是用_ 开头
      this.setData({
        _rgb: { r: Math.floor(Math.random() * 256) }
      })
      console.log(this.data._rgb);
    },
  },
  
)

自定义组件properties属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：

Component({
porperties:{
     info:Number //简化定义属性的方法
    count: {  //完整定义属性的方法
      type: Number,  // 属性值的数据类型
      value: 0 //  属性默认值
    }
 }
 })
 <may-test cunt="100"> </may-test>
 

这个过程类似于 vue中的 父传子的结构

自定义组件的数据监听器 observers

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的
watch 侦听器。

Component( {
  data: {

    n1: 0,
    n2: 2,
    sum: 0,
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    }
  },
 observers: {
    "n1 , n2": function (newN1, newN2) {
      console.log(newN1, newN2);
      this.setData({
        sum: newN1 + newN2
      })
    },
    "_rgb.r,_rgb.g ": function (v1 ,v2) {
      console.log(v1 ,v2);
    },
    // 如果某个独享中需要监听的属性太多，为了方便，可以使用通配符** 来监听独享中所有属性的变化
    "_rgb.**": function (obj) {
      console.log(obj);
    },

  },
 })

自定义组件的纯数据字段

1. 什么是纯数据字段
   概念：纯数据字段指的是那些不用于界面渲染的 data 字段。
   应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前
   组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
   好处：纯数据字段有助于提升页面更新的性能。
2. 使用规则
   在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则
   表达式的字段将成为纯数据字段，示例代码如下：

Components({
options:{
     // 指定所有 _  开头的数据字段为传数据字段  （不被页面渲染和组件传输）
    pureDataPattern: /^_/,//值为正则
},
  data:{
    _a:0
    }

} )

自定义组件生命周期

1. 组件全部的生命周期函数
   小程序组件可用的全部生命周期如下表所示：

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

组件主要的生命周期函数
在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点
如下：
① 组件实例刚被创建好的时候，created 生命周期函数会被触发
⚫ 此时还不能调用 setData
⚫ 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
② 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
⚫ 此时， this.data 已被初始化完毕
⚫ 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
③ 在组件离开页面节点树后， detached 生命周期函数会被触发
⚫ 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
⚫ 此时适合做一些清理性质的工作

lifetimes 节点
在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段
内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：

  lifetimes: {
    created() {
      // console.log("`````````111111");
    },
    attached() {
      // console.log('``````````3333333333');
    },
    detached() { }

  },

组件所在页面的生命周期

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

.pageLifetimes 节点
组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下：

  //  组所在页面生命周期 函数  需要定义pageLifetimes 节点中
  pageLifetimes: {
    show() { //页面被展示
      console.log("show_____页面被展示");
      this._randomColor()
    },
    hide() { //页面被隐藏
      console.log("hide______ 页面被隐藏");
    },
    resize: function (size) {   //页面尺寸变化
      console.log(size);
    }
  }

自定义组件插槽