微信小程序-自定义组件

文章目录

• 微信小程序-自定义组件
• • 概述
  • 创建和使用
  • 数据、方法和属性
  • [slot 插槽](#slot 插槽)
  • • 默认插槽
    • 具名插槽
  • 组件样式
  • • 注意项
    • 样式隔离
  • 数据监听
  • 组件间通信
  • • 父传子
    • 子传父
    • 获取子组件实例
  • 生命周期
  • • 组件的生命周期
    • 组件所在页面的生命周期
    • App、Page与Component生命周期对比
    • 冷启动
    • 保留当前页面和关闭当前页面跳转
    • 切换后台和切换前台
  • Component构建页面
  • • 注意事项
    • 使用
  • behaviors
  • 修改组件默认样式
  • • 样式覆盖
    • 外部样式类

微信小程序-自定义组件

概述

小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

创建和使用

创建流程：

一、在根目录下新建 components 文件夹。

二、在 components 文件夹内，新建组件的文件夹，再新文件内新建组件，文件夹名与组件名保持一致。

三、组件可分2种：

• 公共组件：
  • 将功能模块抽象成自定义组件，方便在不同页面中重复使用。
  • 建议放在根目录下的 components 文件夹中。
• 页面组件：
  • 将复杂的页面拆分成多个低耦合的模块，方便代码维护。
  • 建议放在对应的页面目录下的 components 文件夹中。

四、IDE 会自动在 json 文件中配置 component 选项：

{
  "component": true
}

五、IDE 会自动在 js 文件中定义 Component() 函数：

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

使用流程；

• 全局注册：在 app.json 文件中配置 usingComponents 选项，可以全局调用。

  {
    "usingComponents": {
      "my-custom-checkbox": "./components/my-custom-checkbox/my-custom-checkbox"
    } 
  }
  

• 局部注册：在页面的 json 文件中配置 usingComponents 选项，只能在当前页面中使用。

  {
    "usingComponents": {
      "my-custom-checkbox": "../../components/my-custom-checkbox/my-custom-checkbox"
    }
  }
  

数据、方法和属性

Component 包含3个属性：

• data：组件内部的数据。
• methods：组件中的事件处理。
• properties：组件的对外属性
  • 用于接收外部传递的数据。
  • 支持类型：String / Number / Boolean / Object / Array / null(不限制类型)

定义组件的WXML：

<view class="custom-checkbox-container">
  <view class="custom-check-box {{position ==='right'?'right':'left'}}">
    <checkbox class="custom-checkbox" checked="{{isChecked}}" bindtap="updateChecked" />
    <view>
      <text>{{label}}</text>
    </view>
  </view>
</view>

定义组件的JS：

Component({
  properties: {
    // 标题
    // 可简写为 label: String
    label: {
      type: String,
      value: "",
    },
    // 文字显示位置
    position: {
      type: String,
      value: "right",
    },
  },
  data: {
    isChecked: false,
  },
  methods: {
    updateChecked() {
      this.setData({
        isChecked: !this.data.isChecked,
      })
      console.log(this.data.isChecked)
    },
  },
})

使用：

<my-custom-checkbox label="我已阅读并同意 用户协议 和 隐私协议" position="right" />
<my-custom-checkbox label="匿名提交" position="left" />

效果图：

slot 插槽

默认插槽

在使用基础组件时，可以给组件传递子节点传递内容，从而将内容展示到页面中，自定义组件也可以接收子节点内容。

只不过在组件模板中需要定义 <slot /> 节点，用于承载组件引用时提供的子节点。

定义默认插槽组件：

<view>
  <text>hello</text>
  <slot />
  <text>world</text>
</view>

使用默认插槽：

<my-custom01>这是一个默认插槽</my-custom01>

效果如下：

具名插槽

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

同时需要给 slot 添加 name 来区分不同的 slot，给子节点内容添加 slot 属性来将节点插入到 对应的 slot 中。

开启多插槽支持：

Component({
  options: {
    // 开启多slot支持
    multipleSlots: true,
  }
})

定义具名插槽：

<view>
  <slot name="slot-top" />
  <text>hello slot</text>
  <slot />
  <slot name="slot-bottom" />
</view>

使用具名插槽：

<my-custom02>
  <text slot="slot-top">自定义头部</text>
  这是一个具名插槽
  <text slot="slot-bottom">自定义尾部</text>
</my-custom02>

效果如下：

组件样式

类似于页面，自定义组件拥有自己的 wxss 样式，组件对应 wxss 文件的样式，只对组件wxml内的节点生效。

注意项

• 不推荐使用标签名选择器，会影响页面和全部组件。
• 不能使用 id 选择器、属性选择器。
• 避免使用后代选择器、子元素选择器，可能出现非预期效果。
• 建议使用 class 选择器。
• 继承样式，如 font、color，会从组件外继承到组件内。
• 全局样式、页面样式对自定义组件无效。

样式隔离

默认情况下，自定义组件的样式只受到自定义组件的 wxss 影响。

以下2种情况则受影响：

1. 全局样式、页面样式使用标签选择器，这种情况下不推荐使用。

2. 指定样式隔离选项：

   Component({
     options: {
       styleIsolation: 'isolated'
     }
   })
   

   styleIsolation 选项支持以下取值：

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

说明：

定义组件和组件样式：

<text class="label">这是一个组件样式</text>

.label {
  color: green;
  font-size: 30rpx;
}

定义页面和页面样式：

<my-custom03 />
<text class="label">这是一个页面样式</text>

.label{
  color:red;
  font-size: 50rpx;
}

当设置 styleIsolation: 'isolated' ，会开启组件隔离，效果如下：

当设置 styleIsolation: 'shared' ，会开启样式共享，效果如下：

数据监听

可以通过 observers 选项监听数据和属性的变化。

<view>num:{{num}}</view>
<view>count:{{count}}</view>
<view>
  arr:<text wx:for="{{arr}}" wx:key="index">{{item}}</text>
</view>
<view>user:{{user.name}}-{{user.age}}</view>
<button bindtap="updateData">修改数据</button>

Component({
    data: {
        num: 1,
        count: 10,
        arr: [1, 2, 3],
        user: { name: "小明", age: 18 },
    },
    observers: {
        // 监听数据
        num: function (newNumber) {
            console.log("监听num " + newNumber)
        },
        // 监听多个数据
        "num,count": function (newNum, newCount) {
            console.log(`监听多个数据 ${newNum}  ${newCount}`)
        },
        // 监听数组
        "arr[0]": function (newVal) {
            console.log(`监听数组 ${newVal}`)
        },
        // 监听对象
        "user.age": function (newAge) {
            console.log(`监听对象属性 ${newAge}`)
        },
        // 监听所有属性变化，使用通配符
        "user.**": function (obj) {
            console.log(`监听所有属性变化 ${obj.name} ${obj.age}`)
        },
    },
    methods: {
        // 修改数据
        updateData() {
            this.setData({
                num: this.data.num + 1,
                count: this.data.count + 1,
                "arr[0]": this.data.arr[0] + 1,
                "user.age": this.data.user.age + 1,
                "user.name": this.data.user.name + this.data.num,
            })
        },
    },
})

组件间通信

父传子

• 在父组件 wxml 中使用数据绑定的方式向子组件传递数据。
• 在子组件中使用 properties 接收父组件的数据。

定义子组件：

Component({
  properties: {
    propName: {
      type: String,
      value: "",
    },
    propAge: {
      type: Number,
      value: 0,
    },
  },
  data: {
    user: { name: "未命名", age: 0 },
  },
  observers: {
    propName: function (newName) {
      this.setData({
        "user.name": newName,
      })
    },
    propAge: function (newAge) {
      this.setData({
        "user.age": newAge,
      })
    },
  },
})

<text>{{user.name}} - {{user.age}}</text>

在父组件中使用：

<my-son prop-name="小白" prop-age="18" />

子传父

• 子组件通过 triggerEvent 发送事件。
• 通过 bind 方法监听事件。

定义子组件：

<text>{{user.name}} - {{user.age}}</text>
<button bindtap="sendData">子组件发送数据</button>

Component({
    methods: {
        sendData() {
			// 第一个参数：事件名
            // 第二个参数：传递的数据
            this.triggerEvent("myevent", "hello world " + Date.now())
        },
    },
})

定义父组件：

// 绑定事件方法
<my-son bind:myevent="getData" prop-name="小白" prop-age="18" />
<view>父组件接收数据：{{msg}}</view>

Page({
    data: { msg: "123" },
    getData(event) {
        this.setData({
            // 通过detail获取数据
            msg: event.detail,
        })
    },
})

获取子组件实例

在父组件中可以通过 selectComponent() 获取子组件的实例。

<my-son id="child" bind:myevent="getData" prop-name="小白" prop-age="18" />
<button bindtap="getChild">获取子组件实例</button>

Page({
    getChild() {
        const child = this.selectComponent("#child")
        console.log(child.data.user) // {name: "小白", age: 18}
    },
})

生命周期

组件的生命周期

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

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

组件生命周期：

• created：组件被创建时执行，此时不能调用 setData()。
• attached：组件实例进入页面节点树时执行。
• ready：组件布局完成后执行。
• moved：组件被移到到另一个位置时执行。
• detached：组件被移除时执行。

Component({
  lifetimes: {
    created() {
      console.log("Component created")
    },
    attached() {
      console.log("Component attached")
    },
    ready() {
      console.log("Component ready")
    },
    moved() {
      console.log("Component moved")
    },
    detached() {
      console.log("Component detached")
    },
  },
})

组件所在页面的生命周期

主要用于组件内部监听父组件的展示、隐藏状态，从而方便组件内部执行一些业务逻辑的处理。

组件所在页面的生命周期有 4 个： show、 hide、 resize、 routeDone，需要在 pageLifetimes 字段内进行声明。

组件所在页面的生命周期：

• show：页面处于显示状态时执行。如后台切换。
• hide：页面处于隐藏状态时执行。如前台切换。

Component({
  pageLifetimes: {
    show() {
      console.log("Page show()")
    },
    hide() {
      console.log("Page hide()")
    },
  },
})

App、Page与Component生命周期对比

冷启动

保留当前页面和关闭当前页面跳转

切换后台和切换前台

Component构建页面

Component 可以用于构建页面，适合更复杂的页面逻辑开发。

注意事项

• json 文件必须包含 usingComponent 选项。
• Page 中的一些生命周期方法，必须放在 Component 的 methods 中。
• 组件的属性 Properties 可以用于接收页面的参数，在 onLoad() 中可以通过 this.data 拿到对应的页面参数

Component({
  properties: {
    name: String,
    age: Number,
  },
  data: {
    name: "",
    age: 0,
  },
  methods: {
    onLoad(options) {
      console.log(this.data.name)
      console.log(this.data.age)
      console.log(this.properties.name)
      console.log(this.properties.age)
    },
    updateData() {
      this.setData({
        age: this.data.age + 1,
      })
    },
  },
})

使用

Component({
  properties: {
    name: String,
    age: Number,
  },
  data: {
    name: "",
    age: 0,
  },
  methods: {
    onLoad(options) {
      console.log(this.data);
      console.log(this.data.name)
      console.log(this.data.age)
      console.log(this.properties.name)
      console.log(this.properties.age)
    },
    updateData() {
      this.setData({
        age: this.data.age + 1,
      })
    },
  },
})

<navigator url="/pages/detail/detail?name=小花&age=20">跳转detail页面</navigator>

behaviors

behaviors 方法是一种代码复用的方式，可以将一些通用的逻辑和方法提取出来，然后在多个组件中复用，从而减少代码冗余，提高代码的可维护性。

创建behaviors并导出：

const behavior = Behavior({
  properties: {
    label: {
      type: String,
      value: "hell world",
    },
  },
  data: {
    name: "张三",
    age: 28,
  },
  methods: {
    updateName() {
      this.setData({
        name: "李四",
      })
    },
  },
})

export default behavior

引入并使用：

import behavior from "../../utils/behaviors.js"

Component({
  behaviors: [behavior]
})

修改组件默认样式

样式覆盖

方法：查找官方文档，找到案例，使用审查元素查看对应的类名。

可以看到3个信息：

• .wx-checkbox-input：复选框默认样式。
• .wx-checkbox-input-checked：复选框选中样式。
• .wx-checkbox-input.wx-checkbox-input-checked:before：复选框前面✔的样式。

需要先开启 styleIsolation: "shared" 选项。

.wx-checkbox-input {
    border-radius: 50% !important;
    border: 1px solid blue !important;
}
.wx-checkbox-input-checked {
    border: 1px solid red !important;
}
.wx-checkbox-input.wx-checkbox-input-checked:before {
    color: red !important;
}

外部样式类

默认情况下，组件和组件使用者之间如果存在相同的类名不会相互影响。

开发者如果想修改组件的样式，需要就解除样式隔离，在极端情况下，会产生样式冲突。

使用外部样式类步骤：

1. 开启 externalClasses 选项，可以定义多个外部样式类。
2. 在自定义组件中使用 class 属性绑定一个样式类，属性值是传递的类名。
3. 在父组件中使用样式类。

定义组件：

Component({
  // 定义外部样式类
  externalClasses: ["extend-class"],
})

// 属性绑定
<view class="extend-class">
  hello world 外部样式
</view>

使用外部样式：

// 使用样式
<my-external-classes extend-class="my-box" />

.my-box {
  border: 2rpx solid red !important;
}

效果如下：