blockly入门教程

blockly的hello world 跑起来看看

1   引入两个js文件 

blockly内核文件 blockly_compressed.js 

基础积木集文件  blocks_compressed.js

2 页面两个模块 

积木拼装区 ，画板    一个唯一id的div（拖拽的积木在哪拼）

积木工具区 ，积木箱    一个xml文件或者js字符串 （从哪里拖拽积木）

3 注入blockly  初始化blockly

头一个js文件会在页面中生成一个全局对象 Blockly，直接在web控制台中也可以看到这个全局对象

初始化就是调用其中的inject方法，传入拼装区的id和积木箱的id

如图 

 接下来就是把这个积木转化成相应的代码，javascript_compressed.js这个js文件是将积木转成js代码

 function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      console.log(code,2);
    }

    function runCode() {
      // Generate JavaScript code and run it.
      window.LoopTrap = 1000;
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }

调用方法将代码打印出来或者在浏览器中运行