添加自定义块

虽然 Blockly 定义了许多标准块，但大多数应用都需要定义和实现至少几个与领域相关的块。

分块由三个组件组成：

  • 块定义对象：定义块的外观和行为， 其中包括文字、颜色、字段和连接。
  • 工具箱引用：对工具箱 XML 中的块类型的引用，以便用户将其添加到工作区。
  • 生成器函数：为此块生成代码字符串。始终 使用 JavaScript 编写。

区块定义

Blockly for Web 通过脚本文件加载 Block。blocks/ 目录包含标准块的多个此类示例。假设您的代码块不属于现有类别，请创建一个新的 JavaScript 文件。这种新的 JavaScript 文件需要添加到<script ...> 编辑器的 HTML 文件。

典型的块定义如下所示：

JSONJavaScript
Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "message0": 'length of %1',
      "args0": [
        {
          "type": "input_value",
          "name": "VALUE",
          "check": "String"
        }
      ],
      "output": "Number",
      "colour": 160,
      "tooltip": "Returns number of letters in the provided text.",
      "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
    });
  }
};
Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

  • string_length：这是块的类型名称。因为所有版块共享 相同的命名空间，则最好使用根据您的类别（在 string），后跟块的函数（在本例中为 ） length）。

  • init：此函数用于定义代码块的外观和风格。

这会定义以下代码块：

“string_length”块。

如需了解块定义的详情，请参阅定义块。

JSON 数组

使用 JSON 块数组可以一次定义多个块 定义。

JSON
Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

添加工具箱参考

定义后，使用类型名称将块引用到工具箱：

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

如需了解详情，请参阅工具箱指南。

添加了块代码生成器

最后，要将代码块转换为代码，请将代码块与生成器配对 函数。生成器因所需的输出语言而异，但标准生成器通常采用以下格式：

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

生成器函数接受对块的引用以进行处理。它 将输入（上面的 VALUE 输入）渲染为代码字符串，然后 将它们串联成一个更大的表达式。

→ 详细了解块码生成器...