Blockly官网： https://developers.google.com/blockly
Blockly仓库： https://github.com/google/blockly
Blockly Codelabs： https://blocklycodelabs.dev/个人开发人员工具 http://blockly.daobanmojie.com/demos/blockfactory/
本文章的演示页面 http://blockly.daobanmojie.com/demo/simple/
固定工作区demo
准备文件
首先前往 Blockly Developer Tools配置自己的workspace和Toolbox
不会科学上网的，可以使用我在我的服务器搭建的 Blockly Developer Tools
http://blockly.daobanmojie.com/demos/blockfactory/
制作工作区中进行配置，+添加自己需要的菜单，并对工作区进行配置，最后导出所有文件。
下载的三个文件分别为workspace.xml workspace.js toolbox.xml
workspace.xml
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>workspace.js
/* TODO: Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */
var toolbox = document.getElementById("toolbox");
var options = {
toolbox : toolbox,
collapse : true,
comments : true,
disable : true,
maxBlocks : Infinity,
trashcan : true,
horizontalLayout : false,
toolboxPosition : 'start',
css : true,
media : 'http://blockly.daobanmojie.com/media/',
rtl : false,
scrollbars : true,
sounds : true,
oneBasedIndex : true,
grid : {
spacing : 20,
length : 1,
colour : '#888',
snap : false
},
zoom : {
controls : true,
wheel : true,
startScale : 1,
maxScale : 5,
minScale : 0.3,
scaleSpeed : 1.2
}
};
/* Inject your workspace */
var workspace = Blockly.inject(/* TODO: Add ID of div to inject Blockly into */, options);
/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
var workspaceBlocks = document.getElementById("workspaceBlocks");
/* Load blocks to workspace. */
Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);toolbox.xml
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>创建页面
index.html
新建一个index.html页面，如下：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
</head>
<body>
</body>
</html>引入 Blockly 脚本和核心块集
引入 Blockly 脚本和核心块集，以及用户语言消息。可以下载到本地，也可以直接引用网络上的。
方法一
使用本地的文件。
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/js/zh-hans.js"></script>
</head>方法二
使用unpkg上的blockly文件。
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<script src="https://unpkg.com/blockly/msg/zh-hans.js"></script>
</head>方法三
使用其他网络上部署的文件，这里是我自己的。
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="http://blockly.daobanmojie.com/blockly_compressed.js"></script>
<script src="http://blockly.daobanmojie.com/blocks_compressed.js"></script>
<script src="http://blockly.daobanmojie.com/msg/js/zh-hans.js"></script>
</head>引用文件
接下来，开始把之前下载的三个文件也引入到index.html中。
workspace.xml
打开workspace.xml，复制代码添加index.html文件的<body></body>标签中。
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
</body>如果想在工作区有默认的显示，则可以在此<xml>中进行添加，如：
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
<block type="controls_if" id="1" x="12" y="13">
<value name="DO0">
<block type="controls_if" id="2"></block>
</value>
</block>
</xml>blocklyDiv
打开index.html，在页面正文的某处添加一个空 div 并设置其大小：
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
</body>toolbox.xml
打开toolbox.xml,复制我们之前配置的工具箱菜单，并粘贴到index.html中。
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
</body>workspace.js
打开workspace.js，并在Blockly.inject();添加创建的div的id。
var workspace = Blockly.inject("blocklyDiv", options);如果使用的是本地资源，则修改如下代码
media : '/media/', 然后引入到index.html的末尾。
<body>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none"></xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
<script src="workspace.js"></script>
</body>代码生成器
最核心的内容就是代码生成了
生成器类应该在blockly_compressed.js. 例如，这是包含的 JavaScript 生成器：
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>用户的块可以通过以下调用随时从您的应用程序导出到代码中：
var code = Blockly.JavaScript.workspaceToCode(workspace);替换JavaScript与Python，PHP，Lua，或Dart在这两个先前行切换所产生的语言。
这里呢我在index.html中写了一个简单的函数，在控制台进行打印。
<script src="../../javascript_compressed.js"></script>
<script>
function translate() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.log(code);
}
</script>到这里配置就结束了，配置到服务器，然后浏览器打开即可。
演示页面 http://blockly.daobanmojie.com/demo/simple/
完整代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>盗版摩羯 Blockly Simple Demo</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/js/zh-hans.js"></script>
</head>
<body>
<h2>控制台输入 translate() 查看代码生成器内容！</h2>
<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
<block type="controls_if" id="1" x="12" y="13">
<value name="DO0">
<block type="controls_if" id="2"></block>
</value>
</block>
</xml>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
<category name="基本" colour="#5b80a5">
<block type="controls_if"></block>
<block type="logic_boolean">
<field name="BOOL">TRUE</field>
</block>
</category>
<category name="测试" colour="#5ba55b">
<block type="controls_repeat_ext">
<value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml>
<script src="workspace.js"></script>
<script src="../../javascript_compressed.js"></script>
<script>
function translate() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.log(code);
}
</script>
</body>
</html>活动工作区demo
演示页面 http://blockly.daobanmojie.com/demo/overlay/
实际测试中，把固定的<div>更改为如下，即可实现。
<div id="blocklyDiv" style="height: 100%; width: 100%;"></div>以下是参考官网给的例程，对于固定工作区而言需要修改的地方
index.html
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="blocklyArea" style="height: 100%;"></div>
<div id="blocklyDiv" style="position: absolute"></div>
</body>/* TODO: Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */
var toolbox = document.getElementById("toolbox");
var options = {
toolbox: toolbox,
collapse: true,
comments: true,
disable: true,
maxBlocks: Infinity,
trashcan: true,
horizontalLayout: false,
toolboxPosition: 'start',
css: true,
media: '/media/',
rtl: false,
scrollbars: true,
sounds: true,
oneBasedIndex: true
};
/* 固定工作区
// Inject your workspace
var workspace = Blockly.inject(blocklyDiv, options);
// Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load
// TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory.
var workspaceBlocks = document.getElementById("workspaceBlocks");
// Load blocks to workspace.
Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
*/
// 自动工作区大小
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, options);
var onresize = function (e) {
// 计算区块区域的绝对坐标和尺寸。
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// 将blocklyDiv置于blocklyArea上方。
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
