猫史档案馆

hi！大家好，我是Aoken 或者你可以叫我（ABO）

这一节课我们将学习如何用Waddle编辑器

这里ABO使用的是 Waddle beta（开发）版

接下来进入教程环节

当你成功进入 Waddle 之后，应该能看到这样的画面：

Waddle 编辑器整体分为积木盒、工作区和导航栏三部分：

左上角 Waddle 图标可以点击，会出现弹出式菜单：

• 新建控件： 从模板创建一个新控件

• 保存到电脑： 生成一个 .waddle 文件，保存到电脑里

• 打开本地文件： 打开电脑里的 .waddle 文件

• 导出为 CoCo 文件： 编写完成，生成 .js/.jsx 文件导入到 CoCo

• 文档： 打开本文档

• 关于 Waddle：查阅版本号等相关信息

起步

自定义控件有两种类型：

• 不可见控件 (InvisibleWidget)

  这类控件在舞台不可见，一般用于提供系统（原生）能力，比如定时器、Base 编解码等。

  文件格式为 .js 比如 base.js。

• 可见控件（VisibleWidget）

  可以提供交互式前端，比如按钮、输入框、文本等。

  文件格式为 .jsx 比如 text.jsx。

构造

 

不可见控件的定义由 3 块积木组成：

分别为 控件头、构造器 和 导出控件。

控件头

控件头是控件的大脑，用于描述控件的基本信息，这样 CoCo 才能让你的控件在对的时间，对的地点，为对的作品提供支持。所以它是一个控件不可或缺的一部分。

类型名：控件内部名，无其他实际意义，可忽略。

（命名规范：大写字母加下划线组成）

type: "MY_WIDGET",

图标：控件在 CoCo 中显示的图标。图片网址链接。

icon: "https://waddle.coco-central.cn/static/img/logo/logo-white.svg",

名称：控件在 CoCo 中显示的名称。我名称建议短小精悍，让其他人眼前一亮。

title: "我的控件",

版本：当前控件的版本号，供开发人员内部查看。

version: "1.0.0",

类型：

可以选择“功能控件”或“界面控件”。

在 CoCo 中，引入的功能控件可以在所有屏幕中都可以使用 简称；(全局控件)，而界面控件仅限于单个屏幕。

一般来说，很多的不可见控件都为功能控件。

isGlobalWidget: true,

构造器

构造器可以说是整个控件的心脏，它可以帮助 CoCo 加载你的控件。因为它总是最先被加载，所以中间可以放置变量初始化的定义，如果你没有这种需求，一般可以将这里留空。

class Widget extends InvisibleWidget {
    constructor(props) {
        super(props);

    }

}

导出控件

导出控件是控件的通行证，有了这个，你的控件就被 CoCo 当做可以正常使用的控件被加载。未完成的控件就不可以被CoCo加载，所以，请一定要把这块积木放在你整个程序的末尾。

 

积木

 

Waddle 能在 CoCo 中定义3种积木：

 

 

分别是 属性、方法 和 事件。

其中方法和事件积木中都可以加入 参数。

前三种积木应添加于构造器的下方、导出控件的上方：

 

属性

Waddle；

 

CoCo：

 

属性积木描述控件的基础信息。

types['properties'].push({
    key: 'propertyName',
    label: '属性1',
    valueType: 'string',
    defaultValue: '默认值',

})

属性名：在CoCo中属性积木显示的名称。

label: '属性1',

属性内部名：调用属性时使用的名称。

（命名规范：英文 + 数字组成，不能以数字开头）

key: 'propertyName',

属性值类型：

字符串

字符串（多行）

数字

布尔

颜色

对象

任何类型

用于 CoCo 在积木输出时的类型检查。

目前支持字符串、数字、布尔、颜色、对象以及任何类型（意思是该类型可以是前面的任意一种）。

valueType: 'string',

默认值：属性的默认值。

defaultValue: '默认值',

注意：默认值的类型必须与属性值相同，如果你改为了其他类型，请移走自带的文本块。

 

valueType: 'boolean',
defaultValue: true,