快速开始

​

案例场景

​

实现效果

​

操作步骤

​

步骤 1：创建自定义组件

1. 宜搭应用 >> 应用设置 >> 组件管理 >> 组件中心（操作如下图所示）

2. 新增组件 >> 填写组件名称、组件类型、组件标识等组件属性 >> 确定（操作如下图所示）

​

步骤 2：开发调试自定义组件

1. 组件中心 >> 我的组件 >> 找到需要调试的组件 >> 开发（操作如下图所示）

2. 前面有说道组件由视图和属性构建，当开发一个组件时需要先抽象出这个组件所需要的属性，我先来构建组件的属性，该组件只需要一个文本内容的属性，属性配置 >> 属性定义，添加一个文本内容的属性，名称为 content，属性类型选文本，设置器选 textSetter。

3. 组件属性构建完成后，来构建组件的视图，添加所需的宜搭普通组件到画布中（本案例所需组件为两个文本组件。分别命名为「文本」及「复制」），并进行基本属性的配置，将文本组件的内容进行变量绑定，绑定为刚才构建的属性 props.content, 这样就可以在运行时显示传过来的属性值。（操作如下图所示）

4. 为按钮组件进行动作设置，以文本复制效果。选中「复制」文本 >> 新建动作 >> onCopyText 点击。（操作如下图所示）

5. 在 JS 面板进行复制逻辑的编写。（如下图所示）

export function onCopyText() {
  const input = document.createElement('input');
  input.setAttribute('readonly', 'readonly');
  // 通过 this.props.xxx 获取属性
  input.setAttribute('value', this.props.content);
  document.body.appendChild(input);
  input.select();
  input.setSelectionRange(0, 9999);
  document.execCommand('copy');
  document.body.removeChild(input);
  this.utils.toast('已成功复制到剪贴板');
}

6. 保存 >> 预览组件

7. 发布 >> 填写组件发布的版本号及相关说明 >> 确定。（操作如下图所示）

8. 发布成功会看到提示。（操作如下图所示）在实际的组件开发中，保存后即可安装组件的开发版(0.1.0)进行实时调试，当组件完成了开发后才需要发布正式版本。

​

步骤 3：安装自定义组件

1. 表单设计页 >> 组件库 >> 自定义组件 >> 组件管理。（操作如下图所示）

2. 组件管理页面 >> 组件列表 >> 选择需要安装的自定义组件 >> 安装。（操作如下图所示）

3. 选择安装版本及安装范围 >> 安装。（操作如下图所示）

​

步骤 4：使用自定义组件

1. 表单设计页 >> 组件库 >> 自定义组件 >> 选择需要的组件 >> 拖拽至画布即可。（操作如下图所示）

​

步骤 5：查看/修改组件信息

1. 应用设置 >> 组件管理 >> 组件中心（操作如下图所示）

2. 选择需要查看/修改详情的组件 >> 详情（操作如下图所示）

​

自定义组件属性

​

自定义组件属性配置入口

​

自定义组件属性配置说明

• 双端搭建：双端搭建为配置开关，开启即可进行 PC 端及移动端完全分离，分别设计，以满足双端适配的个性业务需求。
• 属性定义（ propTypes ）：可对自定义组件的标题、名称、类型（即数据格式）、默认值等基本属性进行自定义，也可对组件是否隐藏（组件隐藏与否的状态）、**当变化时（组件显示值的不同）**进行事件绑定，以满足多种多样的业务需求。详细介绍请参见，组件属性配置。
• 生命周期：自定义组件的生命周期分为组件渲染完成（componentDidMount）、组件更新完成（componentDidUpdate）、组件捕捉错误（componentDidCatch）、组件销毁前（componentWillUnmount**）**四个阶段，在不同的生命周期中进行不同的逻辑编写，以满足复杂的业务需求。
• 唯一标识：同宜搭普通组件一样，自定义组件也拥有唯一标识属性，作为组件的唯一识别码，由系统自动生成，一般不需要更改。用于宜搭后台存储数据，代码绑定等。