Simple Blockly

通过删除文件，大家发现其实blockly-master文件中很多文件并不是必不可少的，通过Simple Blockly案例，梳理Blockly的文件目录，实现精简版的Blockly。

1. 准备工作

（1）HTML知识准备

最小的HTML文档：

                       //定义文档的类型
                           //定义一个 HTML 文档
                           //定义关于文档的信息
           //对于中文网页，声明编码，否则会出现乱码
    文档标题       //定义文档的标题


                           //定义文档的主体
    文档内容......

除了上述最小HTML文档中包含的内容，我们会用到还有：

Script标签，定义客户端脚本

Link标签，链接样式表

根据上述内容，完成下面的小案例，要求：

在最小HTML文档的基础上，显示HelloWorld；
通过内部js脚本控制弹框输出HelloWorld；
通过外部js脚本控制弹框输出HelloWorld；

/**示例代码**/



    
    HelloWorld
    
    


    Hello World!

（2）blockly-master文件准备

2. 动手实践

（1）新建文件目录

新建一个文件夹，重命名为SimpleBlockly，并在文件夹中新建css，js两个子文件夹，将blockly-master/Demos/Code中的index.html复制到SimpleBlockly根目录下，如下图：

新建文件目录

（2）导入、调整文件

使用notepad++打开index.html文件，修改head部分的内容，并将head部分的涉及的内容，从blockly-master中复制添加到SimpleBlockly中的css和js文件夹中。

将title修改为Simple Blockly；
将blockly-master/demos/code文件中的style.css文件移至css文件夹中，并将href引号中对应的字符串改为"css/style.css"；
storage.js直接删除即可，它和Google的Clound Storage有关，案例中用不会涉及这部分功能；
将blockly-mater文件中的blockly_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/blockly_compressed.js";
将blockly-mater文件中的blockls_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/blockls_compressed.js";
将blockly-mater文件中的javascript_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/javascript_compressed.js";
将blockly-mater文件中的python_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/python_compressed.js";
将blockly-mater文件中的php_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/php_compressed.js";
将blockly-mater文件中的lua_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/lua_compressed.js";
将blockly-mater文件中的dart_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/dart_compressed.js";
将blockly-master/demos/code文件中的code.js文件移至js文件夹中，并将src引号中对应的字符串改为"js/code.js";

此步的目的是将Blockly相关文件的位置进行调整，并且修改html部分代码，让其能指向对应文件；找文件的一个技巧：".."代表返回父文件目录，文件前没有内容的话，就表明和html文件在同一文件夹下。

上述操作完成之后，保存html文件，并在浏览器中打开：

文件导入调整完成之后

如上图，比较直观的可以看出Toolbox并未显示出来。文件明明已经导入并调整好了，为什么还会出现这种情况？我们可以借助Chrome浏览器的“检查”功能，查看出现问题的原因：

Chrome浏览器Console

在上图中，发现有几个错误，仔细看这些错误，发现除了media文件相关的错误之外，出现频率较高的就是msg相关的错误。

对比之前的“删除文件”案例，在删除media或msg文件夹之后的现象。

msg文件这么重要吗？它有什么功能？
对于msg文件，可分为2部分，一部分blocks的msg文件，负责blocks语言的转换；一部分是category的msg文件，负责category语言的转换；
如何解决这种情况？
a. 方案
分别导入blocks和category的en.js文件；（可分别添加，然后刷新两个文件对界面的影响）；界面转换成中文（两个zh-hans.js文件导入）。
b.方案
通过a.方案可以实现基本功能，达到预期的效果，不过语言转换功能就失效了；如果需要完整的功能，就要通过code.js文件修改，直接进行调整msg文件指向的路径；

/**在修改code之前，需要了解一个基础知识**/
document.write("test");
/**可以在demo2-1中进行测试，不过要区分与code.js中代码的细微区别**/

先将根目录下的msg文件和code目录下的msg文件，分别拷贝到SimpleBlockly/msg文件中，为方便区分，分别重命名为blocks-msg和category-msg，然后修改code.js中的代码指向这些文件。刷新网页，即可正常工作。

// Load the Code demo's language strings.
document.write('\n');
// Load Blockly's language strings.
document.write('\n');

（3）媒体文件的导入

通过查看Chrome的Console，发现media文件缺失，导致界面有裂图。所以将media文件拷贝到SimpleBlockly文件的目录中，然后修改html和code.js文件中的media对应路径即可。

code.js文件中的media文件对应第420行

至此，Simple Blockly就大功告成了！

Blockly培训案例-Simple Blockly