一.获得示例代码
1.先将Github上的blockly-master下载下来： https://github.com/google/blockly
2.建立自己的项目SimpleBlockly，添加css,js文件夹和index.html文件
3.将下载的blockly-master解压，拷贝blockly-master文件夹下的media文件夹添加到SimpleBlockly中
4.将blockly-master文件夹下的 blockly_compressed.js ， blocks_compressed.js ， javascript_compressed.js 拷贝到SimpleBlockly文件夹下的js目录下。
5.在SimpleBlockly>js目录下建立两个文件夹blocks和category目的是放中文语言脚本。
6.将blockly-master>msg>js>zh-hans.js拷贝到category目录中，将blockly-master>demos>code>msg>zh-hans.js拷贝到blocks目录中。
7.模仿blockly-master>demos>fixed>index.html编写SimpleBlockly>index.html
8.项目架构图
9. index.html 代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>SimpleBlockly</title> 7 8 <!-- 引入blokcly和blocks的js文件 --> 9 <script src="js/blockly_compressed.js"></script> 10 <script src="js/blocks_compressed.js"></script> 11 <!-- 引入category的汉字js文件 --> 12 <script src="js/category/zh-hans.js"></script> 13 <!-- 引入blocks的汉字js文件 --> 14 <script src="js/blocks/zh-hans.js"></script> 15 <!-- 引入将blocks解析为javascript的js文件 --> 16 <script src="js/javascript_compressed.js"></script> 17 18 </head> 19 20 <body> 21 <!-- 1.先定义页面的html --> 22 <div id="blocklyDiv" style="height: 480px;width:600px;"></div> 23 24 <!-- 2.定义xml文件 --> 25 <!-- 用来定义工具栏--> 26 <xml id="toolbox" style="display: none"> 27 <!-- category 类别：将一组相同类别的块放在一起 --> 28 <category name="逻辑" colour="%{BKY_LOGIC_HUE}"> 29 <block type="controls_if"></block> 30 <block type="controls_if"> 31 <mutation else="1"></mutation> 32 </block> 33 <block type="controls_ifelse"> 34 </block> 35 <block type="controls_if" disabled="true"> 36 <mutation elseif="1" else="1"></mutation> 37 </block> 38 <block type="logic_compare"></block> 39 <block type="logic_operation"></block> 40 <block type="logic_negate"></block> 41 <block type="logic_boolean"></block> 42 <block type="logic_null"></block> 43 <block type="logic_ternary"></block> 44 </category> 45 <sep></sep> 46 <category name="循环" colour="%{BKY_LOOPS_HUE}"> 47 <block type="controls_repeat_ext"> 48 <value name="TIMES"> 49 <block type="math_number"> 50 <field name="NUM">10</field> 51 </block> 52 </value> 53 </block> 54 <block type="controls_whileUntil"></block> 55 <block type="controls_for"> 56 <field name="VAR">i</field> 57 <value name="FROM"> 58 <block type="math_number"> 59 <field name="NUM">1</field> 60 </block> 61 </value> 62 <value name="TO"> 63 <block type="math_number"> 64 <field name="NUM">10</field> 65 </block> 66 </value> 67 <value name="BY"> 68 <block type="math_number"> 69 <field name="NUM">1</field> 70 </block> 71 </value> 72 </block> 73 <block type="controls_forEach"></block> 74 <block type="controls_flow_statements"></block> 75 </category> 76 <sep></sep> 77 <category name="数学" colour="%{BKY_MATH_HUE}"> 78 <block type="math_number"> 79 <field name="NUM">123</field> 80 </block> 81 <block type="math_arithmetic"></block> 82 <block type="math_single"></block> 83 <block type="math_trig"></block> 84 <block type="math_constant"></block> 85 <block type="math_number_property"></block> 86 <block type="math_round"></block> 87 <block type="math_on_list"></block> 88 <block type="math_modulo"></block> 89 <block type="math_constrain"> 90 <value name="LOW"> 91 <block type="math_number"> 92 <field name="NUM">1</field> 93 </block> 94 </value> 95 <value name="HIGH"> 96 <block type="math_number"> 97 <field name="NUM">100</field> 98 </block> 99 </value> 100 </block> 101 <block type="math_random_int"> 102 <value name="FROM"> 103 <block type="math_number"> 104 <field name="NUM">1</field> 105 </block> 106 </value> 107 <value name="TO"> 108 <block type="math_number"> 109 <field name="NUM">100</field> 110 </block> 111 </value> 112 </block> 113 <block type="math_random_float"></block> 114 <block type="math_atan2"></block> 115 </category> 116 <category name="文本" colour="%{BKY_TEXTS_HUE}"> 117 <block type="text"> 118 <field name="TEXT">abc</field> 119 </block> 120 <block type="text_join"></block> 121 <block type="text_append"> 122 <value name="TEXT"> 123 <shadow type="text"></shadow> 124 </value> 125 </block> 126 <block type="text_length"> 127 <value name="VALUE"> 128 <shadow type="text"> 129 <field name="TEXT">abc</field> 130 </shadow> 131 </value> 132 </block> 133 <block type="text_isEmpty"> 134 <value name="VALUE"> 135 <shadow type="text"> 136 <field name="TEXT"></field> 137 </shadow> 138 </value> 139 </block> 140 <block type="text_indexOf"> 141 <value name="VALUE"> 142 <block type="variables_get"> 143 <field name="VAR">{textVariable}</field> 144 </block> 145 </value> 146 <value name="FIND"> 147 <shadow type="text"> 148 <field name="TEXT">abc</field> 149 </shadow> 150 </value> 151 </block> 152 <block type="text_charAt"> 153 <value name="VALUE"> 154 <block type="variables_get"> 155 <field name="VAR">{textVariable}</field> 156 </block> 157 </value> 158 </block> 159 <block type="text_getSubstring"> 160 <value name="STRING"> 161 <block type="variables_get"> 162 <field name="VAR">{textVariable}</field> 163 </block> 164 </value> 165 </block> 166 <block type="text_changeCase"> 167 <value name="TEXT"> 168 <shadow type="text"> 169 <field name="TEXT">abc</field> 170 </shadow> 171 </value> 172 </block> 173 <block type="text_trim"> 174 <value name="TEXT"> 175 <shadow type="text"> 176 <field name="TEXT">abc</field> 177 </shadow> 178 </value> 179 </block> 180 <block type="text_print"> 181 <value name="TEXT"> 182 <shadow type="text"> 183 <field name="TEXT">abc</field> 184 </shadow> 185 </value> 186 </block> 187 <block type="text_prompt_ext"> 188 <value name="TEXT"> 189 <shadow type="text"> 190 <field name="TEXT">abc</field> 191 </shadow> 192 </value> 193 </block> 194 </category> 195 <sep></sep> 196 <category name="列表" colour="%{BKY_LISTS_HUE}"> 197 <block type="lists_create_empty"></block> 198 <block type="lists_create_with"></block> 199 <block type="lists_repeat"> 200 <value name="ITEM"> 201 <block type="math_number"> 202 <field name="NUM">2</field> 203 </block> 204 </value> 205 <value name="NUM"> 206 <block type="math_number"> 207 <field name="NUM">5</field> 208 </block> 209 </value> 210 </block> 211 <block type="lists_length"></block> 212 <block type="lists_isEmpty"></block> 213 <block type="lists_indexOf"></block> 214 <block type="lists_getIndex"></block> 215 <block type="lists_setIndex"></block> 216 </category> 217 <sep></sep> 218 <category name="变量" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}"> 219 </category> 220 <sep></sep> 221 <category name="函数" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}"> 222 </category> 223 <sep></sep> 224 </xml> 225 226 227 <!--3. 编写的脚本放在文档最后定义 --> 228 <script> 229 // 嵌入工具栏 230 var workspace = Blockly.inject('blocklyDiv', { 231 //图片资源文件 232 media: './media/', 233 //工具箱 234 toolbox: document.getElementById('toolbox'), 235 //放大，缩小，还原和垃圾箱位置 236 horizontalLayout: false, 237 toolboxPosition: 'start', 238 comments: false, 239 disable: false, 240 zoom: { 241 controls: true, 242 wheel: true, 243 startScale: 1, 244 maxScale: 1.5, 245 minScale: 0.8, 246 scaleSpeed: 1.2 247 }, 248 trashcan: true 249 }); 250 </script> 251 </body> 252 253 </html>
10.最终效果
