公司要搞少儿编程，我记录下Blockly的一些东东
Blockly主页是怎么样的？
image.png
左边的菜单栏代码如下
就是说菜单栏的每一项是category，子菜单是block。
右边的积木拼图代码如下
简单分析一个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
现在只加了色块，函数还没加，函数怎么加，后面再记录！