【Blockly开发教程】05 积木块基础概念（上）

你将收获

通过本文，你将了解积木块有哪些类型、如何定义、有什么组成。

核心概念

Blockly 是一个由 Google 开发的 Web 库，它允许开发者在应用程序中嵌入基于块的编程代码编辑器。Blockly 的核心优势在于它使得编程教育和编程本身变得更加易于接近，特别是对初学者而言。

块（Blocks）

定义：

• 块是Blockly中的图形化编程代码的基础元素，代表文本编程语言中的表达式和语句。
• 块通过拼图式的接口，使用户能够通过拖放来构建代码逻辑。

我们可以通过几个分类来了解块：

• 块的类型
• 块的定义
• 块的属性
• 块的行为

块的类型

语句块（Statement Blocks）

包含执行代码的块，如循环、条件判断等。
通常包含一个或多个输入，用于嵌套其他块。
这类积木块通常像一个字母“C”。

定义如下：

{
   
    'type': 'controls_repeat_ext',
    'message0': '%{BKY_CONTROLS_REPEAT_TITLE}',
    'args0': [
      {
   
        'type': 'input_value',
        'name': 'TIMES',
        'check': 'Number',
      },
    ],
    'message1': '%{BKY_CONTROLS_REPEAT_INPUT_DO} %1',
    'args1': [
      {
   
        'type': 'input_statement',
        'name': 'DO',
      },
    ],
    'previousStatement': null,
    'nextStatement': null,
    'style': 'loop_blocks',
    'tooltip': '%{BKY_CONTROLS_REPEAT_TOOLTIP}',
    'helpUrl': '%{BKY_CONTROLS_REPEAT_HELPURL}',
 },

值块（Value Blocks）

用于表示数据和变量，可以连接到其他块的值输入上。
例如，数字、字符串、布尔值等。
这类积木块通常左边有一个拼图接口，右边是封闭边：

定义如下，关键代码'output': 'Number', 设置了output后，积木块与其他积木块连接时，会对比另一个积木块的input是否和这个积木块的output类型一直，不一致是无法拼接的。

  {
   
    'type': 'math_number',
    'message0': '%1',
    'args0': [
      {
   
        'type': 'field_number',
        'name': 'NUM',
        'value': 0,
      },
    ],
    'output': 'Number',
    'helpUrl': '%{BKY_MATH_NUMBER_HELPURL}',
    'style': 'math_blocks',
    'tooltip': '%{BKY_MATH_NUMBER_TOOLTIP}',
    'extensions': ['parent_tooltip_when_inline'],
  },

变量块（Variable Blocks）

用于声明或引用变量。在工具箱中，有一个创建变量的按钮，创建后，工具箱（Toolbox）会出现三个积木块：

这三个积木块，对应：

• 为变量赋值块：set [ ] to [ ]
• 修改变量的值: change [ ] by [ ]
• 取变量值: get [ ]

工具箱中的变量声明方式，和其他分类不同。其他分类需要列举<block>，而变量分类只需要：

<category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}"></category>

逻辑运算块（Logic Blocks）

执行逻辑运算，如AND、OR、NOT等。

逻辑运算块，取值是布尔（boolean）类型。还包含逻辑运算符。

定义如下，关键代码'output': 'Boolean'：

  {
   
    'type': 'logic_negate',
    'message0': '%{BKY_LOGIC_NEGATE_TITLE}',
    'args0': [
      {
   
        'type': 'input_value',
        'name': 'BOOL'