微信小程序-自定义组件

组件

开发中常见的组件有两种：公共组件和页面组件，组件在创建好之后需要用不同的方式注册

• 全局注册：在app.json文件中配置usingComponents进行注册，注册后可以在任意界面使用
• 局部注册：在页面的json文件中配置usingComponents进行注册，注册之后只能在当前页面使用

与vue不同，小程序单独对页面和组件进行了区分

• 小程序： 强调“轻量级”和“快速开发”，其页面-组件分离的设计在一定程度上简化了对页面级别事件（如下拉刷新、触底加载）的处理，因为这些事件天然属于“页面”的范畴。
• Vue： 强调“组件化”和“可组合性”，将一切视为组件可以带来更高的灵活性和代码复用性，使得构建复杂、高度定制化的 UI 变得更加容易。

---

组件的数据和方法

组件的数据和方法需要在组件.js的component方法中进行定义，Component创建自定义组件

• data：定义组件的内部数据

• methods：在组件中事件处理程序需要写在methods中才可以

• properties：是组件的对外属性，主要用来接收组件使用者传递给组件内的数据，和data一同用于组件的模板渲染

properties就像是vue中的props，用于组件的父传子

properties: {
  extClass: {
    type: String,
    value: ''
  }

这里的type用来配置数据类型，可使用的数据类型有：String、Number、Boolean、Object、Array

或者直接配置成null，表示不限制类型

value用来设置该属性如果没有被传递的默认值

---

组件插槽

小程序的插槽和vue没什么太大区别

小程序中默认是不支持具名插槽，即多个插槽，需要在component方法中配置options开启multipleSlots

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  }
}

需要注意，微信小程序并没有提供类似vue的作用域插槽，想要实现组件的子传父，需要利用事件来完成

---

组件样式

• 在自定义组件的wxss文件中，不允许使用标签、id、属性选择器，尽量使用类选择器进行样式编辑
• 子选择器只能用于view和子组件，用于其他组件可以会出现样式失效的问题
• 继承样式、例如color\font都会从组件外继承
• 全局样式、组件所在页面的样式文件都对组件无效
• 不建议在全局样式文件和页面样式文件中使用标签选择器
• 组件和组件使用者，如果使用后代选择器，可能会出现一些非预期情况

Component({
  options: {
     // 配置组件样式隔离，isolated是默认值，即开启组件隔离
    styleIsolation: "isolated"
  }
}

apply-shared：页面能够影响到组件，但组件内的样式不会影响到页面

shared：页面和组件的样式会相互影响，还会影响到其他配置为apply-shared和shared的自定义组件

---

内部组件的样式修改

在使用小程序提供的内部组件时，例如checkbox复选框，我们为其直接添加类选择器并进行修改样式是无效的

先使用小程序官方提供的定制方式，其次通过开发者工具定位内部结构进行精准修改，并始终注意样式作用域。

优先使用原生组件提供的属性

• 思路： 查阅小程序官方文档，看原生组件是否提供了直接控制样式的属性（如 color、size、checked-color 等）。
• 优点： 最稳定、最兼容、最推荐的方式。
• 示例： checkbox 组件本身没有太多直接的样式属性，但 button 有 size、type 等。

通过开发者工具定位内部结构进行精准修改（针对 checkbox 等）

• 思路： 当原生组件没有提供直接的样式属性时，利用微信开发者工具的 WXML 面板和 Styles 面板来检查其渲染后的 DOM 结构，找到可以被修改的内部类名或伪元素。
• 步骤：
  1. 在 wxml 中放置一个 checkbox。
  2. 在开发者工具中，选中 checkbox 元素。
  3. 在右侧的 WXML 面板中展开 checkbox 的内部结构，通常会看到 wx-checkbox-input 这样的类名。
  4. 在 Styles 面板中，查看这些内部类名或伪元素（如 ::before, ::after）的默认样式。

---