blockly的hello world 跑起来看看
1 引入两个js文件
blockly内核文件 blockly_compressed.js
基础积木集文件 blocks_compressed.js
2 页面两个模块
积木拼装区 ,画板 一个唯一id的div(拖拽的积木在哪拼)
积木工具区 ,积木箱 一个xml文件或者js字符串 (从哪里拖拽积木)
3 注入blockly 初始化blockly
头一个js文件会在页面中生成一个全局对象 Blockly,直接在web控制台中也可以看到这个全局对象
初始化就是调用其中的inject方法,传入拼装区的id和积木箱的id
如图
接下来就是把这个积木转化成相应的代码,javascript_compressed.js这个js文件是将积木转成js代码
function showCode() {
// Generate JavaScript code and display it.
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.log(code,2);
}
function runCode() {
// Generate JavaScript code and run it.
window.LoopTrap = 1000;
Blockly.JavaScript.INFINITE_LOOP_TRAP =
'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try {
eval(code);
} catch (e) {
alert(e);
}
}
调用方法将代码打印出来或者在浏览器中运行