抖音小程序——自定义组件

自定义组件需要4个文件构成,分别是jsonttmlttssjs 4 个文件。

自定义组件,首先需要在 json 文件中进行自定义组件声明。

json文件

如下:

{
  "component": true
}

ttml文件

ttml部分和其他的页面的一样。

ttss文件

ttss部分也是和其他页面的ttss部分一样。

js文件

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

组件的属性值和内部数据将被用于组件 ttml 的渲染,都是外部传入的。

Component({
  properties: {
    // 这里定义了 headerText 属性,属性值可以在组件使用时指定
    headerText: {
      type: String,
      value: "默认标题文案"
    }
  },
  data: {
    // 组件内部数据
    defaultStates: {}
  },
  methods: {
    // 自定义方法
    customMethod: function() {}
  }
});

使用自定义组件

使用自定义组件的时候,要在使用页面的 json文件进行引用声明,声明组件名称和路径。名称节点标签名只能是小写字母、中划线和下划线的组合。组件之间也可以引用组件。

例如:

{
  "usingComponents": {
    "my-component": "path/to/a/custom/component"
  }
}

在使用的ttml页面:

<my-component header-text="My Title"></my-component>

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注