什么是blockly？Blockly是谷歌发布的一款可视化编程工具。它像积木一样有趣且易于使用。著名的scratch是一种使用类似技术的儿童编程工具。blockly有几个特点：它是一个纯javascript库。它是100%客户端，没有任何服务器端依赖性。支持所有主流浏览器：Chrome、Firefox、Safari、Opera和IE。高度可定制和可扩展。如果把blockly看成一个黑盒子，它的输入是用户拖放代码块的组合，输出是翻译后的JavaScript/python/PHP/Lua/Dart代码。块状可以做什么？最近工作的主要任务是改造公司的自动化测试框架。目前我们的自动化测试是使用python+selenium进行自动化测试。测试人员需要使用原生python代码来编写测试用例。对编程能力的要求很高。希望通过引入blockly，为测试人员提供一个可视化的GUI界面，为编写测试用例搭建积木，降低自动化测试的入门门槛。Blockly动手示例先决条件：您需要对HTML、CSS和JavaScript有基本的了解。谷歌官方提供了动手实例教程。本示例是通过blockly创建一个简单的音乐创作app。首先下载如下示例代码：gitclonehttps://github.com/google/blockly-samples.git示例代码路径如下：getting-started-codelabstarter-code：示例初始代码；complete-code：示例完成后的代码，如果写的地方卡住了，可以和官方提供的完整代码对比一下。每个目录包含相同的目录和文件：scripts/main.js-应用程序的主要逻辑代码music_maker.js-一个播放声音的小库sounds/-声音文件样式/-CSS样式文件index.html-打开启动器-首页浏览器中的code/index.html，会显示如下界面（如果第一次打开无法完整显示，可能是网络原因，请尝试刷新浏览器）Starter-代码首页编辑模式：点击edit进入编辑模式，根据提示点击下方任意数字编辑代码编辑模式点击任意数字后，会显示空白区域，这里是我们需要使用blockly进行代码点击的地方编辑代码编辑index.html，在下面两行脚本代码前添加一行代码，导入blockly库，blockly会介绍四个模块：Blocklycore：主要核心代码，主要定义blockUI和逻辑Built-inblockdefinitions：常用的Block定义，如loops、logic、data、string操作JavaScript生成器：从块中生成JavaScript代码英文语言文件：块的提示语言英文创建块状工作区：工作区包括代码块编辑区和工具箱在两部分块状工作区中编辑index.html并添加以下xml结构到id="blocklyDiv"的div元素：5编辑脚本/main.js，在代码末尾添加如下代码Blockly.inject('blocklyDiv',{toolbox:document.getElementById('toolbox'),scrollbars:false});现在刷新浏览器，点击编辑进入编辑模式，点击任意图可以发现显示blockly工具，工具箱有代码块，工具箱工具箱有代码块，创建自定义代码块，这个例子是一个创建音乐的app，我们需要创建一个可以播放声音的代码块，通过下拉菜单选择不同的声音文件在scripts目录下创建一个js文件，命名为sound_blocks.js，在index.html首页导入js文件然后在sound_blocks.js中添加如下代码Blockly.defineBlocksWithJsonArray([{"type":"play_sound","message0":"Play%1","args0":[{"type":"field_dropdown","名称":"值","选项":[["C4","sounds/c4.m4a"],["D4","sounds/d4.m4a"],["E4","sounds/e4.m4a"],["F4","sounds/f4.m4a"],["G4","sounds/g4.m4a"],["A5","sounds/a5.m4a"],["B5","声音/b5.m4a"],["C5","声音/c5.m4a"]]}],"previousStatement":null,"nextStatement":null,"colour":355}]);上面的js代码定义了一个play_sound类型的代码块，需要添加到html页面中显示5??
再次刷新浏览器，打开工具箱，在sounds目录下找到一个红色的代码块，可以用来播放声音文件play_sound的代码块。保存/加载工作空间现在需要的代码块就构建好了,在代码编辑区已经可以写了，接下来要做的就是保存和加载函数编辑scripts/main.js，在save方法中添加如下代码，更改代码实现用户点击save将工作区中的代码块以xml格式保存functionsave(button){//添加代码行button.blocklyXml=Blockly.Xml。workspaceToDom(Blockly.getMainWorkspace());}保存成功后，下次点击数字进入工作区时，需要加载工作区的代码块，继续编辑main.js，添加如下方法//添加代码---startfunctionloadWorkspace(button){letworkspace=Blockly.getMainWorkspace();workspace.clear();if(button.blocklyXml){Blockly.Xml.domToWorkspace(button.blocklyXml,workspace);}}//添加代码---endfunctionenableBlocklyMode(e){document.body.setAttribute('mode','blockly');currentButton=e.target;loadWorkspace(currentButton);//这一行是添加的代码}现在尝试刷新browser点击edit进入编辑模式，点击指定编号编辑代码块，点击save保存，返回工作区仍保留上次编辑的代码块。保存工作区生成JavaScript代码编辑scripts/sound_blocks.js，添加如下代码Blockly.JavaScript['play_sound']=function(block){letvalue='\''+block.getFieldValue('VALUE')+'\'';return'MusicMaker.queueSound('+value+');\n';};此代码将从play_sound代码块“MusicMaker.queueSound('Sounds/c4.m4a');”生成以下js代码（注意：此处显示的代码以C4选项为例）。运行生成的JavaScript代码编辑scripts/main.js，在handlePlay方法中添加如下代码());code+='MusicMaker.play();';try{eval(code);}catch(error){console.log(error);}//Addedcode--end}Nowthemusicmakerappis全部完成，刷新浏览器，点击edit进入编辑模式，然后点击不同的数字进行编程，可以根据代码块的提示设置播放什么声音和播放次数，编辑后，点击Done进入运行模式，点击对应的数字会播放音乐，挺好玩的，试试吧。
