本文详解如何通过标准 html 结构加载 blockly 库、注入自定义积木定义（由 blockly factory 生成），并正确配置工作区与工具箱，避免因脚本加载顺序、dom 元素 id 不匹配或 toolbox 格式错误导致的运行时异常。
本文详解如何通过标准 html 结构加载 blockly 库、注入自定义积木定义（由 blockly factory 生成），并正确配置工作区与工具箱，避免因脚本加载顺序、dom 元素 id 不匹配或 toolbox 格式错误导致的运行时异常。
要在网页中成功使用 Blockly Factory 生成的自定义积木（如 color_rgb），关键在于确保三要素协同工作：Blockly 运行时库正确加载、积木定义代码提前执行、工作区注入时 toolbox 配置格式合规。以下是经过验证的完整实现方案：
✅ 正确的 HTML 结构要点
- 引入 Blockly 官方 CDN 脚本（推荐 blockly.min.js）——必须放在 <script src="index.js"></script> 之前，否则 Blockly.defineBlocksWithJsonArray 会报 ReferenceError；
- 确保 index.js 在 DOM 构建前执行（即置于 中或使用 defer），以便积木类型 color_rgb 在 Blockly.inject() 前已被注册；
- DOM 容器 ID 必须与 Blockly.inject() 参数严格一致（原例中 id="defineBlocksWithJsonArray" 与 JS 中 'defineBlocksWithJsonArray' 匹配，但更推荐语义化命名如 blocklyDiv）；
- toolbox 必须为对象格式（非字符串）：旧写法 toolbox: "color_rgb" 已废弃；新标准要求使用 flyoutToolbox 结构，明确声明 block 类型。
✅ 修正后的完整示例
<meta charset="utf-8"><title>Blockly Custom Block Demo</title><!-- 1. 优先加载 Blockly 核心库 --><script src="https://unpkg.com/blockly/blockly.min.js"></script><!-- 2. 加载自定义积木定义（必须在 Blockly 后、inject 前） --><script src="index.js"></script><style>
html, body { height: 100%; margin: 0; }
body {
background-color: #fff;
font-family: sans-serif;
overflow: hidden;
}
#blocklyDiv {
height: 90vh; /* 推荐使用 vh 单位替代 %，避免父容器高度未定义问题 */
width: 100%;
}
</style><!-- 3. 唯一且匹配的容器 --><div id="blocklyDiv"></div>
<!-- 4. 初始化工作区（务必在 DOM 加载后执行） -->
<script>
const toolbox = {
kind: 'flyoutToolbox',
contents: [{
kind: 'block',
type: 'color_rgb' // 此 type 必须与 index.js 中 define 的 type 完全一致
}]
};
const workspace = Blockly.inject('blocklyDiv', {
toolbox: toolbox,
scrollbars: true,
trashcan: true
});
</script>
⚠️ 注意事项与常见陷阱
- 脚本顺序不可颠倒：blockly.min.js → index.js → inject 脚本，缺一不可；
- 避免 document.write() 或异步加载干扰：若 index.js 使用 fetch 或 import() 动态加载，需确保 defineBlocksWithJsonArray 执行完毕再调用 inject；
- index.js 中 generator 实现非必需：仅当需导出 JavaScript 代码时才需补全 javascriptGenerator；若仅用于可视化编辑，可暂留空或注释掉 generator 部分；
- 调试技巧：在浏览器控制台输入 Blockly.Blocks['color_rgb']，若返回函数则表示积木已成功注册；若为 undefined，说明 index.js 未执行或执行过晚。
遵循以上结构，即可稳定加载 Blockly Factory 生成的自定义积木，为后续扩展图形化编程能力奠定坚实基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
