文档阅读来源——谷歌官网介绍：
https://developers.google.com/blockly/guides/overview

概述

一个用于Web、Android、iOS的可视化代码编辑器库。
使用了相互关联的积木来表示表达代码中变量、逻辑表达式、循环等。让用户能够了解编程，而不用面对命令行上让人恐惧和枯燥的代码和语法。
在用户看来，Blockly能够非常直观的创建代码。对于开发者来说，Blockly本质上是一个由积木生成的代码组成的文本框。Blockly能够将积木导出为多种流行的编程语言：
- JavaScript
- Python
- PHP
- Lua
- Dart
其他可视化工具：

Scratch Blocks:由麻省理工学院开发的基于积木的可视化编程，提供了非常简化的编程模型，更适合儿童学习。
Droplet:一款强大的Pencil Code图形化的编辑器，其特点是能够从代码转换为积木。
Snap:基于Scratch-inspired的图形化编程语言，它并不只是一个库，而是套完整的开发环境。

start

完全运行在客户端、无第三方依赖
下载：https://github.com/google/blockly
demo路径：demos/fixed/index.html
引入blockly可以是一个固定大小的div，也可以是可以改变的div

配置

collapse: boolean
允许编程块折叠或者伸展。默认如果工具箱含有类别，为true，否则为false。

comments: boolean
允许编程块含有注释。默认如果工具箱含有类别，为true，否则为false。

css: boolean
如果false，那么不引入css，由文档负责提供样式，默认为true。

disable: boolean
禁用编程块，默认如果工具箱含有类别，为true，否则为false。

grid: object

horizontalLayout: boolean
如果true，工具箱为水平放置，否则竖直放置，默认false。

maxBlocks: number
最大可以使用的块数量，默认无限。

media:string
媒体文件路径. 默认”https://blockly-demo.appspot.com/static/media/“.

oneBasedIndex: boolean
如果ture，列表和字符串从1开始生成，否则从0。默认为1。

readOnly: boolean
只读。如果为true，禁止用户编辑，限制工具箱和垃圾箱，默认为false。

rtl: boolean
如果为true，编辑器反向（针对Arabic、Hebrew地区）。有对应demo。默认为false。

scrollbars: boolean
设置工作区域是否可滚动。工具箱含有分类时默认为true，否则false。

sounds: boolean
如果为false，不播放声音（比如点击和删除），默认为true。

toolbox: XML nodes or string
树状结构。工具箱，表示使用者可以使用的编程块和类。
最重要的部分！

toolboxPosition: string
工具箱位置。start表示水平时在顶部，垂直时在左或者右。end则相反。默认为start。

trashcan: boolean
显示或隐藏垃圾箱。工具箱含有分类时显示，否则不显示。

zoom: object
配置缩放。

代码生成

Blockly不是一门语言，但可以把用户程序翻译成js、python等。

导入或导出

如果需要保存用户的编程块，恢复上次访问的情况，可以导出xml：

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

这个可以导出一个最小化但是不易读的包含用户编程块信息的字符串。如果希望获得一个可读但较大的字符串，则使用Blockly.Xml.domToPrettyText 。

从xml字符串恢复到编程块如下：

var xml = Blockly.Xml.textToDom(xml_text);
Blockly.Xml.domToWorkspace(xml, workspace);

云存储

可供可选的云存储服务，安卓端推荐使用。

Blockly学习之文档阅读笔记相关推荐

FreeRTOS官方指导文档阅读笔记
FreeRTOS官方指导文档阅读笔记基于 161204_Mastering_the_FreeRTOS_Real_Time_Kernel-A_Hands-On_Tutorial_Guide.pdf,可 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...
Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
微信公共开发人员文档阅读笔记
先上效果图: 作者博客:http://blog.csdn.net/stationxp 作者微博:http://weibo.com/liuhailong2008 转载请取得作者允许一基础篇 1.新手 ...
VLC 学习计划---文档阅读
一 videolan-howto-en-html 该文档完全描述了VideoLAN "流"的解决方法. VideoLAN 项目包括两个软件. 1) VLC:以前是视频流接收的 ...
NiceScroll文档阅读笔记-NiceScroll(3.7.6)基本使用
前言官方已经给出很好的文档了.在此本人总结下,方便以后查阅: GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - ...
Qt文档阅读笔记-QWebEngineView及QML WebEngineView
这里主要是最近有给Java Web项目及Qt项目需要混合,自己搞的QtWebEngine没有问题,而用了项目里面的,就有问题,在此阅读下官方资料,看看能不能解决这样莫名其妙的问题,在此记录下本次的阅读 ...

Blockly学习之文档阅读笔记

概述

start

配置

代码生成

导入或导出

云存储

Blockly学习之文档阅读笔记相关推荐

最新文章

热门文章