說(shuō)明：

1. blockly代碼下載，基礎(chǔ)代碼建議先閱讀可視化編程工具blockly——工作區(qū)、可視化編程工具blockly——可調(diào)整大小的工作區(qū)兩篇文章；

2. blockly工具箱支持xml和json兩種方式定義，本文使用xml演示，json方式創(chuàng)建工具箱可參考google官網(wǎng)文檔https://developers.google.cn/blockly/guides/configure/web/toolbox。

創(chuàng)建分組的工具箱

工具箱就是可供用戶使用的代碼塊，默認(rèn)顯示在工作區(qū)的左側(cè)，如果代碼塊較多的話最好能分類組織，工具箱的代碼通過(guò)在index.html中id為toolbox的xml代碼進(jìn)行定義，blcokly會(huì)解析xml并注入到頁(yè)面圖形化的工具箱代碼DOM，如下圖的工具箱包含了控制、邏輯兩個(gè)類別。

可視化編程工具blockly——工具箱

對(duì)應(yīng)的xml定義代碼如下，其中category定義了一個(gè)分類，block定義了代碼塊，type指定的類別都是blockly默認(rèn)提供的，定義代碼在./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="數(shù)學(xué)">
      <block type="math_constant"></block>
      <category name="算術(shù)">
        <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

設(shè)置分組顏色

工具箱分組類別還可以指定顏色，通過(guò)colour屬性進(jìn)行設(shè)定，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——工具箱

動(dòng)態(tài)類別的代碼塊

blockly提供的工具箱中有兩類有著特殊的行為，分別是變量和函數(shù)，它們的xml定義中擁有custom屬性，分別為VARIABLE和PROCEDURE，代碼及顯示效果如下：

<xml id="toolbox" style="display: none">
    <category name="變量" custom="VARIABLE"></category>
    <category name="函數(shù)" custom="PROCEDURE"></category>
  </xml>

可視化編程工具blockly——工具箱

其中變量分組中點(diǎn)擊創(chuàng)建變量并按照提示輸入變量名稱后會(huì)生成如下三個(gè)代碼塊：

[圖片上傳失敗...(image-49a16f-1614355046453)]

函數(shù)分組中包含三個(gè)代碼塊，前兩個(gè)為方法定義，一個(gè)方法帶有返回值，第三個(gè)為條件返回的代碼塊，通過(guò)這三個(gè)代碼塊我們可以編寫新的方法來(lái)生成新的代碼塊，如下定義一個(gè)inc方法會(huì)生成一個(gè)新的代碼塊inc，該方法將輸入的x變量增加1并返回，新生成的代碼塊又可以作為代碼塊進(jìn)行使用：

[圖片上傳失敗...(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不需要事先設(shè)置，默認(rèn)值為真（true）；
2. math_number通過(guò)field設(shè)置缺省值42；
3. math_arithmetic使用field、value，加上shadow blocks實(shí)現(xiàn)了缺省值的設(shè)置。