微信小程序 --- 自定义组件

最新推荐文章于 2025-04-09 19:05:18 发布

前端贾公子

最新推荐文章于 2025-04-09 19:05:18 发布

阅读量4.2k

点赞数 43

分类专栏： 2024 -- 微信小程序文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.youkuaiyun.com/qq_63358859/article/details/136302412

版权

自定义组件

1. 创建-注册-使用组件

组件介绍

小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；

也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

开发中常见的组件有两种:

公共组件：将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用
页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护

如果是公共组件，建议将其放在小程序的目录下的 components 文件夹中

如果是页面组件，建议将其放在小程序对应页面目录下，当然你也可以放到页面的 components 文件夹中

同时建议：一个组件一个文件夹，文件夹名称和组件名称保持一致

📌 注意事项：

自定义组件的需要在 json 文件中需要配置 component 字段设为 true

自定义组件通过 Component 构造器进行构建，在构造器中可以指定组件的属性、数据、方法等

创建自定义组件：

创建组件的步骤很简单，以公共组件为例，创建的步骤如下：

在小程序的目录下新建 components 文件夹
在 components 文件夹上，点击右键，选择新建文件夹 ，然后输入文件夹名称，我们建议文件夹的名称和组件的名称保持一致，这样方便后期对组件进行维护。我们这里新的的组件名称叫做：custom-checkbox
在新建的组件文件夹上，点击右键，选择新建 Component，然后输入组件的名称，组件的名称建议和文件夹保持一致
此时就已经创建了一个功能组件

在这里插入图片描述
使用自定义组件

开发中常见的组件主要分为公共组件和页面组件两种，因此注册组件的方式也分为两种：

全局注册：在 app.json 文件中配置 usingComponents 节点进行引用声明，注册后可在任意组件使用
局部注册：在页面的 json 文件中配置 usingComponents 节点进行引用声明，只可在当前页面使用

在这里插入图片描述

在配置 usingComponents 节点进行引用声明时，需要提供自定义组件的标签名和对应的自定义组件文件路径，语法如下：

{
   
  "usingComponents": {
   
    "自定义组件的标签名": "自定义组件文件路径"
  }
}

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

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

<!--pages/index/index.wxml-->

<view>
  <!-- 将导入的自定义组件当成标签使用 -->
  <custom-checkbox
                   />
</view>

2. 自定义组件-数据和方法

在组件的 .js 中，需要调用 Component 方法创建自定义组件，Component 中有以下两个属性：

data 数据：组件的内部数据

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

落地代码：

➡️ components/custom-checkbox/custom-checkbox.wxml

<!--components/custom-checkbox/custom-checkbox.wxml-->
<!-- <text>我是自定义组件</text> -->

<view class="custom-checkbox-container">
  <view class="custom-checkbox-box">
    <checkbox checked="{
    { isChecked }}" bindtap="updateChecked" />
  </view>
</view>

➡️ components/custom-checkbox/custom-checkbox.wxss

/* components/custom-checkbox/custom-checkbox.wxss */

.custom-checkbox-container {
   
  display: inline-block;
}

➡️ components/custom-checkbox/custom-checkbox.js

Component({
   

  /**
   * 组件的初始数据：用来定义当前组件内部所需要使用的数据
   */
  data: {
   
    isChecked: false
  },

  /**
   * 组件的方法列表：在组件中，所有的事件处理程序都需要写到 methods 方法中
   */
  methods: {
   
    
    // 更新复选框的状态
    updateChecked () {
   

      this.setData({
   
        isChecked: !this.data.isChecked
      })

      console.log(this.data.isChecked)
    }

  }
  
})

➡️ app.json

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

➡️ index.wxml

<custom-checkbox />

<view class="line"></view>

<custom-checkbox />

3. 自定义组件-属性

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

📌 注意事项：

设置属性类型需要使用 type 属性，属性类型是必填项，value 属性为默认值

属性类型可以为 String、Number、Boolean、Object、Array ，也可以为 null 表示不限制类型