首页
/ 最完整 Blockly 入门指南：零基础搭建你的第一个可视化编程项目

最完整 Blockly 入门指南：零基础搭建你的第一个可视化编程项目

2026-02-05 04:18:09作者：晏闻田Solitary
blockly
The web-based visual programming editor.
项目地址：https://gitcode.com/gh_mirrors/bl/blockly

你是否曾因复杂的代码语法而对编程望而却步？是否想为孩子或学生创建一个趣味盎然的编程学习环境？Blockly（可视化编程编辑器）正是解决这些痛点的理想工具。本文将带你从零开始，在15分钟内搭建一个功能完备的可视化编程项目，无需任何编程基础，只需跟随步骤操作即可完成。读完本文后，你将掌握Blockly的核心概念、环境搭建、基础操作和项目部署的全流程，并能独立扩展功能满足个性化需求。

Blockly 简介

Blockly 是一个基于网页的可视化编程编辑器（Visual Programming Editor），它允许用户通过拖拽积木式的代码块来创建程序，而无需手动输入文本代码。这种方式极大降低了编程门槛，同时保留了编程逻辑思维的训练价值。

Blockly 工作界面示意图

Blockly 的核心优势在于：

  • 低门槛：无需记忆语法，通过拖拽即可编程
  • 可视化：程序逻辑直观可见，便于调试和理解
  • 可扩展：支持自定义积木和代码生成器
  • 多平台：纯Web技术构建，可在浏览器中直接运行

项目的核心代码位于 core/ 目录，其中 core/inject.ts 文件实现了将 Blockly 编辑器注入网页的关键功能。

环境准备

获取项目代码

首先需要获取 Blockly 项目代码，可通过以下命令克隆仓库：

git clone https://gitcode.com/gh_mirrors/bl/blockly
cd blockly

安装依赖

Blockly 使用 npm 管理依赖，执行以下命令安装所需包：

npm install

项目结构概览

成功获取代码后，我们来了解一下项目的主要目录结构：

blockly/
├── core/           # 核心功能实现
├── blocks/         # 内置积木定义
├── generators/     # 代码生成器
├── demos/          # 示例项目
├── media/          # 媒体资源
└── tests/          # 测试文件

其中，demos/ 目录包含了多个示例项目，对于初学者来说是很好的学习资源。

快速开始：第一个 Blockly 项目

创建 HTML 文件

在项目根目录创建一个 my-first-project.html 文件，添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个 Blockly 项目</title>
    <script src="https://cdn.jsdelivr.net/npm/blockly/blockly.min.js"></script>
</head>
<body>
    <h1>简易计算器</h1>
    <div id="blocklyDiv" style="width: 800px; height: 400px;"></div>
    <xml id="toolbox" style="display: none;">
        <category name="数学">
            <block type="math_number"></block>
            <block type="math_arithmetic"></block>
        </category>
        <category name="逻辑">
            <block type="logic_compare"></block>
            <block type="logic_boolean"></block>
        </category>
    </xml>

    <script>
        // 创建工作区
        const workspace = Blockly.inject('blocklyDiv', {
            toolbox: document.getElementById('toolbox'),
            zoom: {
                controls: true,
                wheel: true,
                startScale: 1.0,
                maxScale: 3,
                minScale: 0.3,
                scaleSpeed: 1.2
            }
        });
        
        // 运行按钮点击事件
        document.getElementById('runButton').addEventListener('click', function() {
            const code = Blockly.JavaScript.workspaceToCode(workspace);
            try {
                eval(code);
            } catch (e) {
                alert('程序执行错误: ' + e.message);
            }
        });
    </script>
    
    <button id="runButton">运行程序</button>
    <pre id="codeOutput"></pre>
</body>
</html>

运行项目

最简单的方式是直接在浏览器中打开这个 HTML 文件。如果使用 VS Code，可以安装 Live Server 插件，右键点击文件选择 "Open with Live Server"。

核心功能解析

工作区 (Workspace)

工作区是用户创建程序的主要区域，对应 core/workspace.ts 文件的实现。通过 Blockly.inject() 方法创建，如：

const workspace = Blockly.inject('blocklyDiv', {
    // 配置选项
});

工作区结构

工具箱 (Toolbox)

工具箱包含了可拖拽的积木块，定义在 <xml> 标签中或通过 JavaScript 对象配置。支持分类显示不同类型的积木，如数学、逻辑、文本等。

工具箱的实现代码位于 core/toolbox/ 目录，主要文件包括 core/toolbox/toolbox.ts 和 core/toolbox/category.ts。

积木块 (Blocks)

Blockly 内置了多种常用积木，定义在 blocks/ 目录下，如：

积木块样式

代码生成 (Code Generation)

Blockly 可以将积木程序转换为多种编程语言。生成器代码位于 generators/ 目录，支持 JavaScript、Python、Dart 等多种语言。

使用方法：

// 生成 JavaScript 代码
const code = Blockly.JavaScript.workspaceToCode(workspace);

自定义积木开发

创建自定义积木定义

在项目中创建 custom_blocks.js 文件，添加以下内容：

// 注册一个自定义积木
Blockly.Blocks['hello_world'] = {
  init: function() {
    this.jsonInit({
      "message0": "Hello %1",
      "args0": [
        {
          "type": "field_input",
          "name": "NAME",
          "text": "World"
        }
      ],
      "output": null,
      "colour": 160,
      "tooltip": "输出 Hello 加上输入的文本",
      "helpUrl": ""
    });
  }
};

// 注册对应的代码生成器
Blockly.JavaScript['hello_world'] = function(block) {
  const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC);
  return `alert('Hello ${name}!');\n`;
};

在项目中使用自定义积木

在 HTML 文件中引入自定义积木文件，并在工具箱中添加：

<script src="custom_blocks.js"></script>

<xml id="toolbox" style="display: none;">
    <!-- 其他分类 -->
    <category name="自定义">
        <block type="hello_world"></block>
    </category>
</xml>

项目实战：简易游戏开发

下面我们将创建一个更复杂的例子 - 一个简单的迷宫游戏，展示 Blockly 的实际应用场景。

1. 准备游戏画布

在 HTML 中添加一个 Canvas 元素作为游戏画布：

<canvas id="gameCanvas" width="400" height="400" style="border: 1px solid #000;"></canvas>

2. 创建游戏积木

添加控制角色移动的自定义积木：

// 移动积木
Blockly.Blocks['move_forward'] = {
  init: function() {
    this.jsonInit({
      "message0": "向前移动 %1 步",
      "args0": [
        {
          "type": "field_number",
          "name": "STEPS",
          "value": 1,
          "min": 1,
          "max": 10
        }
      ],
      "previousStatement": null,
      "nextStatement": null,
      "colour": 230,
      "tooltip": "向前移动指定步数",
      "helpUrl": ""
    });
  }
};

// 转向积木
Blockly.Blocks['turn'] = {
  init: function() {
    this.jsonInit({
      "message0": "向 %1 转",
      "args0": [
        {
          "type": "field_dropdown",
          "name": "DIRECTION",
          "options": [
            [ "左", "LEFT" ],
            [ "右", "RIGHT" ]
          ]
        }
      ],
      "previousStatement": null,
      "nextStatement": null,
      "colour": 230,
      "tooltip": "改变方向",
      "helpUrl": ""
    });
  }
};

3. 实现游戏逻辑

添加游戏逻辑代码，处理角色移动、碰撞检测等功能。完整代码可参考 demos/code/ 目录下的示例。

高级应用

自定义主题

Blockly 支持自定义主题，改变编辑器的颜色、字体等样式。主题相关代码位于 core/theme/ 目录，可参考 core/theme/zelos.ts 实现自定义主题。

// 定义自定义主题
const myTheme = Blockly.Theme.defineTheme('my_theme', {
  base: Blockly.Themes.Classic,
  componentStyles: {
    workspaceBackgroundColour: '#f0f8ff',
    toolboxBackgroundColour: '#e6f7ff',
    toolboxForegroundColour: '#000000',
    // 更多样式配置...
  }
});

// 使用自定义主题
const workspace = Blockly.inject('blocklyDiv', {
  theme: myTheme,
  // 其他配置...
});

事件处理

Blockly 提供了丰富的事件系统，可以监听工作区变化、积木操作等事件。相关代码位于 core/events/ 目录。

// 监听积木变化事件
workspace.addChangeListener(function(event) {
  if (event.type === Blockly.Events.BLOCK_CREATE) {
    console.log('新积木创建:', event.blockId);
  } else if (event.type === Blockly.Events.BLOCK_DELETE) {
    console.log('积木删除:', event.blockId);
  }
});

部署与扩展

生产环境优化

在实际项目中使用 Blockly 时，建议：

  1. 使用压缩版的 Blockly 文件（blockly.min.js）
  2. 按需加载积木和生成器，减小文件体积
  3. 使用 CDN 加速资源加载，国内推荐：
    <script src="https://cdn.jsdelivr.net/npm/blockly/blockly.min.js"></script>

学习资源

总结与展望

通过本文的学习，你已经掌握了 Blockly 的基本使用方法和核心概念，能够创建简单的可视化编程项目。Blockly 的应用场景非常广泛，包括教育、儿童编程、可视化工具开发等。

未来可以进一步学习：

  • 自定义积木和代码生成器的高级功能
  • Blockly 与后端服务的集成
  • 移动设备适配

希望这篇指南能帮助你快速入门 Blockly，开启可视化编程的旅程！如有任何问题，欢迎查阅项目文档或参与社区讨论。

扩展学习路线

  1. 熟悉 blocks/ 目录下的内置积木定义
  2. 研究 generators/ 目录下的代码生成器实现
  3. 尝试修改 core/renderers/ 目录下的渲染器，自定义积木外观
  4. 学习 tests/ 目录下的测试用例，了解各种 API 的使用方法

现在，你已经具备了使用 Blockly 创建可视化编程项目的基础知识，快去动手实践，创造属于你的编程工具吧！

blockly
The web-based visual programming editor.
项目地址：https://gitcode.com/gh_mirrors/bl/blockly
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
532
3.74 K
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
178
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
886
596
pytorchpytorch
Ascend Extension for PyTorch
Python
340
404
flutter_flutterflutter_flutter
暂无简介
Dart
771
191
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
986
247
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
416
4.21 K
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
303
355