创建自定义块 - 块开发工具

---

title: 创建自定义块 - 块开发工具

Create Custom Blocks - Blockly Developer Tools

原文链接：https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools

Blockly开发工具Blockly Developer Tools是一个基于Web的开发工具，可自动完成Blockly配置过程的各个部分，包括创建自定义块，构建工具箱和配置Web Blockly工作区。

使用该工具的Blockly开发者进程包括三个部分：

• 使用块工厂和块导出器创建自定义块。
• 使用Workspace Factory构建工具箱和默认工作空间。
• 使用Workspace Factory配置工作空间（当前是仅限Web的功能）。

“块工厂”

---

“块工厂”选项卡可帮助您为自定义块创建块定义和代码生成器。在此选项卡上，您可以轻松地创建，修改和保存自定义块。

定义块

此视频详细介绍了定义块的步骤。 UI是过时了，但它突出的块功能仍然准确。
www.youtube.com/embed/s2_xaEvcVI0?autohide=1&showinfo=0&enablejsapi=1

管理库

块由其名称引用，因此要创建的每个块都必须具有唯一的名称。 UI强制执行此操作，并在您正在“保存”新块或“更新”现有块时清除。

您可以在先前保存的块之间切换，或通过单击库按钮创建新的空块。更改现有块的名称是快速创建具有类似定义的多个块的另一种方法。

导出和导入库

块被保存到浏览器的本地存储。清除浏览器的本地存储将删除您的块。要无限期保存您的块，您必须下载您的库。您的块库将下载为可导入的XML文件，以将您的块库设置为下载文件时的状态。请注意，导入块库将替换当前的库，因此您可能希望先导出。
导入和导出功能也是维护和共享不同组的自定义块的推荐方法。

块导出器选项卡

---

一旦你设计了块，你将需要导出块定义和生成器存根在应用程序中使用它们。这是在块导出器选项卡上完成的。

存储在块库中的每个块都将显示在块选择器中。单击块以选择或取消选择要导出的块。如果要选择库中的所有块，请使用“Select”→“All Stored In Block Library”选项。

导出设置允许您选择要定位的生成语言，以及是否需要所选块的定义，生成器桩或两者。选择这些文件后，点击“导出”即可下载文件。

注意：如果在Mac上使用保存对话框，则一次只能下载一个文件one file at a time。

工作区工厂选项卡

---

工作区工厂可以方便地配置工具箱和工作区中的默认块组。您可以使用“Toolbox”和“Workspace”按钮在编辑工具箱和起始工作区之间切换。

构建工具箱

此选项卡有助于构建工具箱的XML。该材料假定熟悉工具箱Toolbox的功能。如果您已在此处要编辑工具箱的XML，可以通过单击“Load to Edit”加载它。

没有类别的工具箱

如果您有几个块，并希望显示它们没有任何类别，只需将它们拖动到工作区中，您将看到您的块出现在预览中的工具箱中。

带类别的工具箱

如果要显示类别中的块，请单击“+”按钮并选择新类别的下拉项。这将向您的类别列表中添加一个类别，您可以选择和编辑。选择“标准类别 tandard Category ”以添加单个标准块类别（逻辑，循环等）或“标准工具箱Standard Toolbox”以添加所有标准块类别。使用箭头按钮重新排序类别。

注意：标准类别和工具箱包括Playground中的所有块。这组块不适用于大多数应用程序，应根据需要进行修剪。此外，某些块在移动设备上尚不支持。

要更改所选类别的名称或颜色，请使用“编辑类别Edit Category”下拉菜单。将块拖动到工作区中将将其添加到所选类别。

高级块

默认情况下，您可以将库中的任何标准块或任何块添加到工具箱中。如果您在JSON中定义了不在库中的块，则可以使用“导入自定义块”按钮导入它们。一些块应该一起使用或包括默认值。这是通过组和阴影groups and shadows来完成的。在编辑器中连接的任何块都将作为一个组添加到工具箱中。附加到另一个块的块也可以通过选择子块并单击“创建阴影”按钮更改为阴影块。注意：只有不包含变量的子块才可以更改为阴影块。

如果在其工具箱中包含变量或功能块，请在工具箱中包含“变量”或“函数”类别，以允许用户充分利用块。详细了解“变量”或“函数”类别“Variables” or “Functions" categories。

配置工作区（for Web Blockly）

要配置工作区的不同部分，请转到“工作区工厂Workspace Factory”选项卡并选择“工作区Workspace”。

选择工作区选项

为配置选项设置configuration options不同的值，并在预览区域中查看结果。启用网格或缩放会显示更多配置选项。此外，切换到使用类别通常需要更复杂的工作空间;当您添加第一个类别时，会自动添加垃圾桶和滚动条。

将预加载块添加到工作区

这是可选的，但如果要在工作空间中显示一组块，则可能需要：

• 当应用程序加载时。
• 当触发事件（提高级别，单击帮助按钮等）时。
  块拖动到编辑空间中，以在预览中在工作空间中查看它们。您可以创建块组，禁用块，以及在选择某些块时创建阴影块。
  https://developers.google.com/blockly/images/load_workspace_blocks.png

导出

Workspace Factory提供以下导出选项：

• 入门代码：生成入门html和javascript以注入您的自定义Blockly工作区。
• 工具箱生成XML以指定您的工具箱。
• 工作区块生成可以加载到工作区中的XML。