blockly可以在web,android,ios端使用。下面介绍的是如何在web端中去使用。简单来理解就是把它看作是一个js库，在html中引入这个js库即可。

给你源码

blockly是开源，你可以直接去官网上去下载。如下列出了地址：

代码下载完成后，用浏览器打开文件目录：demos/fixed/index.html，验证一下模块是否可以拖动？

image.png

如果一切正常，你应该可以看到如上的效果。

要注意：

建议使用非ie浏览器打开。

2.blockly的使用可以是离线了，你就当一个静态的网页，直接使用浏览器打开即可

代码解释

我们打开demos/fixed/index.html的源代码如下：

image.png

关键的部分分成四部分：

引入必要的js库。上面一共列了3个。

blockly_compressed.js // 核心库

blocks_compressed.js // 核心库

ms/js/en.js // 语言库。不同的js文件对应不同的语言包

创建一个大小固定的div。这个部分会用来注入blockly实例。要注意的是div的宽高要明确写上，不然就得不到正确的显示效果。当然，你也可以通过代码去设置这个宽高，以达到响应式的效果。

初始化工具箱。

display:none.在网页上不显示

controls_if,logic_compare等等都是预定义好的块，也就是blockly已经提供好的块，可以直接使用。

调用inject方法，实现blockly注入。

Blockly.inject详解

上面的demo文件中，调用了Blockly.inject()方法，它的第一个参数是要注入的div元素，第二个参数是配置项。配置项支持以下选项：

名称

类型

描述

collapse

布尔

允许块被折叠或展开。如果工具箱有类别默认为true

comments

布尔

允许块有评论(comments)。如果工具箱有类别默认为true

css

布尔

如果为false，则不要注入CSS(从文档中获取css)。默认为true。

disable

布尔

允许块被禁用。如果工具箱有类别默认为true。

grid

object

配置网格。请参阅网格 ...

horizontalLayout

布尔

如果是true，工具箱是水平的；如果false，则工具箱是垂直的。默认为false。

maxBlocks

number

可以创建的最大模块数。对学生的练习很有用。默认为Infinity。

media

string

从页面(或frame)到Blockly媒体目录的路径。默认为。"https：//blockly-demo.appspot.com/static/media/"

oneBasedIndex

布尔

如果true,列表和字符串操作的索引从1开始，如果false，则索引从0开始。默认为true。

readOnly

布尔

如果true，阻止用户进行编辑。废除工具箱和垃圾桶。默认为false。

RTL

布尔

如果true，翻转编辑器(阿拉伯语或希伯来语语言环境)。请参阅RTL演示。默认为false。

scrollbars

布尔

设置工作区是否可滚动。如果工具箱有类别默认为true，否则默认为false。

sounds

布尔

如果false，不播放声音(例如点击和删除)。默认为true。

toolbox

XML节点

用户可用的类别和块的树结构。请参阅下面的详细信息。

toolboxPosition

string

确定工具箱的位置，可取"start"或者"end"。与水平、垂直布局及RTL设置有关。默认为"start"。

trashcan

布尔

显示或隐藏垃圾桶。如果工具箱有类别默认为true,否则为false。

zoom

object

配置缩放行为。请参阅

上面的配置项中最重要的选项是toolbox。它是一个XML树结构，用于指定工具箱中哪些块可用(侧面菜单)，它们如何分组以及是否存在类别。有关定义工具箱的更多信息

除了Blockly自带的默认模块以外，还需要构建自定义模块来调用你自己的Web应用程序的API。在迷宫游戏中你可以看到有设置运动的自定义模块。更多关于创建自定义模块的信息

生成具体编程语言的代码

Blockly不是一种编程语言，我们不能直接'运行'Blockly程序，事实上，Blockly可以把用户的程序(就是在工作区中的块)转换为JavaScript，Python，PHP，Dart或其他语言。然后，你再去运行这些编译语言。

用户在blockly中拖拽组合模块 --blockly---> 各种编程语言(JavaScript，Python，PHP，Dart)

如下：

image.png

导入和导出块

你可能花了一些时间在工作区中组装了这个块但没有做完，你希望保存当前的进度，下次再接着做。这个需要是很常见的，就好比你在文本编辑器中写了一段代码，直接按ctrl+s保存，下次直接打开就可以了。

image.png

由于网页中的交互操作效果不会影响网页的源文件，如果你关闭了网页，下次再打开你会发现你的工作归0了，这太不友好了。

所以，你需要导出块( 保存blockly代码)和导入块(恢复blockly代码)操作

导出

如果您的应用程序需要保存并存储用户模块信息，并在后面再次访问时将其恢复，则需要使用此调用导出为XML：

var xml = Blockly.Xml.workspaceToDom(workspace);

var xml_text = Blockly.Xml.domToText(xml);

这将产生一个最小(但很丑)的字符串,在这个字符串中包含了用户模块的XML结构。如果希望获得更易读(但更大)的字符串，请改用Blockly.Xml.domToPrettyText()。

导入

从XML字符串表示的中恢复到块的过程非常简单：

var xml = Blockly.Xml.textToDom(xml_text);

Blockly.Xml.domToWorkspace(xml, workspace);

云储存

Blockly提供可选的云存储功能。它使用户能够保存，加载，共享和发布他们的程序。如果您的项目托管在App Engine上，则可以利用此服务。