2. 在网页中使用blockly

原文:https://developers.google.com/blockly/guides/get-started/web

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

给你源码

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

• 下载zip
• 下载TAR
• gitHub

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

image.png

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

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

代码解释

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

image.png

关键的部分分成四部分：

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

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

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

• display:none.在网页上不显示
• controls_if,logic_compare等等都是预定义好的块，也就是blockly已经提供好的块，可以直接使用。

4. 调用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上，则可以利用此服务。

有关云端存储的更多信息