说明：

1. blockly代码下载，基础代码建议先阅读可视化编程工具blockly——工作区、可视化编程工具blockly——可调整大小的工作区两篇文章；

2. blockly工具箱支持xml和json两种方式定义，本文使用xml演示，json方式创建工具箱可参考google官网文档https://developers.google.cn/blockly/guides/configure/web/toolbox。

创建分组的工具箱

工具箱就是可供用户使用的代码块，默认显示在工作区的左侧，如果代码块较多的话最好能分类组织，工具箱的代码通过在index.html中id为toolbox的xml代码进行定义，blcokly会解析xml并注入到页面图形化的工具箱代码DOM，如下图的工具箱包含了控制、逻辑两个类别。

可视化编程工具blockly——工具箱

对应的xml定义代码如下，其中category定义了一个分类，block定义了代码块，type指定的类别都是blockly默认提供的，定义代码在./blockly/blocks目录下

<xml id="toolbox" style="display: none">
    <category name="控制">
      <block type="controls_if"></block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
    </category>
    <category name="逻辑">
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_boolean"></block>
    </category>
  </xml>

工具箱还可以多层嵌套定义，如下xml定义的工具箱效果如下：

<xml id="toolbox" style="display: none">
    <category name="核心">
      <category name="控制">
        <block type="controls_if"></block>
        <block type="controls_whileUntil"></block>
      </category>
      <category name="逻辑">
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_boolean"></block>
      </category>
    </category>
    <category name="数学">
      <block type="math_constant"></block>
      <category name="算术">
        <block type="math_arithmetic"></block>
        <block type="math_number"></block>
      </category>
      <category name="三角">
        <block type="math_single"></block>
        <block type="math_trig"></block>
      </category>
    </category>
  </xml>

image.png

设置分组颜色

工具箱分组类别还可以指定颜色，通过colour属性进行设定，colour值的范围是0~360，如下xml代码生成的工具箱效果如下：

<xml id="toolbox" style="display: none">
    <category name="逻辑" colour="20">
      <block type="controls_if"></block>
      <block type="controls_whileUntil"></block>
      <block type="controls_for">
    </category>
    <category name="控制" colour="200">
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_boolean"></block>
    </category>
</xml>

可视化编程工具blockly——工具箱

动态类别的代码块

blockly提供的工具箱中有两类有着特殊的行为，分别是变量和函数，它们的xml定义中拥有custom属性，分别为VARIABLE和PROCEDURE，代码及显示效果如下：

<xml id="toolbox" style="display: none">
    <category name="变量" custom="VARIABLE"></category>
    <category name="函数" custom="PROCEDURE"></category>
  </xml>

可视化编程工具blockly——工具箱

其中变量分组中点击创建变量并按照提示输入变量名称后会生成如下三个代码块：

[图片上传失败...(image-49a16f-1614355046453)]

函数分组中包含三个代码块，前两个为方法定义，一个方法带有返回值，第三个为条件返回的代码块，通过这三个代码块我们可以编写新的方法来生成新的代码块，如下定义一个inc方法会生成一个新的代码块inc，该方法将输入的x变量增加1并返回，新生成的代码块又可以作为代码块进行使用：

[图片上传失败...(image-fc14a3-1614355046453)]

带缺省值的代码块

有些代码块希望拥有缺省值，如下代码生成工具箱效果如下：

<xml id="toolbox" style="display: none">
    <block type="logic_boolean"></block>
    <block type="math_number">
      <field name="NUM">42</field>
    </block>
    <block type="math_arithmetic">
      <field name="OP">ADD</field>
      <value name="A">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="B">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
    </block>
  </xml>

可视化编程工具blockly——工具箱

其中：

1. logic_boolean不需要事先设置，默认值为真（true）；
2. math_number通过field设置缺省值42；
3. math_arithmetic使用field、value，加上shadow blocks实现了缺省值的设置。