• 下载
  • 社区

自定义组件介绍

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

使用须知

小程序基础库从 1.7.0 版本开始支持自定义组件功能。 通过调用 my.canIUse('component') 可判断自定义组件功能是否可在当前版本使用。

从小程序基础库 1.14.0 版本开始,自定义组件有了较大改动:

  1. 新增 onInitderiveDataFromProps 生命周期函数 ;
  2. 支持使用 ref 获取自定义组件实例

可通过 my.canIUse('component2') 检测当前版本是否支持新自定义组件功能,并且,使用 component2 的相关功能,需要在 IDE 中的 详情 > 项目配置 中,勾选 启用 component2 编译

component2.png

创建并使用自定义组件

与 Page 类似,自定义组件也由 axmljsjsonacss 4 个部分组成。

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

  1. 新建自定义组件文件夹。
  2. .json 文件中声明自定义组件。
  3. 使用 Component 函数,注册自定义组件。
  4. 使用自定义组件。

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

新建自定义组件文件夹

打开一个现有项目中(或者在 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 />