上一篇已經(jīng)成功的添加了工具箱涎拉，雖然還有很多地方?jīng)]弄明白的圆，但是至少是添加上了，終于可以將塊拖出來進(jìn)行操作了越妈。
拖來拖去，久了也沒啥意思了叮称。所以本文將開始讓放入工作區(qū)的塊編程代碼
準(zhǔn)備工作
先給網(wǎng)頁添加一個(gè)按鈕吧，不然從哪里開始觸發(fā)它生成代碼
<table>
<tr>
<td>
<!-- 添加一個(gè)按鈕赂韵，暫且名叫運(yùn)行 -->
<button id="runButton" type="button" title="Run the program define by the blocks in the workspace">
運(yùn)行
</button>
</td>
</tr>
<tr>
<td id="blocklyArea">
Blockly 最后會(huì)放在這里
</td>
</tr>
</table>
生成代碼
blockly支持JavaScript挠蛉、Python、PHP谴古、Lua、Dart這幾個(gè)代碼生成器汇陆，其它的可以自己導(dǎo)入带饱。
使用哪個(gè)代碼生成器就導(dǎo)入對應(yīng)的模塊阅羹，這里選用python教寂，對應(yīng)的模塊是
<script src="./node_modules/blockly/python_compressed.js"></script>。
生成代碼的方法也很簡單酪耕，一句話const pythonCode = Blockly.Python.workspaceToCode(workspace);
要實(shí)現(xiàn)點(diǎn)擊按鈕生成代碼，在按鈕的單擊事件里調(diào)用生成方法即可看尼，這里偷個(gè)懶盟步，生成的代碼通過log輸出，沒有顯示到頁面上
function runcode() {
const pythonCode = Blockly.Python.workspaceToCode(workspace);
console.log(pythonCode);
}
const btn = document.querySelector("button");
btn.addEventListener("click", runcode);
非常省心省力
實(shí)時(shí)生成代碼
生成代碼的速度非常的快，因此如果有需要的可以實(shí)時(shí)生成代碼：當(dāng)工作區(qū)的內(nèi)容改變谷炸，就生成代碼
# 定義工作區(qū)改變事件處理函數(shù)禀挫，生成代碼并輸出到編輯框上
function updateCode(event) {
const pythonCode = Blockly.Python.workspaceToCode(workspace);
document.getElementById('textarea').value = pythonCode;
}
# 將這個(gè)函數(shù)注冊給工作區(qū)改變事件監(jiān)聽器
workspace.addChangeListener(updateCode);
