Blockly开发入门指北

Blockly开发入门指北

【腾讯文档】Blockly开发入门指北
https://docs.qq.com/doc/DRWRDUU5kR2lhaGNN

1. 写这篇文章的目的

最近公司的项目用到了Blockly这个东西（不知道怎么形容，就用东西这个词吧），但是这个东西呢，官网没有中文，示例给的也都很简单，api文档也是杂七杂八什么都有令人头秃，国内用这个的人似乎也不多（是不是真的不多我也不清楚），网络上的相关文档很少，成体系的教程也没有，因此我打算自己写一个，出于个人水平问题，如有疏漏，在所难免。

1. 什么是Blockly

Blockly是Google开发的一套“字符串编辑器”，我个人是这样看待的，通过少儿编程的方式实现某个功能，也就是官网上给出的那个样子，用拼图一样的东西进行拼接，通过这种方式完成代码生成。对Blockly更官方的解释，请查看百度或Blockly官网。

1. 开发思维

为什么要有开发思维这一节呢，因为会接触Blockly二次开发的同学们应该也是程序员吧，用写代码的那种逻辑性很强、严谨感很强的思维是看不懂Blockly代码的，所以专门用这一节来描述Blockly是个什么鬼，从而掌握其开发思想。

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

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

在操作积木时，在左侧的积木选择区选择一个积木，然后拖拽到右侧的工作区中即可，关于积木本身的特性我们稍后细说。

下面是一个拼好一个模型的图片：

这就是一个拼好的积木模型了，这个示例中包含了很多自定义的积木块。那么它生成的代码是什么样子的呢，来看下面的图片：

这就是上面模型所生成的代码了，到这里有些有想法的同学可能会问，这个代码怎么看起来四不像呢，这就是一开始我称呼它为”字符串编辑器“而不是代码编辑器的原因所在，根据官网的介绍，Blockly支持多种语言的生成，包括python，JavaScript，php等语言，但实际上，在后面的实践过程中，我越来越理解到它并不是真正的开发代码，其本质只是一堆字符串，只不过是这些字符串符合某种编程语言的规范而已，基于这个发现，你可能会觉得这很low诶，但我认为这恰恰是Blockly的高明之处，Blockly本身支持的那些语言只是预设好了一套字符串，如果你想要支持其他的语言也不是不可以，完全可以自己进行扩展，这种看起来很low的做法，恰恰造就了Blockly跨平台的特点。

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

在Blockly的API中，有一项Blockly.XML的内容，是的没错，我们能够看到的这些积木，是由xml来表示的，下面看一下这个xml长什么样子：