blockly + vue2 学习笔记1

vue2 项目集成blockly

1.npm 新建一个vue 项目（过程略...）
2.从github 上下载blockly 代码（可能需要搭梯子），个人建议从gitee 上下载

1614914109(1).png

<!-- 基础依赖文件 -->
    <script src="static/blockly/code/blockly_compressed.js"></script>
    <script src="static/blockly/code/blocks_compressed.js"></script>
    <script src="static/blockly/code/javascript_compressed.js"></script>
    <!-- 中文语言包 -->
    <script src="static/blockly/code/zh-hans.js"></script>
    <!-- 创建自定义的块时候需要用到的依赖 -->
    <script src="static/blockly/code/closure/goog/base.js"></script>
    <!-- 自定义块 -->
    <script src="static/blockly/code/blocks/b1.js"></script>
    <script src="static/blockly/code/generators/b1.js"></script>

3.封装成一个基础的vue组件

<template>
  <div class="blockly">
    <!-- 工作区 -->
    <div id="blocklyDiv"></div>
    <!-- 工具栏 -->
    <xml id="toolbox" style="display: none">
      <category name="Logic" colour="%{BKY_LOGIC_HUE}">
        <block type="controls_if"></block>
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_negate"></block>
        <block type="logic_boolean"></block>
      </category>
      <category name="Loops" colour="%{BKY_LOOPS_HUE}">
        <block type="controls_repeat_ext">
          <value name="TIMES">
            <block type="math_number">
              <field name="NUM">10</field>
            </block>
          </value>
        </block>
        <block type="controls_whileUntil"></block>
      </category>
      <category name="Math" colour="%{BKY_MATH_HUE}">
        <block type="math_number">
          <field name="NUM">123</field>
        </block>
        <block type="math_arithmetic"></block>
        <block type="math_single"></block>
      </category>
      <category name="Text" colour="%{BKY_TEXTS_HUE}">
        <block type="text"></block>
        <block type="text_length"></block>
        <block type="text_print"></block>
      </category>
     <category name="测试" colour="%{BKY_TEXTS_HUE}">
        <block type="b1"></block>
      </category>
    </xml>

  </div>
</template>

xml 部分为工具箱的配置组成，后续有需要可以改成json 配置的方式。

1614924063(1).png

4.设置工作区宽高自适应。这里并没有照抄官方文档上的代码，而是按照自己的想法做了下修改（可能是我的水平还不够高，完全没看懂官方教程上的一长串代码的意义）

  mounted() {
    var blocklyDiv = document.getElementById('blocklyDiv');
    this.demoWorkspace = Blockly.inject(blocklyDiv,      // 初始化工作区
        {media: 'static/blockly/code/media/',            //指认媒体文件夹，主要存放一些需要用到的图标和声音文件
         toolbox: document.getElementById('toolbox')});   // 绑定工具箱的xml 配置

    var onresize = function(e) {     // 宽高自适应
      Blockly.svgResize(this.demoWorkspace);
    };
    window.addEventListener('resize', onresize, false);
    Blockly.svgResize(this.demoWorkspace);
  },