使用自定义组件的步骤如下:
- 创建自定义组件:在小程序项目根目录下的
components
文件夹中创建一个文件夹,然后在该文件夹中创建一个.json
文件、一个.wxml
文件和一个.js
文件,这三个文件分别对应组件的配置、模板和逻辑。 - 在需要使用自定义组件的页面中,使用
usingComponents
属性引入组件:在页面的.json
文件中,使用usingComponents
属性引入自定义组件。例如,如果自定义组件的文件夹名为my-component
,则在页面的.json
文件中添加以下代码:
"usingComponents": { "my-component": "/path/to/my-component" }
- 在页面中使用自定义组件:在页面的
.wxml
文件中使用自定义组件,例如:
<my-component prop1="{{prop1}}" prop2="{{prop2}}" bind:eventName="handleEvent" />
- 注意,
prop1
和prop2
是组件的属性,bind:eventName
是组件的事件,可以在组件的.js
文件中定义处理函数。 - 编写自定义组件的逻辑:在自定义组件的
.js
文件中编写逻辑,可以在Component
方法中定义组件的属性、数据、方法和事件。例如,以下代码定义了一个名为my-component
的自定义组件:
Component({ properties: { prop1: { type: String, value: '' }, prop2: { type: Number, value: 0 } }, data: { data1: 'data1' }, methods: { method1: function () { console.log('method1') } }, lifetimes: { created: function () { console.log('created') } }, pageLifetimes: { show: function () { console.log('show') } } })
- 这里定义了两个属性
prop1
和prop2
,一个数据data1
,一个方法method1
,以及两个生命周期函数created
和show
。以上代码只是作为示例,实际情况中可以根据需求定义自己的组件。