手把手教你实现智能小程序自定义组件

最新推荐文章于 2025-12-04 17:38:03 发布

原创最新推荐文章于 2025-12-04 17:38:03 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #tyml #自定义组件 #小程序 #iot #App

本文介绍了如何在开发中创建和使用自定义组件，包括组件的结构（json,tyml,tyss,js），声明和注册过程，以及如何在页面中引用和传递属性。通过实例展示了自定义组件的模板、样式和数据管理。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

创建自定义组件

类似于页面，一个自定义组件由 json、tyml、tyss 和 js 4 个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明，将 component 字段设为 true，可将这一组文件设为自定义组件。

{
  "component": true
}

同时，还要在 tyml 文件中编写组件模板，在 tyss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项，参见组件模板和样式。

示例代码：

<!-- 这是自定义组件的内部TYML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 tyml 的渲染，其中，属性值可由组件外部传入。更多细节参见 Component 构造器。

示例代码：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {},
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {},
  },
});

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时，需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

这样，在页面的 tyml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

示例代码：

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

自定义组件的 tyml 节点结构在与数据结合之后，将被插入到引用位置内。