blockly构建自定义块及其工具

前言

blockly官网的构建自定义块工具已经不可用了(估计服务器挂了)，学了其源码之后，发现，其实它就存在于demos里面。

自己clone项目，然后install安装，运行网页。但是，虽然可以添加块，但是没有预览功能，查看控制台，发现其中有个prettify.js的预览文件加载不了，没有梯子的话也不行，这里自己找了一个js进行替换demos/blockfactory/index.html里面的prettify.js，即可使用了。

[TOC]

展示

image-20200727135057534

使用

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

image-20200727140144439

最基础的模板就是这样的，对应的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", 输出类型   
},