前言

blockly官網(wǎng)的構(gòu)建自定義塊工具已經(jīng)不可用了(估計(jì)服務(wù)器掛了)厚者，學(xué)了其源碼之后躁劣，發(fā)現(xiàn)，其實(shí)它就存在于demos里面籍救。

自己clone項(xiàng)目习绢，然后install安裝，運(yùn)行網(wǎng)頁(yè)蝙昙。但是闪萄，雖然可以添加塊，但是沒有預(yù)覽功能奇颠，查看控制臺(tái)败去，發(fā)現(xiàn)其中有個(gè)prettify.js的預(yù)覽文件加載不了，沒有梯子的話也不行烈拒，這里自己找了一個(gè)js進(jìn)行替換demos/blockfactory/index.html里面的prettify.js圆裕，即可使用了。

[TOC]

展示

image-20200727135057534

使用

github項(xiàng)目地址 mine分支

clone https://github.com/fly7632785/blockly.git
cd 項(xiàng)目
cd demos
npm install --registry=https://registry.npm.taobao.org   (使用淘寶鏡像)

然后直接瀏覽器打開荆几，本地文件demos/blockfactory/index.html即可使用

自定義塊

再簡(jiǎn)單介紹一些這個(gè)構(gòu)建自定義塊相關(guān)吓妆。

一般自定義塊是自定義這幾個(gè)地方：

1、塊名字

2吨铸、輸入

• value input 值輸入
• statement input 塊輸入
• dummy input 無(wú)輸入

3行拢、輸入類型

• external 外接
• inline 內(nèi)接

4、連接方式

• left output左連接（輸出）
• top + bottm connections 上下連接
• top connection上連接
• bottom connection 下連接

5诞吱、工具提示

6舟奠、幫助提示

7、顏色 0-360

image-20200727140144439

最基礎(chǔ)的模板就是這樣的房维，對(duì)應(yīng)的json為

{
  "type": "my_new_block",
  "message0": "",
  "colour": 230,
  "tooltip": "",
  "helpUrl": ""
}

示例：

{
  "type": "controls_forever",      塊名字
  "message0": "無(wú)限循環(huán) %1 ",       塊上的文字 及其 參數(shù)   如果有多個(gè)則為 %1 %2 %3
  "args0": [    參數(shù) 數(shù)組 可多個(gè)
    {
      "type": "input_statement",    參數(shù)類型   有很多 常用： field_input field_number field_dropdown  input_value
      "name": "DO"   參數(shù)名
    }
  ],
  "colour": "#04B2FF",  顏色
  "inputsInline": true,  是否是輸入行內(nèi)聯(lián) （就是通常右邊直接接一個(gè)輸入塊）
  "tooltip": "", tool提示
  "helpUrl": "" 幫助提示
  ....其他
  "output": "String", 輸出類型   
},

input輸入

image-20200727140525272

輸入有三種方式：

1沼瘫、value input 值輸入（個(gè)人理解，起名）

2咙俩、statement input 塊輸入

3耿戚、dummy input 無(wú)輸入

image-20200727144245279

image-20200727140830168

很簡(jiǎn)單，說明這塊塊需要一個(gè)輸入，這個(gè)輸入默認(rèn)是any任意類型的值溅话。

一般有幾個(gè)輸入 message里面就有多少個(gè) %1到%n

如果說你想要給塊加入文字晓锻，可以這樣，直接加入一個(gè)純文本值塊即可：

image-20200727141711509

field

field也大致分為這幾種：

1飞几、文本

• 常量文本
• 變量文本

2砚哆、數(shù)字

3、角度

4屑墨、下拉

5躁锁、checkbox

6、color 顏色

7卵史、變量

8战转、外鏈圖片

image-20200727142139845

所有field展示

image-20200727142321394

type

image-20200727143058107

color

image-20200727143114637

輸入類型

• 外接

image-20200727143402353

• 內(nèi)含

image-20200727143434603

connect連接方式

• left output左連接（輸出）

image-20200727143620428

• top + bottm connections 上下連接

image-20200727143649514

• top connection上連接

image-20200727143702377

• bottom connection 下連接

image-20200727143714600

示例

示例：構(gòu)建顏色相等

image-20200727145048790

示例：判等

image-20200727145304973

示例：無(wú)限循環(huán)

image-20200727145355368

示例：電機(jī)

image-20200727150041851

示例：如果

image-20200727150628793

總結(jié)

blockly學(xué)習(xí)，最基礎(chǔ)的就是要搞懂如何自定義塊以躯，如果你能夠通過json格式學(xué)會(huì)構(gòu)建規(guī)則是什么槐秧，固然是好的。但是一開始入手忧设，完全可以通過這個(gè)構(gòu)建工具刁标，來實(shí)踐不同的效果，從而更好的學(xué)習(xí)如何自定義塊址晕，摸清楚json的規(guī)則膀懈。

關(guān)于作者

作者是一個(gè)熱愛學(xué)習(xí)、開源谨垃、分享启搂，傳播正能量，喜歡打籃球刘陶、頭發(fā)還很多的程序員-胳赌。-

熱烈歡迎大家關(guān)注、點(diǎn)贊匙隔、評(píng)論交流疑苫！

簡(jiǎn)書：http://www.reibang.com/u/d234d1569eed

github：https://github.com/fly7632785

CSDN：https://blog.csdn.net/fly7632785

掘金：https://juejin.im/user/5efd8d205188252e58582dc7/posts