Blockly 可视化编程编辑器入门教程：从拖积木到生成代码只需 4 步-云帆数科

Blockly 可视化编程编辑器入门教程从拖积木到生成代码只需 4 步【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly给课程页面嵌一个拖拽编程框时最烦的不是拖积木而是学生改错一个引号你就得盯着屏幕逐字符纠错。Blockly 是 Google 开源的 Web 可视化编程编辑器用可拼接的图形块表示变量、循环、逻辑这类代码概念拼完之后能直接导出成 JavaScript、Python、Lua 等语言的真实代码。下面这条路径能跑通「拼块 → 出码 → 自动存档」的最小闭环。项目速览可视化编程编辑器长什么样一句话定位Blockly 把编程语法翻译成可拖拽的图形块块之间的连接关系天然就是合法语法用户不用碰分号和括号。适合的场景教学平台、少儿编程工具、IoT 规则配置器以及任何想把「写代码」降级成「搭积木」的 Web 应用。目录结构看这四个就够core/— 编辑器本体工作区、积木块、工具箱、事件、代码生成器都在这里blocks/— 逻辑、循环、数学等标准积木块的 JSON 定义generators/— 代码生成器JavaScript、Python、PHP、Lua、Dart 各占一个目录demos/— 可打开的官方演示页其中 demos/code/ 是「拼块转代码」的完整样例快速上手两行命令跑起编辑器环境要求现代浏览器Chrome、Firefox、Safari 均可 Node.js 14 和 npm。方式一装包大多数集成场景选这个npm install blockly方式二从源码构建要改 Blockly 自身代码才需要git clone https://gitcode.com/gh_mirrors/bloc/blockly cd blockly npm install npm run build注入编辑器只需要一个容器 div 和一个 toolboximport * as Blockly from blockly; const workspace Blockly.inject(blocklyDiv, { toolbox: { kind: flyoutToolbox, contents: [{ kind: block, type: controls_repeat_ext }], }, });页面里出现一个可拖拽的工作区和一个飞出式工具箱说明环境没问题。完整注入配置项可翻 core/blockly_options.ts。主线实战做一个会弹提示的积木块这个 Demo 贯穿四步定义一个自定义块 → 让它生成 JavaScript → 监听修改自动存档 → 刷新后恢复现场。目标效果用户拖出「打招呼」块、填个名字、点生成页面就弹出对应提示框。1. 定义积木块JSON 声明生成函数块分两部分长什么样由 JSON 描述出什么代码由生成函数决定。Blockly.Blocks[hello_world] { init: function () { this.jsonInit({ message0: 向 %1 打招呼, args0: [{ type: field_input, name: NAME, text: 世界 }], previousStatement: null, nextStatement: null, colour: 160, }); }, };白话这个块有一个文本输入位NAME默认值「世界」previousStatement/nextStatement为 null 表示它只能独立成段、不能串进别的块里。把hello_world加进 toolbox 的contents里块就会出现在工具箱中。更多标准块写法可以看 blocks/logic.ts。2. 生成代码拼块变 JavaScriptBlockly.JavaScript.forBlock.hello_world function (block) { const name Blockly.JavaScript.valueToCode(block, NAME); return alert(你好, name );\n; };valueToCode负责把输入框里的内容变成代码字符串并处理优先级。取整块代码只用一行const code Blockly.JavaScript.workspaceToCode(workspace);生成器内部逻辑见 core/generator.tsJavaScript 实现的入口在 generators/javascript.tsPython、Lua 等同理。3. 监听事件改一块就存一次workspace.addChangeListener((event) { if (event.type Blockly.Events.BLOCK_CHANGE) { const json Blockly.serialization.workspaces.save(workspace); localStorage.setItem(myProgram, JSON.stringify(json)); } });任何块被修改都会触发BLOCK_CHANGE顺手序列化存进 localStorage。事件基类与各类事件定义在 core/events/每个事件类型一个文件。4. 恢复现场JSON 双向持久化const data JSON.parse(localStorage.getItem(myProgram)); if (data) Blockly.serialization.workspaces.load(data, workspace);存和取都是 JSON后端落库、多人协作都省事XML 格式在 core/xml.ts 也有现成工具。到这里「建块 → 出码 → 存档 → 恢复」整条链路就通了。源码速读三个目录看懂架构core/workspace.ts — 工作区是中心块的增删、移动、缩放、序列化都围绕它core/block.ts — 积木块的抽象模型SVG 渲染细节在 core/block_svg.tscore/events/ — 事件系统events_abstract.ts是基类其余文件按事件类型拆分core/toolbox.ts — 左侧工具箱与分类树的实现读源码的顺序建议workspace → block → events工具箱和主题可以放后面。避坑清单高频问题的排查顺序拖拽卡顿现象块多之后拖动掉帧。原因每次变更都触发全量代码生成或多余的事件监听器。解法用防抖如 300ms 节流再生成代码清掉不用的监听。自定义块不出现在工具箱现象定义了块工具箱里却是空的。原因块定义和 toolbox 配置是两件事只定义没挂进 toolbox 不会显示。解法确认 toolbox 的contents里有kind: block且type与定义一致再看控制台报错。生成代码语法正确但不符合预期现象输出合法但优先级或格式不对。原因生成函数里没用valueToCode带运算符优先级。解法对照 tests/generators/ 下的 golden 测试看标准块是怎么写的。保存后覆盖未保存的修改现象加载旧数据把用户刚拼的块冲掉了。原因load之前没清工作区。解法调用workspace.clear()后再Blockly.serialization.workspaces.load。延伸资源拼块转代码的完整演示demos/code/最小地图插件示例demos/minimap/多语言代码生成器对比generators/主题定制参考实现core/theme/classic.ts云存储后端Google App Engineappengine/TypeScript 类型定义typings/index.d.ts把这几个目录过一遍从「嵌入编辑器」到「二次开发」基本就都有着落了。【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业数字化 ERP 产品动态

相关推荐

LoCoMo_refined使用合规指南：CC BY-NC 4.0授权边界与非商用限制一次看懂

【免费下载链接】LoCoMo_refined LoCoMo Refined: Recalibrating LoCoMo with stricter LLM judging and a cleaned dataset. 项目地址： https://gitcode.com/gh_mirrors/lo/LoCoMo_refined 点击查看免费下载如果你打算在论文或实验中下载并分发 LoCoMo_refined&… · 2026/11/4 2:19:06

ok-ww 鸣潮自动战斗完整指南：52 角色免配置，后台挂机跑日常

ok-ww 鸣潮自动战斗完整指南：52 角色免配置，后台挂机跑日常【免费下载链接】ok-wuthering-waves 鸣潮后台自动战斗自动刷声骸一键日常 Automation for Wuthering Waves 项目地址: https://gitcode.com/GitHub_Trending/ok/ok-wuthering-waves … · 2026/11/4 2:19:06

从克隆源码到刷上飞控：Betaflight 开源飞控固件编译与配置指南

从克隆源码到刷上飞控：Betaflight 开源飞控固件编译与配置指南【免费下载链接】betaflight Open Source Flight Controller Firmware 项目地址: https://gitcode.com/gh_mirrors/be/betaflight Betaflight 是一款免费、开源的飞控固件，为竞速、自… · 2026/11/4 2:19:06

SimArt部署指南：如何在自己的服务器上运行AI艺术平台

SimArt部署指南：如何在自己的服务器上运行AI艺术平台【免费下载链接】SimArt 项目地址: https://ai.gitcode.com/hf_mirrors/ByteDance-Seed/SimArt 想要在自己的服务器上部署强大的AI艺术生成平台吗？SimArt作为字节跳动Seed项目下的开源AI艺术… · 2026/11/4 15:41:45

HsMod 炉石插件完整指南：BepInEx 安装 + 4 条挂机路线 + 封号红线

HsMod 炉石插件完整指南：BepInEx 安装 4 条挂机路线封号红线【免费下载链接】HsMod Hearthstone Modification Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod HsMod 炉石插件是一款基于 BepInEx 的炉石传说开源增强插件&… · 2026/11/4 15:41:45

kohya_ss：从 docker compose up 到第一个 LoRA 的 AI 模型训练实践

kohya_ss：从 docker compose up 到第一个 LoRA 的 AI 模型训练实践【免费下载链接】kohya_ss 项目地址: https://gitcode.com/GitHub_Trending/ko/kohya_ss kohya_ss 是一个图形化的 AI 模型训练工具。一条 docker compose 命令即可拉起支持 SD 1.5、SDXL、… · 2026/11/4 15:41:45

如何在ComfyUI中快速部署WanVideo FP8量化模型：5步实现高效视频生成

如何在ComfyUI中快速部署WanVideo FP8量化模型：5步实现高效视频生成【免费下载链接】WanVideo_comfy_fp8_scaled 项目地址: https://ai.gitcode.com/hf_mirrors/Kijai/WanVideo_comfy_fp8_scaled WanVideo_comfy_fp8_scaled项目为AI视频创作者提供了一个完… · 2026/11/4 15:41:45

ok-ww 鸣潮后台刷声骸与一键日常快速指南

ok-ww 鸣潮后台刷声骸与一键日常快速指南【免费下载链接】ok-wuthering-waves 鸣潮后台自动战斗自动刷声骸一键日常 Automation for Wuthering Waves 项目地址: https://gitcode.com/GitHub_Trending/ok/ok-wuthering-waves ok-ww 是一个面向《鸣潮》的开源自动化工… · 2026/11/4 15:40:43

阅读APP书源导入实操指南：22个书源一次配好，10分钟开始阅读

阅读APP书源导入实操指南：22个书源一次配好，10分钟开始阅读【免费下载链接】Yuedu 📚「阅读」自用书源分享项目地址: https://gitcode.com/gh_mirrors/yu/Yuedu 阅读APP装好并不能直接取书，第一步是导入书源。本文带你用… · 2026/11/4 15:40:43

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49