Blockly-可视化编程工具入门待更新

心已赠人 2022-03-08 20:37 1071阅读 0赞

### 概述 ###

基于Web的、开源的、可视化程序编辑器。  
Blockly 是一个完全客户端应用，它无需服务端的任何支持（除非你要使用云存储等服务端功能），且没有第三方的依赖（除非你想重新编译内核），一切都是开源的。

### 优势 ###

1.  代码可导出 - Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。
2.  开源 - Blockly 开放所有源码，你可以复制、修改、并将其应用到你的网站或Andorid等应用中
3.  可扩展 - 你可以按需要调整 Blockly，包括根据你的API添加新自定义“块”、移不需要的块和功能等。
4.  高可用 - Blockly 不是玩具，你可以用它来实现复杂的编程任务 国际化 - Blockly 已被翻译40+种语言 Blockly
5.  编辑器快速集成到Web、Android或iOS环境中。

### 通过demo二次开发 ###

下载zip [https://github.com/google/blockly/zipball/master][https_github.com_google_blockly_zipball_master]  
下载源码并解压后，可以在浏览器打开`demos/fixed/index.html`文件，验证 Blockly 的块是否可以拖动等。  
`demos`有其他demo可以试用

#### 1.图示: ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzYyNjc3_size_16_color_FFFFFF_t_70]

#### 2.运行run代码 ####

### 3.左侧列表html ###

### 4.block的定义js ###

Blockly.Blocks["tinet_indistinct_match"] = { 
        init: function () { 
            this.jsonInit({ 
                "type": "tinet_indistinct_match",
                "message0": "项目 %1 匹配 %2",
                "args0": [    //参数匹配
                    { 
                        "type": "input_value",
                        "name": "ITEM",
                        "check": "Variable"
                    },
                    { 
                        "type": "field_input",
                        "name": "EXPRESSION",
                        "text": "表达式"   //默认值
                    }
                ],
                "inputsInline": true,
                "output": null,
                "colour": 230,
                "tooltip": "",
                "helpUrl": ""
            })
        }
    }

### 5.生成代码的回调js ###

Blockly.JavaScript['tinet_indistinct_match'] = function (block) { 
    	var item = Blockly.JavaScript.valueToCode(block, 'ITEM', Blockly.JavaScript.ORDER_ATOMIC);
    	item = item === '' ? 'null' : item;
    	var express = block.getFieldValue('EXPRESSION');//取出表达式处内容
    	express = express === '正则表达式' ? '' : express;
    	var code = 'service.check(\'{"checkType":7, "regular":"' + express + '"}\', ' + item + ', strRegService, result)';
    	return [code, Blockly.JavaScript.ORDER_ATOMIC];
    };

![在这里插入图片描述][20190312174924155.png]

--------------------

参考文章 [https://itbilu.com/other/relate/4JL8NjUP7.html\#get-started][https_itbilu.com_other_relate_4JL8NjUP7.html_get-started]

[https_github.com_google_blockly_zipball_master]: https://github.com/google/blockly/zipball/master
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzYyNjc3_size_16_color_FFFFFF_t_70]: /images/20220309/cf431fec569e432794634a09eba30a00.png
[20190312174924155.png]: /images/20220309/4af4f61919504700a6ab2a64f06e77ed.png
[https_itbilu.com_other_relate_4JL8NjUP7.html_get-started]: https://itbilu.com/other/relate/4JL8NjUP7.html#get-started