Blockly 开发者工具

Blockly 开发者工具是一款基于 Web 的开发者工具，可帮助您构建自定义代码块并将其添加到您的应用中。

Block Factory 的屏幕截图，其中显示了工具箱和各种输出区域

定义块

Block Factory 工作区从一个空配置块开始。您可以通过拖动工具箱中相应类别的块，将输入和字段添加到块中。您还可以通过修改配置块来为块设置提示文本、帮助网址、颜色和连接检查。

Block Factory 一次只能创建一种类型的块。如果要设计多个连接在一起的块，必须单独设计这些块，并在工具箱定义中将它们连接起来。此外，块还可以具有赋值函数等高级功能，但无法在工厂中创建这些高级功能。在构建分块的基本形式后，您必须根据文档修改分块定义。

在工作区中修改配置块时，块的预览会自动更新。您需要添加到应用中的代码也将自动更新。

输出配置

Blockly 支持定义块和加载 Blockly 本身的不同方法，并且支持多种内置代码生成器语言。定义块和块码生成器的方式取决于这些因素，因此您可以在块工厂中设置它们以更改代码输出。

输出配置面板的屏幕截图，其中包含用于分块导入格式、分块定义格式和代码生成器语言的选择器

Blockly 导入格式

您可以通过 HTML 中的 <script> 标记加载 Blockly，也可以在应用中使用构建工具时使用 import 语句。此选择会影响您引用 Blockly API 某些部分的方式。如需详细了解应选择哪个选项，请参阅有关加载 Blockly 的文档。无论您使用哪种方法，都请务必在块工厂中选择相应的选项，这样您要添加到应用中的代码对于您的应用而言是正确的。

屏蔽定义格式

Blockly 支持使用 JSON 或 JavaScript 定义块。首选 JSON 格式，但如果您要添加赋值函数等高级功能，可以使用 JavaScript 格式。

代码生成器语言

Blockly 附带多种代码生成器语言。选择您的应用所需的语言以显示相应的块码生成器桩。如果您使用自定义语言生成器，则可以在将代码复制到应用中后修改自定义 CodeGenerator 类的名称。

代码输出

“块工厂”的后续部分介绍了需要复制到应用中的代码，以加载您创建的块。复制代码的位置取决于您构建应用的方式，但通常情况下，您需要运行代码标头，在定义和块码生成器之前运行代码标头，在工具箱中使用块定义之前运行块定义，并在尝试为工作区生成代码之前运行块码生成器。对于每个部分，您可以使用复制按钮复制该部分的整个代码块。

如果您仍不确定如何使用代码输出，建议您查看示例应用，其中包含自定义块和块码生成器的示例。

代码标头

“Code Headers”部分显示了加载 Blockly 核心库所需的代码以及您选择的语言生成器。这里可能还存在其他配置；例如，您可能在块中包含的某些字段来自 Blockly 插件。这些插件将有自己的 import 语句，还可能有您在初始化该字段时必须运行的其他代码。此代码应包含在以下任何代码段之前。

屏蔽定义

块定义可让您告知 Blockly 块的形状，例如块包含哪些字段和输入、颜色等。运行此代码后，Blockly 会知道如何仅根据其 type 来创建块。

如果您使用的是示例应用，则可以将此代码添加到 blocks/ 目录下的文件中。如果您有自己的应用结构，请务必添加此代码，然后再尝试按名称引用块（例如在工具箱定义中）。无论采用哪种方式，请确保代码标头出现在包含此代码的文件中。

生成器存根

块代码生成器用于描述应为块生成的代码。块工厂创建的生成器桩为您提供了用于获取块上的输入值和字段值的基本代码。您可以自行决定将这些值组合到将要生成的最终代码中！

如果您使用的是示例应用，则可以将此代码添加到 generators/ 目录下的文件中。如果您有自己的应用结构，请务必添加此代码，然后再尝试为包含自定义块的工作区生成代码。无论采用哪种方式，请确保代码标头出现在包含此代码的文件中。

视频演示

本视频详细介绍了定义区块的步骤。界面已过时，但其突出显示的区块地图项依然准确或不太准确。

屏蔽该库

每当您更改块时，块都会自动保存在浏览器的本地存储空间中。您可以点击顶部工具栏中的相应按钮，创建新块或从本地存储空间加载现有块。

从旧版 Block Factory 导入

如果您使用过旧版块工厂，并且想要将现有块定义迁移到新工具中，则可以按照以下步骤操作：

  1. 在旧版 Block Factory 中，点击工具栏中的 Export Block Library 按钮。此操作会下载一个包含您的所有块定义的文件。

    旧版块工厂的屏幕截图，其中突出显示了“Export Block Library”按钮

  2. 在新的 Block Factory 中，点击工具栏中的 Load block 按钮。

  3. 在菜单中选择“Import from Block Factory”选项。

    块工厂屏幕截图，其中突出显示了“Load block”和“Import”按钮

  4. 上传您在第 1 步中下载的文件。

  5. 您的块定义应该会自动转换为新格式，并且现在可从 Load block 菜单中获取。如果与现有块存在冲突，则这些块可能已重命名。

  6. 如果解析您的任何块时出错，我们将无法加载这些块。您可以根据 blockly-samples 提交 bug 并在其中添加无法解析的文件，对我们很有帮助。