Blockly-可视化编程工具入门待更新
概述
基于Web的、开源的、可视化程序编辑器。
Blockly 是一个完全客户端应用,它无需服务端的任何支持(除非你要使用云存储等服务端功能),且没有第三方的依赖(除非你想重新编译内核),一切都是开源的。
优势
- 代码可导出 - Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。
- 开源 - Blockly 开放所有源码,你可以复制、修改、并将其应用到你的网站或Andorid等应用中
- 可扩展 - 你可以按需要调整 Blockly,包括根据你的API添加新自定义“块”、移不需要的块和功能等。
- 高可用 - Blockly 不是玩具,你可以用它来实现复杂的编程任务 国际化 - Blockly 已被翻译40+种语言 Blockly
- 编辑器快速集成到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