Blockly 创建自定义块-概述

 2018年06月18日    249     声明


将 Blockly 集成到应用中后,或多或少总是需要创建一些"块"。本篇及其后几篇将介绍 Blockly 中“块”定义的过程,并对 Web 环境(Web Blockly)中“块”定义做了些单独说明。

  1. 定义一个块
  2. 代码生成
  3. 使用新定义的块

Blockly 提供了大量的预定义的“块”,从数学函数到循环结构等各种功能块。但功能业务功能的不同,我们还需要定义各种功能块,以向外部应用程序提供API。

创建自定义块时,最简单的方法是找到己有的功能相似的块,然后复制,并根据需要进行修改。

以下是定义一个块的过程:

1. 定义一个块

首先,创建一个“块”,并指定其形状、字段、和连接点。也可以使用Blockly Developer Tools快速实现。

或者,可以按参考以下API来手写代码:

更高级的用法,可以根据用户响应改变其形状等:


2. 代码生成

第二步,创建代码生成器,以将这个新块导出为指定语言的代码(如:JavaScript、Python、PHP、Lua、或 Dart):

要生成简洁又正确的代码,就需要指定语言的操作列表顺序:

创建更复杂的块需要使用临时变量和工具函数。当多次输入时,可以对参数进行缓存:


3. 使用新定义的块

完成块定义后,就可以将其添加到“工具箱”中或在“工作区”中使用: