Blockly 中文文档

# 入门

本文档面向希望创建将 Blockly 作为代码编辑器应用程序的开发人员。这里假设用户已经熟悉 Blockly 的用法，并且人们对 HTML 和 JavaScript 有基本的了解。

# 总览

Blockly 被设计成可以轻松安装到您的 Web 应用程序中。用户拖动块，Blockly 生成代码，您的应用程序使用该代码执行某些操作。从您的应用程序的角度来看，Blockly 只是一个文本区域，用户可以在其中键入语法上完美的 JavaScript，Python，PHP，Lua，Dart 或其他语言。

Blockly 是 100％ 的客户端，不需要服务器的任何支持（除非有人想使用云存储功能）。 没有第三方依赖（除非有人想重新编译内核）。 一切都是开源的。

# 获取源代码

# 推荐使用: npm

Blockly 已在 npm (opens new window) 和 yarn (opens new window) 上发布。 我们建议通过包管理器获取 Blockly，因为：

  • 可以随时获取最新版本的 Blockly
  • 鼓励 使用插件 而非脏补丁

如果您已经在使用包管理器，则可以通过以下方式安装 Blockly

npm install --save blockly

您可以使用以下代码在应用程序代码中引用 Blockly：

import Blockly from 'blockly';

这将导入默认软件包。 有关更多信息，请参阅程序包 自述文件 (opens new window)，以及结合 Node (opens new window) 与 webpack (opens new window) 使用 Blockly 的示例。

# Unpkg

如果您的项目未使用包管理器，但又不想自己拷贝代码，则可以使用 unpkg。

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

Unpkg 会获取已发布代码的最新版本，因此使用此方法将不会有任何版本控制。 它非常适合演示或快速实验，我们在许多 Codelab 中都使用它。

# GitHub

您还可以从我们的 GitHub发布版本 (opens new window) 中下载压缩后的代码。然而，这需要您定期手动下载代码以获取Blockly的最新更新和修复。

下载好Blockly后，您可以将以下内容添加到应用程序代码中以加载它：

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

您可能还需要加载Blockly的内置模块，至少一个语言生成器和至少一个语言文件。

<script src="blocks_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="msg/js/en.js"></script>

警告

GitHub下载仅为方便先前对Blockly进行复刻的开发人员提供。如果您是新开发人员，您应该使用 NPM 或 unpkg。

# 注入 Blockly

在获取了Blockly之后，您需要将其注入到应用页面上的一个 div 中。

→ 详细信息见 注入固定尺寸的 Blockly...

更高级的网页可能希望允许 Blockly 调整大小以填充页面。

→ 详细信息见 注入可调整尺寸的 Blockly...

# 配置

Blockly 是高度可配置的。 例如，您可以在工作空间上设置主题或渲染器，将工作空间设置为 RTL(自右向左) 模式，或从各种缩放和滚动模式中进行选择。

通过在注入 Blockly 工作区时传递配置结构，可以完成每个工作区的配置。

→ 详细信息见 配置工作区...

# 定义块

除了 Blockly 随附的默认块之外，还需要构建自定义块来调用您自己的 Web 应用程序的 API。 一个例子就是这个迷宫游戏 (opens new window)，它具有自定义的移动块。

→ 详细信息见 创建自定义块...

# 代码生成器

Blockly 不是一种编程语言，无法“运行” Blockly 程序。 相反，Blockly 可以将用户的程序转换为 JavaScript，Python，PHP，Dart 或其他某种语言。

→ 详细信息见 代码生成器...

# 导入和导出块

如果您的应用程序需要保存和存储用户的模块，并在以后的访问中恢复它们，请使用此调用将其序列化为JSON：

var json = Blockly.serialization.workspaces.save(workspace);

将JSON反序列化为模块同样容易：

Blockly.serialization.workspaces.load(json);

← 配置结构 →