Blockly 代码生成

Blockly 官方支持生成多种代码， javascript、python、lua等，
这样子，初学者就可以通过拖拽积木实现编程功能

参考

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>

监听积木块的变化并生成对应的代码

      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

优化

可以给代码部分嵌入在线编辑器ACE，或者其他组件样式化代码