生成和运行代码

您的应用可以随时生成代码。例如，它可能会在最终用户点击按钮时或用户每次进行更改时生成代码。

如需了解代码生成的概览，请参阅代码生成。

导入语言代码生成器

如需生成代码，您需要使用语言代码生成器。您可以使用以下任一方法导入语言代码生成器。

模块

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

// Generate code for all the blocks in the workspace.
const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Unpkg

添加 Blockly 后，您必须添加生成器。

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

本地脚本

添加 Blockly 后，您必须添加生成器。

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

// Generate code for all the blocks in the workspace.
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

生成代码

如需生成代码，请使用生成器的 workspaceToCode 函数。

const code = javascriptGenerator.workspaceToCode(workspace);

持续更新

借助持续更新，您可以随时在用户进行更改时显示或运行代码。生成代码是一项快速操作，因此执行此操作对性能的影响很小。这可以通过使用事件监听器来实现。

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

添加前言或后序代码

生成代码后，您可以选择在生成的代码开头或结尾添加代码。

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

序言代码通常用于在代码开头包含外部定义。PostScript 代码通常用于调用函数，以便在代码结束时启动行为。

如果生成的代码可以按原样运行，则无需添加序言或后序言。

执行代码

生成代码后，您需要确定如何执行该代码。决定如何执行它非常依赖于应用，超出了 Blockly 的范围。

如果您想执行 JavaScript 代码，请参阅生成和运行 JavaScript。本文将介绍 JavaScript 代码生成器的一些特殊功能，以及 Blockly 团队建议用于安全执行 JavaScript 的 JSInterpreter。

其他语言需要使用其他工具。