Android：Blockly分析

公司要搞少儿编程，我记录下Blockly的一些东东

Blockly主页是怎么样的？

image.png

左边的菜单栏代码如下

  
    
      
      
      
    
    
      
      
      
      
      
    
    
      
        
          
            10
          
        
      
      
    
    
      
        123
      
      
      
    
  

就是说菜单栏的每一项是category，子菜单是block。

右边的积木拼图代码如下

    
      
      
        
          EQ
          
            
              MULTIPLY
              
                
                  6
                
              
              
                
                  7
                
              
            
          
          
            
              42
            
          
        
      
      
        
          
            
              Hello
            
          
        
      
      
        
          
            
              nihao
            
          
        
      
    
  

简单分析一个block

image.png

这个block又好几个block组成，最外面的block是logic_compare，用来比较。
它由两个valule和一个field组成，field就是等于号，一个valule是6x7，另一个value是42。

一个block是怎么定义的？

在blocks\logic.js中定义的，例如一个用于比较的block

  // Block for comparison operator.
  {
    "type": "logic_compare",
    "message0": "%1 %2 %3",
    "args0": [
      {
        "type": "input_value",
        "name": "A"
      },
      {
        "type": "field_dropdown",
        "name": "OP",
        "options": [
          ["=", "EQ"],
          ["\u2260", "NEQ"],
          ["\u200F<", "LT"],
          ["\u200F\u2264", "LTE"],
          ["\u200F>", "GT"],
          ["\u200F\u2265", "GTE"]
        ]
      },
      {
        "type": "input_value",
        "name": "B"
      }
    ],
    "inputsInline": true,
    "output": "Boolean",
    "style": "logic_blocks",
    "helpUrl": "%{BKY_LOGIC_COMPARE_HELPURL}",
    "extensions": ["logic_compare", "logic_op_tooltip"]
  },

输入，输出都有吗？
args就是输入，output就是输出。完事了。

然后这些积木是怎么生成代码的？代码的定义在哪里？以生成python为例子
生成的代码都放在python_compressed.js，这些代码是自动生成的，通过build.py生成。

如何自定义block？？

简单简单，在blocks_compressed.js文件下加就可以了，例如简单的一个色块

Blockly.Blocks['wenfengblock'] = {
    init: function() {
      this.setColour(75);
   this.setTooltip("");
   this.setHelpUrl("");
    }
  };

image.png

然后再加到demos\generator\index.html里面引入

image.png

然后打开这个index.html就能看到效果啦！！一个绿绿的色块！！！

image.png

现在只加了色块，函数还没加，函数怎么加，后面再记录！