要在小程序中新建一个组件,需要按照以下步骤操作:
- 在小程序的项目目录中找到
components
文件夹,如果不存在则新建一个。 - 在
components
文件夹中新建一个文件夹,该文件夹为组件的名称(例如my-component
)。 - 在新建的组件文件夹中,点击右键新建
components,
名字输入index回车就会出现四个文件。与普通页面有"component":true,这个配置项(Json文件中),JS文件也有区别 properties写属性 - 在
my-component.js
中,编写组件的逻辑代码。通常需要使用Component()
函数来定义组件。 - 在
my-component.wxss
中,编写组件的样式代码。 - 在需要使用组件的页面的
.json
文件中,添加组件的引用。例如,如果要在index
页面使用my-component
组件,可以在index.json
中添加:
{
"usingComponents": {
"my-component": "../components/my-component/my-component"
}
}
7.在需要使用组件的页面的 .wxml
文件中,使用组件的自定义标签。例如,在 index.wxml
中添加:
<my-component></my-component>
8.对于需要使用组件肯定是有相同的功能或样式,内容肯定不一样,这时我们就需要使用属性
//在my-components的js文件中
properties:{
title:{
type:string,//传入类型
value:"",//默认值
},
desc:{
type:string,//传入类型
value:"",//默认值
}
}
//然后在my-components的wxml文件中
插入{{title}}和{{desc}}
//最后在需要的页面 组件使用中传入
<my-component title="要填入的值" desc="{{变量}}"></my-component>
这样就完成了在小程序中新建一个组件的过程。可以在需要的页面上使用该组件,并根据实际需求编写组件的逻辑和样式。