微信小程序注册组件

JAY.LIN 收录于未分类

2025-03-06 约 777 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146082178

微信小程序注册组件

在微信小程序中注册组件分为自定义组件的创建和全局/局部注册，下面为你详细介绍具体步骤和示例。

自定义组件的创建

自定义组件由四个文件组成，分别是 .js （脚本文件）、 .json （配置文件）、 .wxml （结构文件）和 .wxss （样式文件），这些文件的命名最好保持一致，便于管理。以下是创建一个简单自定义组件的示例：

1. 创建组件目录和文件

假设要创建一个名为 my-component 的自定义组件，在项目中创建一个 components 目录，然后在该目录下创建 my-component 文件夹，在 my-component 文件夹中创建以下四个文件：

components
└── my-component
    ├── my-component.js
    ├── my-component.json
    ├── my-component.wxml
    └── my-component.wxss

2. 编写组件文件内容

my-component.js

Component({
  // 组件的属性列表
  properties: {
    title: {
      type: String,
      value: '默认标题'
    }
  },
  // 组件的初始数据
  data: {
    content: '这是组件的内容'
  },
  // 组件的方法列表
  methods: {
    showInfo() {
      console.log('点击了组件');
    }
  }
})

my-component.json

{
  "component": true,
  "usingComponents": {}
}

"component": true 表明这是一个组件配置文件。

my-component.wxml

<view>
  <text>{{title}}</text>
  <text>{{content}}</text>
  <button bindtap="showInfo">点击我</button>
</view>

my-component.wxss

view {
  padding: 20px;
  border: 1px solid #ccc;
}

组件的注册

组件注册分为局部注册和全局注册两种方式，你可以根据实际需求选择合适的注册方式。

1. 局部注册

局部注册是指在某个页面中使用组件时，只在该页面的配置文件中进行注册，组件只能在该页面使用。

页面配置文件（如 pages/index/index.json ）

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

页面使用（如 pages/index/index.wxml ）

<my-component title="自定义标题"></my-component>

2. 全局注册

全局注册是指在项目的 app.json 中进行注册，注册后该组件可以在项目的所有页面中使用。

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

完成上述步骤后，你就可以在任意页面使用 my-component 组件了。例如：

<my-component title="全局注册的组件标题"></my-component>

通过以上步骤，你就可以在微信小程序中成功创建并注册自定义组件。