支付宝小程序框架自定义组件·介绍

自定义组件功能可将需要复用的功能模块抽象成自定义组件，从而在不同页面中复用，更可以将自定义组件发布到 NPM 上，从而在不同小程序中进行复用，NPM 的使用参见 NPM 包管理。

使用须知

小程序基础库从 1.7.0 版本开始支持自定义组件功能。通过调用 my.canIUse('component') 可判断自定义组件功能是否可在当前版本使用；从 1.14.0 版本开始，自定义组件有了较大改动，支持 component2 相关功能，通过调用 my.canIUse('component2') 可判断新自定义组件功能是否可在当前版本使用， component2 相关功能如下：

新增 onInit、deriveDataFromProps生命周期函数 ;
支持使用 ref获取自定义组件实例。

使用 component2 的相关功能，需要在 IDE 中的详情 > 项目配置 中，勾选 启用 component2 编译 。

创建并使用自定义组件

与 Page 类似，自定义组件也由 axml、js、json、acss 4 个部分组成。

创建并使用自定义组件有以下 4 个步骤：

新建自定义组件文件夹。
在 .json 文件中声明自定义组件。
使用 Component 函数，注册自定义组件。
使用自定义组件。

以下讲述如何创建最基本的自定义组件。

新建自定义组件文件夹

打开一个现有项目中（或者在 IDE 中，新建一个官方提供的 blank 项目），在 IDE 左侧文件树先新建一个 components 文件夹，用于存放所有组件，文件夹名字可以任意修改。在 components 文件夹的右击菜单中，选择新建小程序组件，输入组件名（例如 index，以下示例均以组件名 index 为例），IDE 会自动生成自定义组件所需的几个文件，如下所示：

Image 5.png

Image 7.png

Image 8.png

声明自定义组件

组件配置文件 index.json 用于声明当前目录是个自定义组件。

// /components/index/index.json
{
  "component": true
}

注册自定义组件

组件注册 index.js 用于注册一个组件对象。

// /components/index/index.js
Component({
  mixins: [], // minxin 方便复用代码
  data: { x: 1 }, // 组件内部数据
  props: { y: 1 }, // 可给外部传入的属性添加默认值
  didMount(){}, // 生命周期函数
  didUpdate(){},
  didUnmount(){},
  methods: {   // 自定义方法
    handleTap() {
      this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
    }, 
  },
})

组件模板 index.axml 和组件样式 index.acss（可选）：定义组件模板和样式。其中，样式文件可选。

<!-- /components/index/index.axml -->
<view>
  HI, My Component
</view>

使用自定义组件

声明好一个组件后，即可在其他页面上使用。

先在页面配置中说明要使用哪个自定义组件，主要指定组件标签名字和组件所在路径。

// /pages/index/index.json
{
  "usingComponents": {
    "my-component":"/components/index/index"
  }
}

然后在页面中引用组件即可。

<!--  /pages/index/index.axml -->
<view>
  this is a blank page
</view>
<my-component />