blockly开发之hello world(0)
文章目录
之前在blockly入门与介绍中,对blockly做了一番介绍,讨论了在技术视角之下,blockly是什么、可以做哪些有趣的事
在这篇文章里,我们将以一个开发者的视角,开始blockly之旅
开始之前
关于blockly是什么,上边的文章里提到过,在此重申一下(敲黑板): blockly是一个编辑器
The web-based visual programming editor
blockly作为编辑器,它的输入为用户对积木的拖曳操作(用户拖曳积木作为一种输入,可以类比为用户在普通编辑器的键盘输入),输出为积木的组合方式(可转化为对应代码)。使用blockly可以快速打造一个特定领域的可视化 块编程 编辑器
至于积木(block)如何生成代码,代码用于什么用途,blockly则通通不关心,由用户自己掌控。
quickstart
1 2 3 |
git clone https://github.com/google/blockly --depth=1 cd blockly/demos # open index.html |
打开index.html
之后,将看到
这儿给出了一些很棒的案例,供开发者入门
Fixed Blockly
是最简单的例子,可以视为blockly的hello world (把blockly编辑器注入到html中的div标签中:id="blocklyDiv"
)
我们用这个编辑器来写一个简单的程序: 如果5+6等于11就输出"恭喜你, 蒙对啦",否则输出"小学数学是语文老师教的吗"
目前这段程序还不能运行,在之后的章节里,之后我们会让它run起来
查看源码也只短短的一屏:
|
|
这些代码里,真正有用的只有一半,分以下几块说明:
依赖文件
head中只有这几个依赖
1 2 3 |
<script src="../../blockly_compressed.js"></script> <script src="../../blocks_compressed.js"></script> <script src="../../msg/js/en.js"></script> |
分别说明:
<script src="../../blockly_compressed.js"></script>
是Blockly内核文件。<script src="../../blocks_compressed.js"></script>
是基础积木集(blocks_compressed中定义了一些基础积木: 类似print、if、list等,我们可以在自己的js脚本中自定义更多的积木)<script src="../../msg/js/en.js"></script>
是英语语言包。目前40多门语言
js脚本名称中的compressed
表示它们都被压缩过,可读性差。如果你想看积木积木是怎么定义的,可以使用chrome开发者面板的pretty print功能查看源码
积木箱(toolbox)
在积木面板中引入我们需要的积木
1 2 3 4 5 6 7 8 9 |
<xml id="toolbox" style="display: none"> <block type="controls_if"></block> <block type="logic_compare"></block> <block type="controls_repeat_ext"></block> <block type="math_number"></block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> |
这些积木都预定义在<script src="../../blocks_compressed.js"></script>
至于如何自定一自己的积木,我们也放到之后的章节中说明. 诚信写作:),说好写hello world,就绝不不引入太多概念
往页面注入编辑器
页面中准备好注入点: <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
之后将编辑器注入页面即可
|
|
这段js代码的语意是:往blocklyDiv中注入Blockly编辑器,积木箱的id为toolbox,media文件目录为../../media/
(包括一些图标文件和声音文件)
总结
在这篇文章我们看到了一个blockly的最小案例。
在下一篇系列文章中,我们准备让上边写的那么程序run起来,使用这个程序来看看你的小学数学是不是语文老师教的
延伸
我最近在写一份blockly的入门和进阶教程,这个官方例子都被我纳入教程中,作为blockly hello world:blockly_1_hello_world,目前教程以源码的形式出现:wwj718/blockly_dev,还没写成博客。大家能阅读js的话,可以自行阅读。或者等我有空补上文章
参考
文章作者 种瓜
上次更新 2018-01-03