组件

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

官方组件库

小程序平台提供了一套符合小程序设计规范的官方 UI 组件库，已内置在小程序框架内，无需额外引入，开发者可以快速开发页面和交互。

推荐使用官方 UI 组件库开发小程序，详情参考 小程序组件文档。

自定义组件

创建自定义组件

类似于页面，一个自定义组件由 json、html、css、js 4个文件组成。

详细参见 小程序代码目录结构。

代码示例

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

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

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

引用自定义组件

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

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

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

代码示例：

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

第三方组件库

小程序兼容第三方 Vue 组件库。第三方 Vue 组件库在使用时，若为单组件或采用 export default方式导出的组件，在使用该组件的页面的/index.json内按如下方式使用：

例:
{
  "usingComponents": {
    "F2": "@antv/f2"
  }
}

或者

import F2 from '@antv/f2'

若第三方组件采用export导出，使用方式如下：

{
  "usingComponents": {
    "Button": {
      "path": "ant-design-vue",
      "type": "esm"
    }
  }
}

<div>
  <!-- 以下是对一个三方组件的引用 -->
  <Button></Button>
</div>