上篇我們學(xué)到Blockly中積木的標(biāo)準(zhǔn)元素類型，這篇我們將自定義積木，并將積木添加到工具箱中。

定義積木需要描述積木的外觀和行為，包括文本，顏色，形狀以及它可以連接的其他積木。積木的定義有兩種方法，一種編寫json或JS代碼，另一種使用開發(fā)者工具生成代碼。

1. JSON定義積木

Blockly有兩種定義積木的方法：JSON對(duì)象和JavaScript函數(shù)，JSON格式無(wú)法直接定義高級(jí)功能。在Web上，使用該initJson函數(shù)加載JSON格式。也可以在Blockly網(wǎng)頁(yè)中混合使用這兩種格式。最好盡可能使用JSON定義積木，并將JavaScript用于JSON不支持的積木定義部分。

積木顏色

積木的主要顏色由JSON colour屬性， block.setColour(..)函數(shù)或使用主題定義積木樣式定義。

{"colour": 160}

積木卡合

用戶可以使用nextStatement（后置連接）和 previousStatement（前置連接）連接器創(chuàng)建積木序列。在Blockly的標(biāo)準(zhǔn)布局中，這些連接位于頂部和底部，并且積木垂直堆疊。
后置連接,nextStatement:null

后置連接 -c

前置連接,previousStatement:null

前置連接 -c

積木輸出

積木具有單個(gè)輸出，輸出連接到值輸入。具有輸出的積木通常稱為值積木。
積木輸出,output:Type

積木輸出 -c

積木輸入

積木具有一個(gè)或多個(gè)輸入，其中每個(gè)輸入是可以在連接中結(jié)束的標(biāo)簽和字段序列。有三種類型的輸入，匹配卡合類型：

• 值輸入（Value input）：卡合到一個(gè)積木的輸出。加法，減法都是具有兩個(gè)值輸入的積木；
• 聲明輸入（Statement input）：卡合到前一個(gè)的語(yǔ)句積木。 while循環(huán)的嵌套部分輸入積木；
• 虛擬輸入（Dummy input）：沒有積木卡合。當(dāng)積木配置為使用外部值輸入時(shí)，類似于換行符。

JSON定義積木被構(gòu)造為變量字符串的序列（ message0，message1， ...），其中每一變量標(biāo)記（ %1， %2， ...）是一個(gè)元素或一個(gè)輸入?yún)?shù)，這正好匹配的JSON argsN數(shù)組中。

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

變量類型 -c

每個(gè)消息字符串與args相同數(shù)字的數(shù)組配對(duì)。例如， message0順其自在args0。插值標(biāo)記（ %1,, %2......）指的是args數(shù)組的項(xiàng)目。每個(gè)對(duì)象都有一個(gè) type字符串，type字符串即為元素類型。

積木提示

當(dāng)用戶將鼠標(biāo)懸停在積木上時(shí)，將提供即時(shí)幫助。如果文本很長(zhǎng)，它將自動(dòng)換行。
{"tooltip": "Tooltip text."}

積木幫助網(wǎng)址

積木可以有一個(gè)與之關(guān)聯(lián)的幫助頁(yè)面。通過(guò)右鍵單擊積木并從上下文菜單中選擇“幫助”。如果此值為則null則菜單將顯示為灰色。
{"helpUrl": "https://en.wikipedia.org/wiki/For_loop"}

積木事件

積木可以更改監(jiān)聽函數(shù)，通過(guò)使用函數(shù)調(diào)用setOnChange來(lái)添加該函數(shù)，工作空間的任何更改會(huì)調(diào)用函數(shù)。主要用于設(shè)置積木的警告文本或工作區(qū)外的通知。

2. 開發(fā)者工具

Blockly Developer Tools是一個(gè)基于Web的開發(fā)人員工具，可自動(dòng)執(zhí)行部分Blockly配置過(guò)程，包括創(chuàng)建自定義積木，構(gòu)建工具箱以及配置工作空間。

使用該工具的Blockly開發(fā)人員流程包括三個(gè)部分：

• 使用Block Factory和Block Exporter創(chuàng)建自定義積木
• 使用Workspace Factory構(gòu)建工具箱和默認(rèn)工作空間
• 使用Workspace Factory配置工作空間

Block Factory（積木設(shè)計(jì)）

"Block Factory"可自定義的創(chuàng)建積木定義和代碼生成器。在此選項(xiàng)卡上，您可以輕松創(chuàng)建，修改和保存自定義積木。

創(chuàng)建積木 -c

Block Library（庫(kù)管理）Import Block Library（導(dǎo)入）Download Block Library（導(dǎo)出）
積木庫(kù)管理，每個(gè)庫(kù)對(duì)應(yīng)一個(gè)唯一的名稱，積木將保存到瀏覽器的本地存儲(chǔ)中。清除瀏覽器的本地存儲(chǔ)將刪除您的積木。要無(wú)限期保存積木，必須下載庫(kù)。積木庫(kù)將作為XML文件下載，要想使用積木，需要將此積木導(dǎo)入進(jìn)來(lái)。導(dǎo)入積木庫(kù)會(huì)替換當(dāng)前積木，因此您最好導(dǎo)出當(dāng)前庫(kù)。

輸入輸出類型

Input：輸入類型，詳見JSON定義積木輸入
Field：元素，詳見上篇文章談到的10中標(biāo)準(zhǔn)輸入類型
Type：輸入或輸出類型，弱對(duì)象類型
Colour：積木顏色

Block Exporter（導(dǎo)出積木）

設(shè)計(jì)積木后，需要導(dǎo)出積木定義和代碼生成器，以便在應(yīng)用程序中使用它們。存儲(chǔ)在積木庫(kù)中的每個(gè)積木都將顯示在積木選擇器中。單擊積木以選擇或取消選擇它以進(jìn)行導(dǎo)出。

積木導(dǎo)出器 -c

Workspace Factory（工作空間設(shè)計(jì)）

Workspace Factory可以配置工具箱和工作空間中的默認(rèn)積木集，可以使用“Toolbox”和“Workspace”按鈕進(jìn)行切換設(shè)置。

工作空間 -c

操作

工作空間配置 -c

工具箱生成后，可以對(duì)工作空間進(jìn)行配置，配置的是Blockly.inject的第二個(gè)option參數(shù)。