Blockly 官方支持生成多種代碼惊暴， javascript、python趁桃、lua等辽话，
這樣子，初學(xué)者就可以通過拖拽積木實現(xiàn)編程功能
參考
https://developers.google.com/blockly/guides/configure/web/code-generators
因為是個樣式小渣渣卫病，直接引入了UI庫
layui油啤、jquery
還是老樣子，
引入編譯好的blockly文件和必須的文件
<link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="blockly/blockly_compressed.js"></script>
<script src="blockly/blocks_compressed.js"></script>
<script src="blockly/javascript_compressed.js"></script>
<script src="blockly/msg/js/en.js"></script>
<script src="lib/jquery.1.11.3.min.js"></script>
<script src="lib/layui/layui.js"></script>
監(jiān)聽積木塊的變化并生成對應(yīng)的代碼
function myUpdateFunction(event) {
var code = Blockly.JavaScript.workspaceToCode(workspace);
document.getElementById('textarea').value = code;
}
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{ toolbox: document.getElementById('toolbox') });
workspace.addChangeListener(myUpdateFunction);
image.png
image.png
優(yōu)化
可以給代碼部分嵌入在線編輯器ACE蟀苛，或者其他組件樣式化代碼
