前言
由于公司最近有需求,要实现拖拽积木块生成代码,所以临时学了些 Blockly,再加上技术栈是 Vue,所以关于两者结合使用还是有些收获的。当时实现部分功能也是花了些时间的,所以想要记录下来,方便之后查阅。
目标
本篇文章的目标非常简单,具体如下:
- Blockly 简介
- Vue 项目中初始化 Blockly
- Blockly 基本概念
实现
1. Blockly 简介
Blockly 是谷歌开源的,在网页上运行的图形化编程语言。可以使用户以拖拽拼图的方式开发出应用程序,不需要任何的代码编写。
2. Vue 项目中初始化 Blockly
2.1 装包
npm i blockly -S
2.2 引入
import Blockly from 'blockly';
2.3 注入、生成 JavaScript 代码
注入很简单,只需要调用其 inject
方法,传入 location
和 options
参数即可。location
是注入 DOM 的位置,options
是配置项,本次先用到 toolbox
(工具箱)配置,它是侧边菜单,支持以 XML 或 JSON 指定其结构,用户可以从中创建块。
同时,Blockly 支持将块翻译成 JavaScript,Python,PHP,Lua,Dart 或其他语言,只需调用 workspaceToCode
方法即可。
具体代码如下:
<template>
<div class="demo1">
<el-row>
<el-col :span="12">
<div id="blockly-div"></div>
</el-col>
<el-col :span="12">
<div id="code-box">
<code>
{{code}}
</code>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
// 引入 Blockly
import Blockly from 'blockly';
export default {
name: 'Demo1',
data () {
return {
// Blockly 工作区实例
workspace: null,
// 工具箱配置
toolbox: {
// kind,分类,flyoutToolbox 为工具箱
"kind": "flyoutToolbox",
// contents,内容
"contents": [
{
// kind,分类,block,块
"kind": "block",
// type,块类型,controls_if 为官方内置的块名,表示 if 判断
"type": "controls_if"
},
{
"kind": "block",
// type,块类型,controls_if 为官方内置的块名,表示 while 判断
"type": "controls_whileUntil"
}
]
},
// Blockly 生成的代码
code: null
}
},
methods: {
// 初始化 Blockly
initBlockly() {
// 注入到 blockly-div 中
this.workspace = Blockly.inject('blockly-div', {
toolbox: this.toolbox
});
// 为工作区添加修改事件,触发调用 updateCode 函数
this.workspace.addChangeListener(this.updateCode);
},
// 更新当前块对应的 JS 代码
updateCode() {
// 获取当前块对应的 JS 代码
this.code = Blockly.JavaScript.workspaceToCode(this.workspace);
}
},
mounted() {
this.initBlockly();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#blockly-div {
width: 800px;
height: 400px;
margin-left: 80px;
}
#code-box {
width: 700px;
height: 378px;
padding: 10px;
border: 1px solid #c6c6c6;
}
</style>
2.4 代码效果
如上所示,可通过拖拽配置好的块,动态生成 JS 代码。