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: {
    // 初始化 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 代码。

3. Blockly基本概念

参考链接

1. 官方文档

2. 中文文档