组件功能可将需要复用的功能模块抽象成自定义组件,从而在不同页面中复用,更可以将自定义组件发布到 NPM 上,从而在不同小程序中进行复用。
每个小程序组件一般包含以下文件。
[componentPath].js
:注册组件[componentPath].tyml
:组件结构[componentPath].json
:组件配置[componentPath].tyss
:组件样式(可选)[componentPath].rjs
:组件RJS
渲染文件(可选)必须存在组件配置文件,并且进行 "component": true
声明。
// 文件:/components/foo/index.json
{
"component": true
}
小程序组件必须使用 Component() 函数 注册且只注册一次。
// 文件:/components/foo/index.js
Component({
options: {}
data: { x: 1 }, // 组件内部数据
lifetimes: {}, // 组件生命周期
methods: {
// 自定义方法
handleTap() {
this.setData({ x: this.data.x + 1 }); // 可使用 setData 改变内部属性
},
},
});
更多详细内容,请参考 Component 函数。
HI, My Component
配合样式文件定制组件的显示效果。
创建组件后,通过页面配置或全局配置(app.json
)中的 usingComponents
进行引用。
{
"usingComponents": {
"foo": "/components/foo/index"
}
}
引用后即可在对应的页面结构中,通过
标签进行使用。
使用自定义组件
[componentPath].json
文件用于标识当前为自定义组件,因此必须存在 component: true
的声明。自定义组件可互相引用。
引用其他组件,组件路径支持:
/
开头,表示小程序源码目录;.
开头,基于当前 json 文件所在目录;{
"usingComponents": {
"foo": "/absolute/foo/index",
"foo": "./relative/foo/index",
"foo": "package/es/foo/index"
}
}
注意:路径地址必须精确到文件名,不可省略缺省 index。
{
"component": true,
"usingComponents": {
"li": "/components/custom-li/index"
}
}
智能小程序原生支持引入第三方 npm 模块。因此,自定义组件也支持发布到 npm,方便开发者复用和分享。
以下是发布组件的推荐文件结构,仅供参考。
├── foo // 单个组件文件夹
│ ├── index.js
│ ├── index.json
│ ├── index.tyml
│ ├── index.tyss
├── pages // 页面用于开发调试预览
│ ├── index.js
│ ├── index.json
│ ├── index.tyml
│ ├── index.tyss
├── app.js
├── app.json
├── app.tyss
├── project.tuya.json
├── package.json
└── .npmignore
npm 忽略发布的文件列表。
app.*
pages/
project.tuya.json
{
"name": "your-custom-component",
"version": "1.0.0",
"description": "your-custom-component",
"repository": {
"type": "git",
"url": "your-custom-component-repository-url"
},
"files": ["es"],
"keywords": ["custom-component", "smart-program"]
}
运行 npm run dist
,生成生产环境构建目录。
进入 npm 官网,注册账号。
注意:若验证邮箱不通过,发布时会出现 E403 错误。
Packages
里看到。
npm install your-custom-component
{
"usingComponents": {
"foo": "your-custom-component/foo/index"
}
}