在小程序开发过程中小程序自定义组件封装，为了提高代码的可复用性和维护性小程序自定义组件封装，通常会进行组件封装。本文将以小程序自定义组件的封装为主线，详细讲解如何创建一个包含标题和内容的组件，并附带一些常见的技巧和注意事项。
一、创建自定义组件
1. 创建组件文件夹小程序自定义组件封装：
首先，在项目的 `components` 文件夹中创建一个新的组件文件夹，比如 `my-title-content`。
```
components/
├── my-title-content/
│ ├── my-title-content.js
│ ├── my-title-content.json
│ ├── my-title-content.wxml
│ └── my-title-content.wxss
```
2. 编写组件的 JS 文件：
在 `my-title-content.js` 中定义组件的数据、方法和属性。
```javascript
Component({
properties: {
title: {
type: String,
value: ''
},
content: {
type: String,
value: ''
}
},
data: {
// 这里可以定义一些组件内部的数据，如果需要的话
},
methods: {
// 可以定义一些组件内部的方法，如果需要的话
}
});
```
3. 编写组件的 JSON 文件：
在 `my-title-content.json` 中声明组件的配置信息。
```json
{
"component": true,
"usingComponents": {} // 如果该组件使用了其小程序自定义组件封装他组件或库，可以在这里声明
}
```
4. 编写组件的 WXML 文件：
在 `my-title-content.wxml` 中编写组件的模板结构。这里我们假设标题和内容分别用 `
```xml
```
5. 编写组件的 WXSS 文件：
在 `my-title-content.wxss` 中编写组件的样式。这里我们假设标题和内容有不同的样式。
```css
.container {
padding: 10px;
}
.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.content {
font-size: 16px;
color: 666;
}
```
二、使用自定义组件
接下来，我们需要在页面中引入并使用这个自定义组件。假设我们在 `pages/index/index.wxml` 中使用这个组件。首先，需要在该页面的 `index.json` 中声明对自定义组件的使用。然后，在页面的 WXML 文件中引入并使用它。具体步骤如下：
1. 声明自定义组件：在 `index.json` 中添加自定义组件的声明。由于我们的组件在 `components` 文件夹中，路径为 `../components/my-title-content/my-title-content`。同时，指定该组件的位置属性（以下称为 "插槽"）。这里的插槽是 `default`，意味着该组件没有子插槽。如果有子插槽，可以在这里指定多个位置。例如：`"location": "slot"`。不过，对于没有子插槽的组件，可以省略这个属性。所以，`index.json` 内容如下：
```json
{
"usingComponents": {
"my-title-content": "/components/my-title-content/my-title-content" // 这里没有子插槽，所以不需要 location 属性。如果需要有子插槽的话，可以使用 location 属性进行定义。例如："location": "slot" 。这里为了简单起见，就省略了这一部分说明。只需要知道，如果使用了子插槽的话，需要在 JSON 文件中声明即可。不过一般情况下，大多数自定义组件都是没有子插槽的。因此我们可以忽略这部分内容。简单来说就是只声明路径即可。"}}}" + ""}}}" 2) 在页面 WXML 中引入并使用该自定义组件: 在 `index.wxml` 中添加以下代码来引入并使用我们的自定义组件。请注意我们在引入时传入了 title 和 content 属性值: 如下是一个简单的例子: """`
