前言
blockly官網的構建自定義塊工具已經不可用了(估計服務器掛了)，學了其源碼之後，發現，其實它就存在於demos裏面。
自己clone項目，然後install安裝，運行網頁。但是，雖然可以添加塊，但是沒有預覽功能，查看控制檯，發現其中有個prettify.js的預覽文件加載不了，沒有梯子的話也不行，這裏自己找了一個js進行替換demos/blockfactory/index.html裏面的prettify.js，即可使用了。
[TOC]
展示
使用
github項目地址 mine分支
clone https://github.com/fly7632785/blockly.git
cd 項目
cd demos
npm install --registry=https://registry.npm.taobao.org (使用淘寶鏡像)
然後直接瀏覽器打開，本地文件demos/blockfactory/index.html即可使用
自定義塊
再簡單介紹一些這個構建自定義塊相關。
一般自定義塊是自定義這幾個地方：
1、塊名字
2、輸入
- value input 值輸入
- statement input 塊輸入
- dummy input 無輸入
3、輸入類型
- external 外接
- inline 內接
4、連接方式
- left output左連接（輸出）
- top + bottm connections 上下連接
- top connection上連接
- bottom connection 下連接
5、工具提示
6、幫助提示
7、顏色 0-360
最基礎的模板就是這樣的，對應的json爲
{
"type": "my_new_block",
"message0": "",
"colour": 230,
"tooltip": "",
"helpUrl": ""
}
示例：
{
"type": "controls_forever", 塊名字
"message0": "無限循環 %1 ", 塊上的文字 及其 參數 如果有多個則爲 %1 %2 %3
"args0": [ 參數 數組 可多個
{
"type": "input_statement", 參數類型 有很多 常用： field_input field_number field_dropdown input_value
"name": "DO" 參數名
}
],
"colour": "#04B2FF", 顏色
"inputsInline": true, 是否是輸入行內聯 （就是通常右邊直接接一個輸入塊）
"tooltip": "", tool提示
"helpUrl": "" 幫助提示
....其他
"output": "String", 輸出類型
},
input輸入
輸入有三種方式：
1、value input 值輸入（個人理解，起名）
2、statement input 塊輸入
3、dummy input 無輸入
很簡單，說明這塊塊需要一個輸入，這個輸入默認是any任意類型的值。
一般有幾個輸入 message裏面就有多少個 %1到%n
如果說你想要給塊加入文字，可以這樣，直接加入一個純文本值塊即可：
field
field也大致分爲這幾種：
1、文本
- 常量文本
- 變量文本
2、數字
3、角度
4、下拉
5、checkbox
6、color 顏色
7、變量
8、外鏈圖片
所有field展示
type
color
輸入類型
- 外接
- 內含
connect連接方式
- left output左連接（輸出）
- top + bottm connections 上下連接
- top connection上連接
- bottom connection 下連接
示例
示例：構建顏色相等
示例：判等
示例：無限循環
示例：電機
示例：如果
總結
blockly學習，最基礎的就是要搞懂如何自定義塊，如果你能夠通過json格式學會構建規則是什麼，固然是好的。但是一開始入手，完全可以通過這個構建工具，來實踐不同的效果，從而更好的學習如何自定義塊，摸清楚json的規則。
關於作者
作者是一個熱愛學習、開源、分享，傳播正能量，喜歡打籃球、頭髮還很多的程序員-。-
熱烈歡迎大家關注、點贊、評論交流！
簡書：https://www.jianshu.com/u/d234d1569eed
github：https://github.com/fly7632785