Google Blockly 完整教程
什么是 Blockly？
Blockly 是一个由 Google 开发的、开源的、可视化的编程库，它允许用户通过拖拽图形化的积木块来创建计算机程序，就像搭乐高积木一样。
核心特点：
- 可视化编程: 无需记忆复杂的语法，通过拖拽积木块即可编写逻辑。
- 代码生成: Blockly 可以自动将图形化的积木代码转换成多种主流编程语言（如 JavaScript, Python, Lua, PHP, Dart 等）的文本代码。
- 跨平台: 可以嵌入到任何网页中，也支持在 Android 和 iOS 上运行。
- 高度可定制: 你可以轻松地创建自己的积木块、定义其外观和功能，以适应任何应用场景。
- 强大的库: 内置了丰富的积木块，涵盖数学、文本、列表、逻辑、颜色、变量等常见编程概念。
主要用途：
- 编程教育: 作为儿童或编程初学者的入门工具。
- 机器人控制: 为机器人（如 LEGO Mindstorms, Dash & Dot）创建简单的控制程序。
- 物联网: 为智能家居设备或传感器创建自动化逻辑。
- 数据可视化: 通过简单的拖拽来定义数据处理和图表生成的流程。
- 游戏逻辑: 快速搭建游戏中的行为规则。
Blockly 的核心概念
在学习使用之前,理解几个核心概念至关重要：
-
工作区: 这是 Blockly 的主要画布，用户在这里拖拽和连接积木块，它负责管理所有积木块的状态和交互。
（图片来源网络，侵删） -
积木块: 这是 Blockly 的基本构建单元，每个积木块代表一个编程概念（如一个函数、一个变量、一个循环或一个操作）。
- 形状: 积木块的形状（凸起、凹陷、圆角）决定了它们之间如何连接，这保证了代码语法的正确性。
- 类型: 每个积木块都有一个唯一的类型，用于在代码生成时识别它。
-
工具箱: 工具箱是积木块的“调色盘”，通常位于工作区的左侧，它定义了哪些积木块可以被拖拽到工作区，你可以通过配置工具箱来控制用户能使用的功能。
-
代码生成: 这是 Blockly 的魔法所在，当你完成积木块的连接后，Blockly 会根据积木块的类型和连接关系，生成对应语言的文本代码，这个代码可以直接在你的项目中使用。
快速上手：创建你的第一个 Blockly 应用
我们将创建一个简单的网页,其中包含一个可以输出 "Hello, World!" 的 Blockly 工作区。
步骤 1：准备工作
你需要一个文本编辑器（如 VS Code, Sublime Text）和一个网页浏览器。
步骤 2：创建 HTML 文件
创建一个名为 index.html 的文件，并复制以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">Blockly 入门示例</title>
<style>
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
h1 {
text-align: center;
}
/* Blockly 画布和工具箱的容器样式 */
.blockly-container {
position: relative;
width: 100%;
height: 600px;
}
#blocklyDiv {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<h1>我的第一个 Blockly 程序</h1>
<div class="blockly-container">
<div id="blocklyDiv"></div>
</div>
<!-- 引入 Blockly 的核心库 -->
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
<!-- 你的 JavaScript 代码将放在这里 -->
<script>
// 在这里我们将初始化 Blockly
</script>
</body>
</html>
在浏览器中打开这个 index.html 文件，你应该能看到一个标题和一个空的灰色区域。
步骤 3：定义工具箱
我们需要告诉 Blockly 提供哪些积木块，创建一个 XML 文件，或者直接在 HTML 的 <script> 标签中定义 XML 字符串。
我们将直接在 HTML 的 <script> 标签中添加工具箱的定义：
<!-- 在 <script> 标签内添加以下代码 -->
<script>
// 定义工具箱的 XML 内容
const toolbox = `
<xml id="toolbox" style="display: none">
<category name="逻辑" colour="210">
<block type="controls_if"></block>
<block type="logic_compare"></block>
</category>
<category name="循环" colour="120">
<block type="controls_repeat_ext"></block>
</category>
<category name="数学" colour="230">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
</category>
<category name="文本" colour="160">
<block type="text"></block>
<block type="text_print"></block>
</category>
<category name="变量" colour="330" custom="VARIABLE"></category>
</xml>
`;
// ... 初始化代码将放在这里 ...
</script>
步骤 4：初始化工作区
我们将使用 Blockly.inject 方法来创建工作区。
<script>
const toolbox = `
<!-- ... 上面的 toolbox XML 内容 ... -->
`;
// 获取用于容纳 Blockly 的 div 元素
const blocklyDiv = document.getElementById('blocklyDiv');
// 初始化工作区
const workspace = Blockly.inject(blocklyDiv, {
toolbox: toolbox,
grid: {
spacing: 20,
length: 3,
colour: '#ccc',
snap: true
},
trashcan: true // 显示垃圾桶
});
</script>
步骤 5：添加生成代码的按钮
为了看到 Blockly 生成的代码，我们添加一个按钮。
在 <body> 的 div.blockly-container 后面添加：
<div style="text-align: center; margin-top: 10px;"> <button onclick="generateCode()">生成 JavaScript 代码</button> </div>
在 <script> 标签中添加 generateCode 函数：
function generateCode() {
// 获取工作区中的顶级积木块
const blocks = workspace.getTopBlocks();
if (blocks.length === 0) {
alert('请在工作区中添加一些积木块！');
return;
}
// 生成 JavaScript 代码
const code = Blockly.JavaScript.workspaceToCode(workspace);
// 用 alert 显示生成的代码
alert('生成的代码：\n\n' + code);
}
步骤 6：测试
再次打开 index.html 文件。
- 从左侧的“文本”类别中，拖出
text_print积木块。 - 从“文本”类别中，再拖出一个
text积木块，并将其拼接到text_print的输入口中。 - 在
text积木块的文本框中输入Hello, World!。 - 点击“生成 JavaScript 代码”按钮。
你应该会看到一个弹窗,里面是如下所示的 JavaScript 代码：
alert('Hello, World!');
恭喜！你已经成功创建了你的第一个 Blockly 应用！
进阶主题
当你掌握了基础后,可以探索更高级的功能：
创建自定义积木块
这是 Blockly 最强大的功能之一，你可以创建属于你自己的积木，封装复杂的逻辑。
- 定义 XML: 在工具箱的 XML 中使用
<block type="your_block_type">来定义。 - 注册 JavaScript: 使用
Blockly.Blocks['your_block_type'] = { ... }来定义积木的外观（init函数）。 - 定义代码生成器: 使用
Blockly.JavaScript['your_block_type'] = function(block) { ... }来定义当这个积木被使用时，应该生成什么代码。
示例：创建一个自定义的问候积木
// 在 <script> 标签中添加以下代码
// 1. 定义积木的外观
Blockly.Blocks['custom_greeting'] = {
init: function() {
this.appendDummyInput()
.appendField("向")
.appendField(new Blockly.FieldDropdown([["小明", "xiaoming"], ["小红", "xiaohong"]]), "NAME")
.appendField("说你好");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(160);
this.setTooltip("向指定的人说你好");
this.setHelpUrl("");
}
};
// 2. 定义代码生成逻辑
Blockly.JavaScript['custom_greeting'] = function(block) {
var dropdown_name = block.getFieldValue('NAME');
// 生成代码
var code = 'console.log("你好, ' + dropdown_name + '!");\n';
return code;
};
在工具箱的 XML 中添加你的新积木：
<category name="自定义" colour="120"> <block type="custom_greeting"></block> </category>
与应用交互
生成的代码通常需要与应用的其他部分交互,Blockly 提供了 Blockly.JavaScript.addReservedWords('myFunction') 和 Blockly.JavaScript['myFunction'] = function(...) {...} 机制，让你可以在 Blockly 代码中调用外部 JavaScript 函数。
导入和导出工作区
用户可以将他们的工作区保存为一个 XML 文件，以便以后继续使用或分享，这可以通过 Blockly.Xml.workspaceToDom(workspace) 和 Blockly.Xml.domToWorkspace(xmlDom, workspace) 来实现。
学习资源
- 官方文档: Blockly 官方文档 - 最权威的资料，包含了所有 API 的详细说明。
- 官方示例: Blockly 官方示例库 - 包含了大量从简单到复杂的示例，是学习自定义积木和高级功能的最佳途径。
- GitHub 仓库: Blockly on GitHub - 源代码、问题追踪和社区讨论。
- Code.org: 这个著名的在线编程学习平台就是基于 Blockly 构建的，你可以从它的课程设计中获得很多关于如何设计积木和教学流程的灵感。
希望这份教程能帮助你顺利开启 Blockly 的学习之旅！祝你玩得开心！
