原文: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
如果一切正常，你应该可以看到如上的效果。
要注意：
建议使用非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。
gridobject配置网格。请参阅网格 ...
horizontalLayout布尔如果是true，工具箱是水平的；如果false，则工具箱是垂直的。默认为false。
maxBlocksnumber可以创建的最大模块数。对学生的练习很有用。默认为Infinity。
mediastring从页面（或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。
toolboxXML节点用户可用的类别和块的树结构。请参阅下面的详细信息。
toolboxPositionstring确定工具箱的位置，可取"start"或者"end"。与水平、垂直布局及RTL设置有关。默认为"start"。
trashcan布尔显示或隐藏垃圾桶。如果工具箱有类别默认为true,否则为false。
zoomobject配置缩放行为。请参阅
上面的配置项中最重要的选项是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：
varxml = Blockly.Xml.workspaceToDom(workspace);varxml_text = Blockly.Xml.domToText(xml);
这将产生一个最小（但很丑）的字符串,在这个字符串中包含了用户模块的XML结构。如果希望获得更易读（但更大）的字符串，请改用Blockly.Xml.domToPrettyText()。
导入
从XML字符串表示的中恢复到块的过程非常简单：
varxml = Blockly.Xml.textToDom(xml_text);Blockly.Xml.domToWorkspace(xml, workspace);
云储存
Blockly提供可选的云存储功能。它使用户能够保存，加载，共享和发布他们的程序。如果您的项目托管在App Engine上，则可以利用此服务。
作者：filex
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论