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

概述

基于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
下载源码并解压后，可以在浏览器打开demos/fixed/index.html文件，验证 Blockly 的块是否可以拖动等。
demos有其他demo可以试用

1.图示:

2.运行run代码

function executeBlockCode() {
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    var initFunc = function (interpreter, scope) {
        var alertWrapper = function (text) {
            text = text ? text.toString() : '';
            return interpreter.createPrimitive(alert(text));
        };
        interpreter.setProperty(scope, 'alert',
            interpreter.createNativeFunction(alertWrapper));
        var promptWrapper = function (text) {
            text = text ? text.toString() : '';
            return interpreter.createPrimitive(prompt(text));
        };
        interpreter.setProperty(scope, 'prompt', interpreter.createNativeFunction(promptWrapper));
    };

    var myInterpreter = new Interpreter(code, initFunc);
    //此处循环执行功能(打印等)
    var stepsAllowed = 10000;
    while (myInterpreter.step() && stepsAllowed) {
        stepsAllowed--;
    }

    if (!stepsAllowed) {
        throw EvalError('Infinite loop.');
    }

	//输出转化出的代码
    console.log(myInterpreter.value);
}
document.getElementById('playButton').addEventListener('click', executeBlockCode);

3.左侧列表html

<category id="catLogic" colour="210" name="条件">
	<block type="tinet_filter_asr">block>
    <block type="tinet_indistinct_match">block>
category>

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];
};

---

参考文章 https://itbilu.com/other/relate/4JL8NjUP7.html#get-started