探索 Blockly：可视化编程的魔法

0.介绍Blockly

在当今这个数字化的世界里，编程已经成为了必不可少的一项技能。为了让更多人能够轻松地学习编程，Google 开发了一款名为 Blockly 的可视化编程工具。Blockly 通过使用拼图式的代码块来教授基本的编程概念，使得即使是初学者也能快速上手。本文将详细介绍 Blockly 的特点、功能以及如何使用它来构建自己的程序。

网址 : https://google.github.io/blockly-samples/ Blockly Plugins & Demos (google.github.io)

中文网址 : https://developers.google.cn/blockly/guides/get-started/what-is-blockly?hl=zh-cn 什么是 Blockly | Google for Developers

什么是 Blockly？

Blockly 是由 Google 2012 年推出的一个开源项目， 是一个可视化编程编辑器。它提供了一个图形界面，允许用户通过拖拽和组合代码块来编写程序，而不需要直接编写代码。这些代码块代表了编程语言中的各种命令和操作，比如循环、条件判断、变量赋值等。这种直观的方式非常适合儿童和编程初学者，但同时也被广泛应用于教育领域和专业开发场景中。

Blockly 的核心特点

1. 直观性：用户可以通过视觉的方式来理解程序的逻辑，这使得编程变得更加直观和易于理解。
2. 易用性：不需要掌握复杂的编程语言，用户只需要拖拽和组合代码块即可。
3. 灵活性：支持多种编程语言的输出，如 JavaScript、Python、Lua 等。
4. 教育性：非常适合教育领域，帮助学生从基础开始学习编程。

1.使用步骤

1.0.安装 Blockly

可以通过 npm 或者直接从 CDN 引入。

通过 npm 安装

Bash浅色版本

1npm install --save @google/blockly

通过 CDN 引入

在 HTML 文件中添加 Blockly 的链接：

Html浅色版本

1<!-- 引入闭包库 -->
2<script src="https://unpkg.com/@google/closure-library@20230214_1/closure/goog/base.js"></script>
3
4<!-- 引入 Blockly 的核心库 -->
5<script src="https://unpkg.com/@google/blockly@5.0.0/main.blocks.js"></script>
6<script src="https://unpkg.com/@google/blockly@5.0.0/msg/js/en.js"></script>
7<script src="https://unpkg.com/@google/blockly@5.0.0/core/core.js"></script>
8<script src="https://unpkg.com/@google/blockly@5.0.0/core/msg/js/en.js"></script>
9<script src="https://unpkg.com/@google/blockly@5.0.0/core/core.min.js"></script>
10
11<!-- 引入 Blockly 的主题 -->
12<link rel="stylesheet" href="https://unpkg.com/@google/blockly@5.0.0/core/css/dracula.min.css" />

下面以 vue 项目为例来说明.

1.1.显示区

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

1.2.初始化

import * as Blockly from 'blockly';

import * as Ch from '@/blockly/msg/zh-hans.js';

Blockly.setLocale(Ch);

export default {
   
  name: "demo1",
  data(){
   
    return {
   
      workspace : null
    }
  },