:::danger 注意:文档尚未完成,可参考开发指南实验性功能

:::

简介

CoCo 编辑器有自定义控件功能,开发者可以使用 JavaScript 编写自己的控件,实现特定的功能。

比如实现密码输入框、多行文本输入框、查询天气功能等。

控件完成后也可以投稿至控件商城,参考 控件商城上架标准

自定义控件分为两种类型:

:::color3

可见控件(VisibleWidget)

也就是界面控件,可在舞台显示,一般用于用户交互,比如按钮、输入框、文本等。

文件后缀为 .jsx,比如 text.jsx

:::

:::color1

不可见控件(InvisibleWidget)

这类控件在舞台不可见,一般用于提供系统(原生)能力,所以也称为功能型控件,比如照相机控件、音频控件等。

文件后缀为.js,比如camera.js

:::

一个完整的控件大致可用下图概括:

画板

控件类型定义

:::color1 注:字段后标有“*”为可选选项

:::

控件实体定义是一个字典对象,以键值对的方式定义了控件的功能

  1. const types = {
  2. type: "MY_WIDGET",
  3. icon: "https://waddle.coco-central.cn/static/img/logo/logo-white.svg",
  4. title: "我的控件",
  5. isInvisibleWidget: true,
  6. isGlobalWidget: true,
  7. platforms: ["web", "android", "ios"],
  8. properties: [],
  9. methods: [],
  10. events: [],
  11. };

type

定义控件类型名称,作品唯一,标识不同控件

值类型:字符串

icon

定义控件图标,显示在编辑器中

值类型:字符串

title

定义控件名称,显示在编辑器中

值类型:字符串

docs*

isInvisibleWidget

定义是否为不可见控件

值类型:布尔值

参考值 true false
功能 不可见控件 可见控件

isGlobalWidget

定义是否为全局控件

值类型:布尔值

isInvisibleWidget 为 false 时,本选项值必须为 false

参考值 true false
功能 全局控件 屏幕控件

platforms*

定义控件可用平台,不包含”web”时,编辑器调试会显示“控件暂不支持网页端运行,请打包后使用”的提示,具体是否可用取决于控件的代码实现,而非该选项

值类型:列表

缺省值:["web", "android", "ios"]

参考项 “web” “android” “ios”
功能 支持网页端调试、预览、运行 支持安卓端运行 (暂未实现)

properties

定义控件的包含的属性,列表的每一项是字典

值类型:列表

  1. const types = {
  2. ...
  3. properties: [
  4. {
  5. key: 'property1',
  6. label: '属性1',
  7. valueType: 'string',
  8. editorType: 'string',
  9. checkType: 'string',
  10. defaultValue: 'Hello, world!',
  11. blockOptions: {
  12. generateBlock: true,
  13. },
  14. },
  15. ],
  16. ...
  17. };

key

定义控件属性名称,控件唯一,标识不同属性

值类型:字符串

label

定义控件属性标签,显示在积木和属性面板中

值类型:字符串

valueType

定义控件属性数据类型

值类型:字符串或多个下列参考值组成的列表

参考值 功能
“string” 字符串
“number” 数字
“color” 颜色

editorType*

定义控件属性面板中编辑器的类型

值类型:字符串

参考值 功能
“TextInput” 文本单行输入,valueType为””时string默认
“TextArea” 文本多行输入,valueType为”string”时可选
“RichTextEditor” 富文本输入,valueType为”string”时可选
“InputNumber” 数字输入,valueType为”number”时默认
“Color” 颜色输入,valueType为”color”时默认

checkType*

定义控件属性的类型检查

值类型:字符串或多个下列参考值组成的列表

参考值 功能
“string” 字符串
“number” 数字
“color” 颜色

defaultValue

定义控件属性默认值

值类型:valueType

blockOptions*

定义属性,属性积木选项

值类型:字典

generateBlock*

定义是否生成设置、获取属性的积木

值类型:布尔值

参考值 功能
true(缺省) 积木盒中显示积木
false 积木盒中不显示积木

method

定义控件的包含的方法,列表的每一项是字典

值类型:列表

  1. const types = {
  2. ...
  3. methods: [
  4. {
  5. key: 'method1',
  6. label: '方法1',
  7. valueType: 'string',
  8. params: [
  9. {
  10. }
  11. ],
  12. blockOptions: {
  13. color: '#FFBB55',
  14. generateBlock: true,
  15. space: 16,
  16. },
  17. },
  18. ],
  19. ...
  20. };

blockOptions*

定义属性,属性积木选项

值类型:字典

color*

定义积木颜色

缺省值:”#FFBB55”

generateBlock*

定义是否生成设置、获取属性的积木

值类型:布尔值

参考值 功能
true(缺省) 积木盒中显示积木
false 积木盒中不显示积木
space*

定义在积木盒中与下一块积木的间距

值类型:数字

缺省值:16