以下是一个简单的自定义组件示例：
1. 创建自定义组件文件夹：在小程序的目录结构中，创建一个文件夹来存放自定义组件。例如，创建一个名为 components 的文件夹。
2. 创建自定义组件文件：在 components 文件夹中创建一个自定义组件的文件夹，例如 my-component，并在该文件夹中创建以下文件：
- my-component.wxml：组件的模板文件
- my-component.wxss：组件的样式文件
- my-component.js：组件的逻辑文件
- my-component.json：组件的配置文件
以下是一个示例的自定义组件：
<!-- components/my-component/my-component.wxml -->
<view class="my-component">
<text>{{content}}</text>
</view>
/* components/my-component/my-component.wxss */
.my-component {
font-size: 16px;
color: #333;
}
// components/my-component/my-component.js
Component({
properties: {
content: {
type: String,
value: 'Hello, this is my custom component!'
}
}
});
// components/my-component/my-component.json
{
"component": true
}
3. 在页面中使用自定义组件：在需要使用自定义组件的页面的 .wxml 文件中，通过 <my-component> 标签引入自定义组件：
<!-- pages/index/index.wxml -->
<view>
<my-component content="This content is from the custom component"></my-component>
</view>
这个示例中，my-component 是一个简单的自定义组件，它接受一个名为 content 的属性，并在组件内部显示该属性的值。
通过这种方式，你可以在多个页面中重复使用这个自定义组件，提高代码的可维护性。当然，这只是一个简单的例子，实际应用中你可以根据需要创建更复杂的自定义组件。
转载请注明出处：http://www.pingtaimeng.com/article/detail/761/微信小程序