智能小程序组件介绍、配置、发布全流程

组件介绍

组件功能可将需要复用的功能模块抽象成自定义组件，从而在不同页面中复用，更可以将自定义组件发布到 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 函数。

组件结构

<!-- 文件：/components/foo/index.tyml -->
<view> HI, My Component </view>

配合样式文件定制组件的显示效果。

使用组件

创建组件后，通过页面配置或全局配置（app.json）中的 usingComponents 进行引用。

{
  "usingComponents": {
    "foo": "/components/foo/index"
  }
}

引用后即可在对应的页面结构中，通过 <foo /> 标签进行使用。

<view>
  <text>使用自定义组件</text>
  <foo></foo>
</view>

组件配置

[componentPath].json 文件用于标识当前为自定义组件，因此必须存在 component: true 的声明。自定义组件可互相引用。

usingComponents

引用其他组件，组件路径支持：

1. 绝对路径形式，以 / 开头，表示小程序源码目录；
2. 相对路径形式，以 . 开头，基于当前 json 文件所在目录；
3. npm 三方包。

{
  "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

.npmignore

npm 忽略发布的文件列表。

app.*
pages/
project.tuya.json

package.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

1. 打包组件

运行 npm run dist，生成生产环境构建目录。

2. 注册 npm 账号

进入 npm 官网，注册账号。

注意：若验证邮箱不通过，发布时会出现 E403 错误。

3. 登录账号并发布

1. 登录注册的账号： npm login\npm adduser
2. 查看是否登录成功： npm whoami
3. 发布组件包： npm publish 发布成功后，可在 npm 的个人中心的 Packages 里看到。

使用 npm 组件

安装包到项目中

npm install your-custom-component

引用组件

{
  "usingComponents": {
    "foo": "your-custom-component/foo/index"
  }
}