Vue3 + vite 中使用 scratch-block 记录

安装scratch-block库

在项目中直接使用包管理器安装

npm install scratch-block

或

yarn add scratch-block

在vue项目入口index.html中引入要用到的scratch js文件

因为scratch-block不是ES6模块，无法在组件中直接使用import导入，使用import导入后会报错blockly_uncompressed_vertical.js?v=f99a78dd:28 Uncaught TypeError: Cannot set properties of undefined (setting 'BLOCKLY_DIR')

因此直接在入口文件中的script标签中导入。

修改blockly_uncompressed_vertical.js文件

这里需要修改一下window.BLOCKLY_BOO里匹配到的dir路径

 

 否则下方拼接的路径中是找不到的core等文件夹的。

 

到此为止scratch-block导入已经没问题了。已经可以在组件中直接使用Blockly对象。

需要注意的是，因为scratch-block是从google blockly早期版本上分支出来，blockly的新特性的方法可能无法使用，更多的还有待继续研究。

在组件中使用

我的业务逻辑是需要根据用户传入的表格数据自定义指令块，所以下面展示的是创建一个自定义指令块，并显示到工作空间中的demo。

<template>
    <div>
      <div id="blocklyDiv" :style="{height:'80vh',width:'35vw'}"></div>
    </div>
</template>

  <script>
  
  export default {

    setup() {
      // 注意不要在setup函数里创建Scratch Blocks 工作空间，否则workspace会变为响应式，进而在拖动块时报错。
      const workspace = null

      return {
        workspace,
      };
    },

    mounted() {
      // 1. 创建一个新的 Scratch Blocks 工作空间 
      this.workspace = Blockly.inject('blocklyDiv',{
        media: '../../../node_modules/scratch-blocks/media/', //资源目录
        toolbox: '',    // 工具栏的XML定义，包含可用的块和工具
      });
      // 2. 自定义一个块
      let customBlockDefinition = {
          type: 'custom_block',
          message0: 'custom_block %1 %2 %3' ,
          args0: [
                  {
                  type: 'field_label',
                  name: 'Test1',
                  text: 'TEXT',
                  },
                  {
                  type: 'field_input',
                  name: 'Test2',
                  text: 'hello',
                  },
                  {
                  type: 'field_dropdown',
                  name: 'dropdown',
                  options: [
                      ['a', '1'],
                      ['b', '2'],
                      ['c', '3'],
                  ],
                  },
          ],
        colour: '#ff0000',
        tooltip: 'This is a custom block',
        previousStatement: null,
        nextStatement: null,
      };
      // 3. 注册自定义块
      Blockly.Blocks['custom_block'] = {
          init: function() {
            this.jsonInit(customBlockDefinition);
          },
        };
      // 4. 使用 `Blockly.Xml.textToDom` 函数将块的 XML 定义转换为 DOM 对象
      var xmlText = `
      <xml xmlns="http://www.w3.org/1999/xhtml">
        <block type="custom_block">
        </block>
      </xml>`;

      var xml = Blockly.Xml.textToDom(xmlText);

      // 5. 使用 `Blockly.Xml.domToBlock` 函数将 DOM 对象转换为块，并将其添加到工作空间
      Blockly.Xml.domToWorkspace(xml, this.workspace);


    },
  };
  </script>

 效果如下

 

参考

1. 最开始在项目中使用的是blockly的库，生成指令的方式和各种属性、API都可以参考Google blockly官方文档。
2. 基于blockly的小游戏demo。
3. 一些介绍blockly和scratch3.0的文章：# blockly入门与介绍 # Scratch的前世今生# Blockly与Scratch3.0的比较分析及选型建议。
4. 《Scratch底层架构源码分析》 => 样章。

作者：Brycen
链接：https://juejin.cn/post/7234057613776060473
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。