自定义组件操作说明

1、什么是自定义组件

APICloud为开发者提供了在可视化模式下创建自定义组件的能力,开发者可将页面内的功能模块封装成自定义组件,在项目中的各个页面进行使用,提升代码的可复用性,提高开发效率,有效增强代码的可维护性。

2、自定义组件使用场景

当目前的APICloud Studio内置组件无法满足应用开发的需求时,开发者可基于系统组件自行开发贴近实际业务场景的组件,在同一个项目中进行重复使用,后续的版本可以提交到云端在不同的项目共享使用,也可以发布到组件市场,方便开发者复用和分享。

3、如何创建自定义组件

3.1、创建自定义组件

在侧边栏工作空间,右键单击components文件夹,打开自定义组件窗口,填写组件ID、组件名称和组件描述,提交成功后,将在components文件夹下创建该组件的目录文件。

图片说明 图片说明 图片说明

3.2、组件属性编辑

在左侧目录,点击打开component-id.stml组件入口文件,进入可视化模式,自定义组件的编辑窗口,与可视化开发模式类似,左侧是组件区、中间的画布区,右侧是属性编辑区。组件的属性编辑操作,增加自定义属性的功能,使自定义组件更贴合实际业务需要。

图片说明

自定义组件必须基于系统组件进行创建,按实际开发需要,我们从左侧的系统组件区拖动组件至画布中,选中组件可以对系统组件的属性、样式和事件进行配置。

点击画布的空白区域,右侧可以对当前自定义组件的属性进行编辑,点击“添加属性”打开编辑窗口,编辑属性的所有配置项,支持对自定义组件添加多个属性,编辑和删除。

图片说明

属性的各配置项如下:

属性名称:必填,使用全小写,多个单词使用-(中划线)分割,自动生成props.xxx代码,属性名称具有唯一性。

属性提示:必填,建议中文,用于鼠标移动到属性的中文提示,属性提示建议中文,简洁易懂。

属性类型:共四种,文本、数字、布尔、对象。不同的属性类型拥有不同的属性设置方式,满足不同的属性编辑需求和数据处理方式。如文本类型包括5种属性设置方式:文本输入、文件上传、图标选择、颜色选择、下拉选项。

默认值:是指使用组件时,组件属性默认的显示的字段。

3.3、组件属性关联

选中自定义组件中的某一个系统组件,可以对系统组件的属性进行变量的绑定,从而实现对自定义组件中系统组件的控制,如将自定义组件的属性值做为自定义组件内某一个系统组件的占位字符。(如下图所示)

图片说明 图片说明

3.4、生命周期函数编辑

自定义组件的生命周期,是指组件自身的一些可自执行的方法,这些方法会在特殊的时间点或遇到一些特殊页面行为时被自动触发而执行,开发者可以在不同的生命周期中进行不同的逻辑编写,以满足复杂的业务需求。

自定义组件的生命周期函数名及触发时机如下:

  • Install:组件被挂载到真实DOM(或App原生界面)之前
  • installed:组件被挂载到真实DOM(或App原生界面)之后
  • render:组件开始渲染
  • uninstall:组件从真实DOM(或App原生界面)移除之前
  • beforeUpdate:组件更新之前
  • updated:组件更新完成
  • beforeRender:组件开始渲染之前

自定义组件时,可以在右侧对生命周期函数进行新增、编辑和删除操作,也可以直接编码代码片段,实现业务场景需求。

图片说明 图片说明

3.5、组件事件编辑

点击切换到自定义组件的事件编辑页签,点击添加事件,输入事件ID和事件说明即可,这样自定义组件的事件就定义好了

图片说明

3.6、组件事件关联

选中自定义组件中的某一个系统组件,可以将系统组件的事件绑定到自定义组件的事件,这样可以通过系统组件的事件触发自定义组件的事件。

图片说明

3.7、组件图标更换

如果想修改组件的默认图标,可以替换/components/asset文件夹下的组件名.png文件,注意:图标格式必须是png,且大小不能超过2MB,图片名称必须与组件同名,否则识别不到。替换后在可视编辑模式下就可以看到,如图。

图片说明

4、如何使用自定义组件

通过以上步骤创建的自定义组件,显示到左侧我的组件中,自定义的组件与其它内置组件一样可以拖动到画布中进行使用。

图片说明