Blockly + Vue 之初始化

Blockly + Vue 之初始化

前言

由于公司最近有需求，要实现拖拽积木块生成代码，所以临时学了些 Blockly，再加上技术栈是 Vue，所以关于两者结合使用还是有些收获的。当时实现部分功能也是花了些时间的，所以想要记录下来，方便之后查阅。

目标

本篇文章的目标非常简单，具体如下：

1. Blockly 简介
2. Vue 项目中初始化 Blockly
3. 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: {// 初始化 BlocklyinitBlockly() {// 注入到 blockly-div 中this.workspace = Blockly.inject('blockly-div', {toolbox: lbox});// 为工作区添加修改事件，触发调用 updateCode 函数this.workspace.addChangeListener(this.updateCode);},// 更新当前块对应的 JS 代码updateCode() {// 获取当前块对应的 JS 代码de = 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 代码。

3. Blockly基本概念

参考链接

1. 官方文档

2. 中文文档