Blockly 实战速览：10 分钟跑通可视化编辑器，搞定积木自定义与代码生成

Blockly 实战速览10 分钟跑通可视化编辑器搞定积木自定义与代码生成【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly让最终用户在浏览器里拖拽积木拼出程序不用碰一行语法——这是 Blockly 要解决的问题。作为 Google 开源的可视化编程编辑器库它用互相咬合的图形积木表示变量、逻辑判断、循环这些代码概念并把拼好的积木导出成 JavaScript、Python、PHP、Lua、Dart 五种语言之一。下面围绕装好一个能用的编辑器这个目标把关键步骤走一遍。3 条命令让 Blockly 编辑器出现在浏览器里环境要求不高现代浏览器加 Node.js 18 以上package.json 中 engines 声明为18。npm install blockly编辑器本体只需一个空容器和一次inject调用import * as Blockly from blockly; const workspace Blockly.inject(blocklyDiv, { toolbox: [ { kind: category, name: Logic, contents: [{ kind: block, type: controls_if }] }, ], });toolbox支持 JSON 数组或 XML 两种描述方式。注入后 Blockly 会把 SVG 画布、侧边工具栏、缩放控件全部挂进#blocklyDiv返回值workspace是后续一切操作的入口。注入逻辑的完整实现可以看 core/inject.ts所有可传配置项的说明在 core/blockly_options.ts。工具栏、主题、事件监听编辑器三件套想让编辑器像产品而不是像 demo通常要补三处配置。工具栏分两类。积木少时用一个平铺 flyoutkind: flyout积木多时用带分类的 toolboxkind: category用户点分类再展开积木仓库自带的 tests/playground.html 里就放了三种工具栏样例可直接抄。主题控制配色。内置主题在 core/theme/比如Blockly.Themes.Classic。想换一套颜色声明自己的主题并指定积木样式即可const myTheme Blockly.Theme.defineTheme(myTheme, { blockStyles: { logic_blocks: { colourPrimary: #4a6785 }, }, });事件监听用于业务联动。自动保存、实时校验这类需求都走同一个入口workspace.addChangeListener((e) { if (e.type Blockly.Events.BLOCK_CHANGE) { // 积木被修改触发自动保存 } });事件体系的所有类型定义在 core/events/ 目录按积木增删、移动、字段变化等拆分得很细。自定义积木块两种定义方式自定义积木是 Blockly 使用频率最高的能力有两种写法。方式一JSON 声明推荐。积木外观用 JSON 描述defineBlocksWithJsonArray一次性注册Blockly.defineBlocksWithJsonArray([ { type: say_hello, message0: 说 %1, args0: [{ type: field_input, name: TEXT, text: World }], previousStatement: null, nextStatement: null, colour: 160, tooltip: 打印一句话, }, ]);message0里的%1是占位符按顺序对应args0的字段previousStatement/nextStatement声明积木可以上下拼接。仓库里上千行积木定义基本都是这种写法blocks/logic.ts 的controls_if是很好的参照——它还演示了mutator可折叠分支和extensions机制。方式二用 Block 类在代码里搭。需要运行时动态决定字段时才用new Blockly.Block(...)加appendField/appendInput手工构建。JSON 方式覆盖不了的需求再用它。定义完别忘了把type加进 toolbox否则积木只注册不显示。从积木到可执行代码代码生成 4 行搞定自定义积木能拖了最后一步是让拼出来的东西真的能跑。仓库 generators/ 目录内置五个生成器以 JavaScript 为例import {javascriptGenerator} from blockly/javascript; javascriptGenerator.forBlock[say_hello] function (block, generator) { const text generator.quote_(block.getFieldValue(TEXT)); return console.log(${text});\n; }; const code javascriptGenerator.workspaceToCode(workspace);逻辑很简单生成器按积木树递归遍历每个type对应forBlock里的一个函数函数返回该积木对应的代码片段生成器负责处理缩进、变量声明和运算符优先级优先级规则见 javascript_generator.ts 中的Order定义。内置积木都有现成生成函数你只需要为自己的积木补上缺失的那一个。保存与还原工作区JSON 状态与 XML积木程序要跨会话保存有两种序列化格式// JSONv11 推荐的持久化格式 const state Blockly.serialization.workspaces.save(workspace); Blockly.serialization.workspaces.load(state, workspace); // XML旧格式兼容存量数据 const xml Blockly.Xml.workspaceToDom(workspace);JSON 格式同时保存积木、变量和工作区注释还原用Blockly.serialization.workspaces.loadXML 走Blockly.Xml系列函数。两套格式的读写逻辑分别在 core/serialization/ 和 core/xml.ts。tests/playground.html 里的 Save JSON / Save XML / Load 按钮就是这两个 API 的最小封装可以直接参考它的事件绑定方式。三个高频坑积木不显示。九成是 toolbox 里没有引用该type另一成是忘了加载积木包。npm 包按子路径拆分标准积木库不在blockly主入口里需要import blockly/blocks或按需import blockly/blocks/logic这类引入。旧教程的 API 失效。大量文章还在用Blockly.JavaScript.workspaceToCodev11 起生成器已从主包移到子路径blockly/javascript、blockly/python等见 package.json 的exports字段。主入口只保留核心 API。代码生成报 No generator for block。自定义积木忘了注册forBlock函数时生成器会直接抛错而不是静默跳过。控制台看到这条报错就去补对应语言的生成函数。下一步做什么去哪找源码想动手验证最快的路径是把源码拉下来跑官方 playgroundgit clone https://gitcode.com/gh_mirrors/bloc/blockly cd blockly npm install npm startnpm start会构建后打开 tests/playground.html一个自带工具栏切换、代码导出、事件日志的完整实验台。常用入口导航标准积木定义blocks/logic / math / loops / procedures 等分类清晰五种语言生成器generators/可运行示例demos/代码演示、云存储、移动端 WebView完整 API 类型声明typings/事件系统core/events/建议的练习顺序先在 playground 里用内置积木拼一个小程序并导出五段代码对比同一逻辑在不同语言的产物然后定义一个自己的积木JSON 方式 JS 生成函数最后给它接上addChangeListener做自动保存。这三件事做完就具备了做一套可视化编程产品的基本盘。【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考