深入理解微信小程序自定义组件：创建、引用、应用场景及与页面的区别

阿贾克斯的黎明

于 2025-01-26 22:53:53 发布

阅读量515

点赞数 24

分类专栏：前端文章标签： notepad++

本文链接：https://blog.csdn.net/m0_57836225/article/details/145372734

版权

前端专栏收录该内容

501 篇文章

订阅专栏

深入理解微信小程序自定义组件：创建、引用、应用场景及与页面的区别

在微信小程序开发中，自定义组件是一项极为实用的功能，它能有效提高代码的复用性，降低开发成本，提升开发效率。本文将深入剖析微信小程序自定义组件的各个关键方面，包括创建、引用、应用场景以及与页面的区别，并附上详细代码示例，帮助开发者全面掌握这一技术。

一、自定义组件的创建

创建自定义组件主要分为以下三个步骤：

创建 components 文件夹：在项目根目录下，通过鼠标右键新建一个名为 “components” 的文件夹。此文件夹将用于存放所有自定义组件，是管理组件的基础目录。
新建组件文件夹：在 “components” 文件夹内，再新建一个专门用于存放特定组件的文件夹。例如，创建一个名为 “test” 的文件夹，该文件夹将用于存放我们的第一个自定义组件。
生成组件文件：在新建的组件文件夹（如 “test” 文件夹）上，鼠标右键点击，选择 “新建 component” 选项。随后，输入组件名称（如 “test”）并回车确认。此时，开发工具会自动生成组件对应的四个文件，分别是：
- .js 文件：用于编写组件的逻辑代码，如数据处理、事件响应等功能。
- .json 文件：组件的配置文件，用于声明组件相关的属性和配置信息。
- .wxml 文件：组件的结构文件，类似于 HTML，用于定义组件的页面结构。
- .wxss 文件：组件的样式文件，用于设置组件的外观样式，与 CSS 功能类似。

为保证项目目录结构清晰，建议将每个组件分别存放在独立的文件夹中。这样，不同组件的文件相互隔离，便于管理和维护，避免文件混乱。

二、自定义组件的引用

组件的引用方式分为局部引用和全局引用两种，它们各自有着不同的应用场景和使用方法。

（一）局部引用

局部引用意味着组件仅能在当前被引用的页面内使用。具体引用步骤如下：

在页面.json 配置文件中引入组件：打开需要引用组件的页面的.json 配置文件（例如，若要在首页引用组件，则打开首页对应的.json 文件）。在文件中声明一个 “usingComponents” 节点，所有要使用的组件都在该节点下进行声明。“usingComponents” 的值是一个键值对，其中键是组件引用后的名称，值是组件的存放路径（路径不要带任何后缀）。例如：

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

上述代码中，“myTest1” 是自定义的引用名称，“/components/test” 是 “test” 组件的存放路径，表示从项目根目录下的 “components” 文件夹中找到 “test” 组件。
2. 在页面.wxml 中使用组件：完成配置文件的引用声明后，即可在页面的.wxml 文件中以标签形式使用组件。例如，在首页的.wxml 文件中添加如下代码：

<view>
  <myTest1></myTest1>
</view>

保存文件后，页面将显示该组件的内容。若在其他未引用该组件的页面中使用相同标签，组件内容不会被渲染，这证明了局部引用的局限性，即组件仅在当前引用页面有效。

（二）全局引用

全局引用允许组件在小程序的每个页面中使用，提高了组件的复用性。引用步骤如下：

在 app.json 全局配置文件中引入组件：打开项目的 app.json 全局配置文件，在与 “window” 节点同级的位置声明一个 “usingComponents” 节点。在该节点下进行组件引用声明，方式与局部引用类似。例如：

{
  "window": {
    // 窗口相关配置
  },
  "usingComponents": {
    "myTest1": "/components/test"
  }
}

在各页面中使用组件：完成全局引用配置后，在任何页面的.wxml 文件中都可以直接使用该组件。例如，在首页和消息页面的.wxml 文件中都可以添加如下代码来使用组件：

<view>
  <myTest1></myTest1>
</view>

保存文件后，在首页和消息页面中都能正常显示组件内容，这体现了全局引用的优势，即一次引用，多处使用。

三、应用场景选择

在实际开发中，应根据组件的使用频率和范围来选择合适的引用方式。

全局引用场景：当某个组件在多个页面中频繁使用时，建议采用全局引用方式。例如，小程序底部的导航栏组件，几乎在每个页面都需要显示，此时全局引用可以避免在每个页面的.json 文件中重复声明引用，减少代码冗余，提高开发效率和代码的可维护性。
局部引用场景：若组件仅在特定页面可能被用到，局部引用则更为合适。比如，某个页面中独有的表单提交提示组件，仅在该页面使用，对其他页面无意义，这种情况下局部引用既能满足需求，又不会增加其他页面的不必要引用，降低了代码复杂度。

四、组件和页面的区别

虽然组件和页面在表面上都由.js、.json、.wxml 和.wxss 四个文件组成，但它们在内部存在一些显著区别。

.json 文件区别：组件的.json 文件中需要声明 “component": true” 这个属性，用于表明当前是一个组件。而页面的.json 文件通常默认有 “usingComponents” 节点（用于局部引用组件），但不会有 “component": true” 属性。例如，组件的.json 文件内容可能如下：

{
  "component": true
}

.js 文件区别：组件的.js 文件中调用的是 “Component” 函数，用于定义组件的逻辑和行为。而页面的.js 文件调用的是 “Page” 函数，用于定义页面的相关配置和功能。例如，组件的.js 文件开头可能是：

Component({
  // 组件的属性、数据、方法等定义
})

页面的.js 文件开头则是：

Page({
  // 页面的数据、生命周期函数、事件处理函数等定义
})

事件处理函数区别：组件的事件处理函数需要定义在 “methods” 节点中。而页面的事件处理函数只需定义在与 “data” 节点同级的位置，与组件的处理方式不同。例如，页面的事件处理函数定义如下：

Page({
  data: {
    // 页面数据
  },
  // 事件处理函数
  handleTap: function() {
    // 处理点击事件的逻辑
  }
})

组件的事件处理函数定义如下：

Component({
  data: {
    // 组件数据
  },
  methods: {
    // 事件处理函数
    handleTap: function() {
      // 处理点击事件的逻辑
    }
  }
})

通过深入理解微信小程序自定义组件的创建、引用、应用场景及与页面的区别，并结合实际项目进行运用，开发者能够更加高效地开发出功能丰富、结构清晰的小程序应用，为用户带来更好的体验。希望本文的内容能对广大开发者有所帮助，助力大家在小程序开发领域不断探索和进步。