Blockly 简介

Blockly 是一个由 Google 开发的基于 Web 的可视化编程工具，允许用户通过拖放代码块来构建程序。其核心特点包括：

• 可视化编程：无需手动输入代码，通过拼接积木块完成逻辑设计。
• 多语言支持：生成的代码可转换为 JavaScript、Python、PHP 等。
• 教育场景应用：广泛用于编程入门教学（如 Scratch 类似功能）。

---

Blockly 核心组件

1. 工作区（Workspace）
用户拖放代码块的画布区域，支持缩放、滚动和自定义布局。

2. 代码块（Blocks）
预定义的逻辑单元，分类如下：

• 逻辑控制：if、loop 等。
• 数学运算：加减乘除、随机数。
• 变量与函数：声明和调用自定义功能。

3. 生成器（Generators）
将积木块转换为目标语言代码的模块，例如：

Blockly.JavaScript['math_number'] = function(block) {
  return [block.getFieldValue('NUM'), Blockly.JavaScript.ORDER_ATOMIC];
};

---

基础使用方法

1. 引入 Blockly 库
通过 CDN 或本地文件加载核心库和语言包：

<script src="https://unpkg.com/blockly/blockly.min.js"></script>
<script src="https://unpkg.com/blockly/python_compressed.js"></script>

2. 初始化工作区
在 HTML 中创建容器并初始化：

const workspace = Blockly.inject('blocklyDiv', {
  toolbox: document.getElementById('toolbox')
});

3. 自定义工具箱（Toolbox）
XML 定义可用代码块：

<toolbox>
  <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
    <block type="controls_if"></block>
  </category>
</toolbox>

---

进阶功能

1. 自定义代码块
通过 JSON 定义新块类型：

Blockly.defineBlocksWithJsonArray([{
  "type": "print_text",
  "message0": "打印 %1",
  "args0": [{"type": "input_value", "name": "TEXT"}],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 160
}]);

2. 导出与导入代码
将工作区保存为 XML 或生成目标代码：

const xml = Blockly.Xml.workspaceToDom(workspace);
const code = Blockly.JavaScript.workspaceToCode(workspace);

---

应用示例

简单条件判断生成 Python 代码

1. 拖拽 if 块和比较块到工作区。
2. 配置条件为 x > 10。
3. 生成代码：

if x > 10:
    print("x 大于 10")

---

学习资源

• 官方文档：Blockly Developers
• GitHub 仓库：google/blockly
• 在线演示：Blockly Demo