生成和运行代码

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

如需大致了解代码生成，请参阅代码生成。

导入语言代码生成工具

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

模块

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。

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