google可视化编程工具blockly介绍

1、什么是blockly？

blockly是google发布的可视化编程工具，是一个可用于Web、Android、iOS的可视化代码编辑器库；。blockly有几个特点：

1. 它是纯粹的javascript库。
2. 它是100%面对客户端的，没有任何服务端的依赖。
3. 支持各种主流的浏览器：Chrome, Firefox, Safari, Opera, and IE。
4. 高度可定制和可扩展
5. 可导出代码，用户可以将基于块编写的程序转换成通用编程语言，并平滑过渡到基于文本的编程。

2、blockly能做什么？

1、用于编程教育，是编程初学者学习和掌握程序设计方法的有力工具

2、基于Google Blockly二次开发图形化编程平台，譬如：APPInventor、Wyliodrin、Earsketch等优秀编程平台

3、针对一些需要复杂编程的测试需求，引入blockly为测试人员提供一个可视化的、搭建积木式的编写测试用例的GUI接口，降低自动化测试的上手门槛。

3、blockly的引入

1、在线使用，访问Blockly | Google Developers，前往官网即可体验编程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNWm4Eur-1679244617745)(C:\Users\iuyer\AppData\Roaming\Typora\typora-user-images\image-20230319234321494.png)]

2、npm或者yarn安装

npm install --save blockly

代码中引入‘blockly’

import Blockly from 'blockly';

3、在线引入

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

官方文档：Blockly 中文文档 (tortorse.com)

4、blockly的配置

引入blockly核心脚本与核心模块

<script src="blockly_compressed.js"></script>
<script src="fixed-sizeblocks_compressed.js"></script>
// 或者
import Blockly from 'blockly';

引入用户语言

<script src="msg/js/zh.js"></script>
// 或者
import * as Ch from 'blockly/msg/zh-hans';
Blockly.setLocale(Ch);

在主页面添加一个空的div

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div

在页面的任意位置添加工具箱的结构

// xml
<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>
// 或者json

json格式

  {"kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_whileUntil"
    }
  ]
}

最后，调用以下命令将 Blockly 注入空d iv。此脚本应位于页面底部，或由 onload 事件调用。

<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

当前未使用 workspace 变量，但稍后当想要保存块或生成代码时，它将变得很重要。如果将多个 Blockly 实例注入到同一页面上，请确保每个返回的工作空间都存储在不同的变量中。

5、生成代码

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script> 

var code = Blockly.JavaScript.workspaceToCode(workspace);

实时生成

function myUpdateFunction(event) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);

演示demo

Generate JavaScript (google.github.io)

6、添加自定义块

一个典型的块定义如下所示：

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "message0": 'length of %1',
      "args0": [
        {
          "type": "input_value",
          "name": "VALUE",
          "check": "String"
        }
      ],
      "output": "Number",
      "colour": 160,
      "tooltip": "Returns number of letters in the provided text.",
      "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
    });
  }
};

json格式

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);