小程序开发
原生微信小程序
自定义组件

组件的创建与引用

# 组件的创建与引用

在微信小程序中，组件是一种可复用的 UI 单元，它可以封装模板、样式和逻辑，从而实现模块化开发。组件能够在不同页面之间共享使用，提升代码的复用性和维护性。开发者可以创建自定义组件，并将它们应用在页面中。组件的引用方式有局部引用和全局引用，开发者可以根据使用场景选择合适的方式。

# 1. 创建组件

创建组件是微信小程序开发中非常重要的一步。通过创建自定义组件，开发者可以将特定功能封装为模块，在多个页面中重复使用。

# 1.1 创建组件的步骤

在项目根目录下创建 components 文件夹：
- 在项目的根目录中，右键点击鼠标，选择“新建文件夹”，并命名为 components，用于存放组件文件。
在 components 文件夹下创建子文件夹：
- 在 components 文件夹下，右键新建文件夹，并命名为 test。该文件夹用于存放一个具体组件的所有文件。
新建组件：
- 选中 components/test 文件夹，右键点击“新建 Component”选项，输入组件的名称并回车。这时，开发工具会自动生成四个文件，分别是：
  - .js：用于定义组件的逻辑（如数据和事件处理）。
  - .json：用于定义组件的配置信息。
  - .wxml：用于定义组件的结构。
  - .wxss：用于定义组件的样式。

组件目录结构如下图所示：

组件目录结构

# 1.2 目录结构说明

为了保证项目结构清晰，建议将每个组件存放在单独的文件夹中，并将组件的四个文件放在同一文件夹内。这样可以方便开发者在大型项目中管理和维护组件。

例如，components/test/ 文件夹下包含如下四个文件：

test.js：组件的逻辑和数据处理。
test.json：组件的配置信息。
test.wxml：组件的页面结构。
test.wxss：组件的样式定义。

# 2. 引用组件

组件创建后，开发者需要在页面中引用它们。微信小程序支持两种引用方式：

局部引用：组件只能在当前页面使用。
全局引用：组件可以在所有页面中使用。

# 2.1 局部引用组件

局部引用是指组件仅在某个特定页面中使用。为了实现局部引用，需要在该页面的 .json 配置文件中进行配置。

步骤：

打开需要引用组件的页面对应的 .json 文件。
在该文件中使用 usingComponents 字段引入组件，并指定组件的路径和名称。

示例代码（在 index.json 文件中引用 test 组件）：

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

1
2
3
4
5

在对应的 .wxml 文件中，通过组件名称 <test /> 使用组件：

<test />

局部引用只对当前页面有效，其他页面无法使用该组件，除非在每个页面中都单独引用。

如下图所示为局部引用组件的代码结构：

局部引用组件

# 2.2 全局引用组件

全局引用是指将组件引入到小程序的 app.json 全局配置文件中，这样该组件可以在小程序的所有页面中使用。全局引用适用于那些需要频繁使用的组件，如导航栏、按钮等。

步骤：

打开小程序的 app.json 文件。
在 app.json 中通过 usingComponents 字段全局引用组件，并指定组件的路径和名称。

示例代码（在 app.json 文件中引用 test 组件）：

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

1
2
3
4
5

在任何页面的 .wxml 文件中都可以通过组件名称 <test /> 使用组件：

<test />

如下图所示为全局引用组件的代码结构：

全局引用组件

# 2.3 全局引用与局部引用的对比

开发者可以根据组件的使用频率和范围选择合适的引用方式：

全局引用：
- 适用于在多个页面中频繁使用的组件，如通用按钮、头部导航栏等。
- 优点：在任意页面中都能使用，简化了页面的引用配置。
- 缺点：即使有些页面不使用该组件，也会加载它，可能会带来性能上的开销。
局部引用：
- 适用于只在特定页面中使用的组件，如特定页面的表单组件。
- 优点：只有在需要的页面中加载组件，减少了不必要的加载开销。
- 缺点：每个需要使用组件的页面都要单独配置引用。

# 3. 组件和页面的区别

虽然组件和页面在结构上看起来相似，它们都是由 .js、.json、.wxml 和 .wxss 这四个文件组成，但它们有着本质的区别。

# 3.1 组件的 `.json` 文件

页面的 .json 文件：页面的 .json 文件中只用于配置页面的标题、下拉刷新、页面背景等。
组件的 .json 文件：组件的 .json 文件中需要声明 "component": true 属性，表示该文件是组件而非页面。

示例代码：

{
  "component": true
}

1
2
3

# 3.2 组件的 `.js` 文件

页面的 .js 文件：页面通过 Page() 函数来定义，包含页面的数据、生命周期函数、事件处理函数等。
组件的 .js 文件：组件通过 Component() 函数来定义，除了包含 properties、data 和 methods 外，还支持自定义事件和 slot 插槽。

示例代码（组件的 .js 文件）：

Component({
  properties: {
    myProperty: {
      type: String,
      value: 'default value'
    }
  },
  data: {
    // 组件内部数据
  },
  methods: {
    customMethod: function() {
      console.log('这是组件的方法');
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3.3 组件的事件处理函数

页面的事件处理函数：事件处理函数直接定义在 Page() 函数的对象中，不需要额外的配置。
组件的事件处理函数：组件的事件处理函数必须定义在 methods 节点中。

例如，定义组件的点击事件处理函数：

methods: {
  handleClick: function() {
    console.log('组件被点击');
  }
}

1
2
3
4
5

总结来说，组件和页面的主要区别在于：

组件需要声明 "component": true 属性。
组件的逻辑需要通过 Component() 函数定义。
组件的事件处理函数必须在 methods 节点中定义。

总结

微信小程序中的组件为开发者提供了模块化的开发方式。通过创建自定义组件，开发者可以在多个页面中复用相同的功能模块。根据组件的使用场景，开发者可以选择局部引用或全局引用，以达到最佳的开发效果。同时，了解组件和页面的区别能够帮助开发者更好地设计项目架构，提升小程序的可维护性和代码复用性。

编辑此页

上次更新: 2025/01/31, 00:08:39

← WXS脚本组件样式→

组件的创建与引用

# 组件的创建与引用

# 1. 创建组件

# 1.1 创建组件的步骤

# 1.2 目录结构说明

# 2. 引用组件

# 2.1 局部引用组件

# 2.2 全局引用组件

# 2.3 全局引用与局部引用的对比

# 3. 组件和页面的区别

# 3.1 组件的 .json 文件

# 3.2 组件的 .js 文件

# 3.3 组件的事件处理函数

# 3.1 组件的 `.json` 文件

# 3.2 组件的 `.js` 文件