blockly编程软件下载,block 编程

　　Blockly开发入口指北方【腾讯文档】Blockly开发入口指北方。

　　https://docs.qq.com/doc/DRWRDUU5kR2lhaGNN

　　写这篇文章的目的

　　最近公司在项目里用了Blockly(不知道怎么形容，就用“stuff”这个词)，但是这个东西，官网没有中文，举的例子也很简单。api文档也比较杂，国内用这个的好像也不多(不知道是不是真的太多了)。网上相关文献很少，也没有系统的教程，所以打算自己写一个。

　　什么是块状？

　　Blockly是Google开发的一套“字符串编辑器”。我个人是这么看的。某个功能是儿童编程实现的，也就是官网显示的，代码是拼图之类的东西拼接生成的。关于Blockly更官方的解释，请查看百度或Blockly官网。

　　发展思维

　　为什么会有发展思维这一节？因为会接触Blockly二次开发的同学应该也是程序员。他们无法用写代码的那种逻辑严谨的思维去理解Blockly的代码，所以这一节专门描述Blockly是个什么鬼，以此来掌握它的开发思路。

　　首先看一下界面，如下图所示：

　　下图是扩展一个组后的样子。从上图可以看出，整个界面大致分为两部分：积木选择区和工作区。工作区右下角是功能按钮，从上到下是定位、放大、缩小、删除。

　　操作积木块时，在左边的积木块选择区选择一个积木块，然后拖动到右边的工作区。我们将在后面详细阐述构建块本身的特征。

　　这是一个模型的图片：

　　这是一个组装的积木模型。此示例包含许多自定义构造块。那么它生成的代码是什么样子的呢？看看下面这张图：

　　这是上述模型生成的代码。这里有想法的同学可能会问，为什么这段代码看起来这么不一样？这就是为什么我一开始叫它“字符串编辑器”而不是代码编辑器。根据官网的介绍，Blockly支持多种语言的生成，包括python、JavaScript、php等语言，但其实在后来的实践中，越来越明白，它并不是真正的开发代码。它的本质只是一堆字符串，但这些字符串符合某种编程语言的规范。基于这个发现，你可能觉得这很low，但我觉得这恰恰是Blockly的高明之处。Blockly本身支持的语言只是预置了一组字符串，如果想支持其他语言，完全可以自己扩展。这种看似低级的做法只是创造了

　　好了，通过上图，我们已经知道了它生成的代码，但是这些代码在页面上是看不见的，是背后的逻辑。那么可见积木的描述是什么呢？

　　在Blockly的API中，有一个Blockly.xml的内容没错，没错。我们可以看到的这些构件是由xml表示的。下面是这个XML的样子：

　　好吧，我不是很懂，但是没关系，因为这个xml只是用来Blockly告诉在工作区渲染什么，怎么渲染。在练习的过程中，只是保存在数据库中供下次打开时echo使用，并不涉及任何业务。在这个XML中，我们看到它只指定了应该呈现什么，工作区中有什么，但没有指定每个构建块应该是什么样子，比如它是什么颜色，文本是什么？

　　积木的颜色，积木上的文字等信息，了解面向对象开发的同学可能比较敏感，因为都属于积木本身的属性和外观属性。这些外观属性一般是静态的，当然在文档中也要求它们是静态的。这是因为这些构建块很早就渲染好了，这些外观定义会在Blockly接口初始化的时候用到。如果有动态外观属性，例如，如果下拉框的选项是通过接口获得的，那么你需要确保数据在Blockly接口初始化之前就准备好了。获取这些数据的时机需要仔细考虑，防止在没有获取值的情况下工作区出现加载问题，避免由于请求时间过长阻塞Blockly接口初始化导致的白屏。

　　到目前为止，我们已经知道了构成块状的几种元素。一、积木选择区。要使用自定义积木，必须在积木选择区注册，否则无法使用；其次是工作区渲染，也就是上面的XML，它是工作区需要渲染哪些组件的指令，然后是积木外观的定义，块状地告诉积木这个积木应该是什么样子，看起来怎么样；最后是代码生成，按照积木拼接的规则，将每个积木对应的代码组合起来。

　　好了，现在我们知道了Blockly是如何工作的以及它的组件是什么，我们可以尝试开发我们自己的构建块了。

　　准备

　　首先在项目中安装Blockly，并按照官方github上的描述，执行npm install blockly命令。

　　安装完成后，我们可以将Blockly引入到要使用的页面中。介绍代码如下：

　　importblockly from“blockly”；

　　然后我们开始初始化Blockly接口。不得不说，公文真是一言难尽。我只在官方网站的固定大小工作空间部分找到了我的路。首先写一个div，指定要放置接口的DOM节点，给它一个id，然后给它宽度和高度，然后在js中分块加载，根据官网的示例代码：

　　在页面正文的某个位置添加一个空div并设置其大小：

　　[在页面的某个地方添加一个空div并设置大小]

　　div id= blockly div style= height:480 px；宽度：600像素；/div

　　在页面的任意位置添加工具箱的结构(有关详细信息，请参阅定义工具箱):

　　[在页面任意位置添加工具栏的结构(PS:任意位置，随意)]

　　XML id= toolbox style= display:none

　　block type=controls_if/block

　　块类型=controls_repeat_ext/block

　　块类型=逻辑比较/块

　　块类型=数学编号/块

　　块类型=数学算术/块

　　块类型=文本/块

　　block type=text_print/block

　　/xml

　　什么显示：无，这个东西只是为了防止直接显示，而是传递给Blockly使用。我当时还特意删了，看看会有什么效果。

　　最后，调用下面的代码将Blockly注入一个空的div。这个脚本应该在页面的底部，或者由onload事件调用。

　　[最后，在空div上调用Blockly inject方法。该脚本必须在页面底部或onload事件中执行]

　　脚本

　　var workspace=blockly . inject( blockly div ，

　　{ toolbox:document . getelementbyid( toolbox ))；

　　/脚本

　　至此，初始化工作基本结束。需要注意的一点是注射方法。让我们来看看api介绍：

　　该方法接收两个参数，第一个参数是必需的，它指定了界面的呈现元素。可以是元素，可以是它的id，也可以是CSS选择器，参数类型可以是元素，也可以是字符串；第二个参数是可选的，接收一个option对象。

　　以下是我的真实代码：

　　现在我们有了一个基本的界面。在注入的时候，我们可以指定Blockly的一些全局配置，在官方文档中有详细介绍：

　　在实际使用中，大部分选项可以保留默认。如果你想要不同的东西，你可以设置你自己的参数。在上述配置项中，有一个配置项比较重要，那就是工具箱，它的接收参数类型是XML节点或字符串，用户可用的类别和块的树形结构。有关更多信息，请参见定义工具箱。

　　这一段的大意是：提供给用户的块和类别的树形结构。更多信息，请参考“工具栏定义”。

　　这意味着该配置项指定了界面左侧构建块选择区域中显示的内容。点击这个链接会跳转到工具箱部分，工具箱部分提供了两种定义方式，分别是XML和Json。我自己用XML，下面有一些工具栏的样式配置和分类配置，很详细。有兴趣的话可以自己去了解一下。

　　完成上述工作后，我们发现工具栏中的所有块都是块状内置的。然后，我们开始正式编写自定义块。

　　定义最简单的构建块。

　　通过以上的了解，我们知道，为了使用一个自定义的积木，我们必须在工具栏中注册积木。注册的前提是你必须先有一个积木(这是废话，补字数)。

　　现在我们参照官网添加自定义块一节来定义。看这个文档，我们可以看到积木的定义大致分为三步。首先，定义构建块，并提供Json和JavaScript。我个人使用后者是为了以后功能开发的方便。定义之后，引用它，最后指定生成的代码。

　　现在让我们一步一步来。首先，在您喜欢的位置创建一个js文件来定义我们的第一个构建块。按照程序员的传统美德，我将其命名为HelloWorld.js，并复制了官网的代码。不要忘记在第一行添加import语句。

　　分析这段代码。从第二行开始，块状。Blocks [string_length]={.}，这是一个明显的赋值语句。对于对象blockly.blocks，名为string _ length的属性被扩展，并且该属性被指定为对象。看到这里，我们来想想之前看到的那些我们看不懂的XML描述。在block节点中，不是有type属性吗？这个类型属性指定了这个块的类型，类型的名称是这个块中的一个属性的名称。通过这个属性的名称块，我们可以得到相应块的描述信息。好了，为了避免与内置块重名，我们来修改一下这个属性名，改成一个高一点的。

　　最近怎么样？有没有高高在上的感觉？

　　接下来，进入第二步，注册构建块。

　　根据文档中给出的示例代码，我们来安排！

　　(使用模块化开发的同学不要忘了导入)

　　然后是激动人心的最后一步，也是根据文档中给出的示例代码：

　　看第14行，是熟悉的写法吗？没错，就是和上面的一个套路，扩展一个内部对象，所以当然要修改下面的属性名，和上面的一致。这里有个说明，就是之前的JavaScript。这不是固定的写法。JavaScript的意思是用这个方法生成JavaScript代码。如果你想得到其他语言的代码，比如Python，你必须把JavaScript改成Python。如果不匹配，在获取生成的代码时就会出错。

　　到目前为止，我们的第一个自定义构建块已经写好了，是不是很简单？现在检查运行的效果：

　　为了更有效地看到它，让我们把它换成喜庆的颜色：

　　根据api，这个方法也支持RGB颜色，所以修改setColour()方法中的参数。

　　换成自己喜欢的颜色，看看运行效果：

　　非常喜庆！

　　分析代码

　　简单的构建块已经存在，一般的开发过程也必须心中有数。现在，让我们回顾一下构造块的定义：

　　在解释上面的代码之前，我们应该先了解一下积木的出现是怎么来的。在文档的定义块一节中，我们可以看到详细的介绍。

　　通过右边的索引我们可以看到，一个积木的外观大致可以分为语句连接、输出(输出/返回值)、输入(输入/参数)、字段。想想我们平时是怎么定义一个方法的，包括方法名，参数列表(参数名，参数类型)，返回类型。如果它符合积木的外观定义，那么现在回头看看上面的积木定义代码，清楚了吗？

　　看下面生成代码的部分，它扩展了一个函数，返回要生成的代码。在示例代码中，首先，获取输入参数，即在上面名为 value 的ValueInput中获取的内容。顾名思义，valueToCode方法是将输入值转换成代码的方法。第一个参数是构造块本身，即在其上执行方法的对象。第二个参数是要获取的值的字段名称，第三个参数是。

　　在文档的介绍中，可以看到获取参数有三种方式，即获取值、获取字段和获取语句块。文档里有详细的介绍，这里就不赘述了。

　　值得注意的是，最后一条return语句，在返回时，分为两种情况。一种情况是返回一个数组，数组中的第一个元素是返回的代码语句，第二个是计算顺序，一般默认为0。另一种情况是以代码语句的形式直接返回字符串，如下例所示：

　　在这两种情况下，主要取决于该块是否有返回值。如果没有返回值，说明它是一个语句块，不能作为另一个块的参数存在，所以只返回字符串。如果有返回值，说明是一个值块，也就是可能作为另一个块的参数或者输入值出现，所以需要给出计算顺序，返回一个数组。

　　入门教程到此结束。在练习的过程中，会有更深入的运用。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。