我开始在 Blockly 上编码，但在尝试创建新 block 时遇到问题。我做的步骤:
- 下载
Blockly应用程序 code . - 我将所有文件放在名为
Blockly的文件夹中。 - 我在该文件夹中创建了一个新的 html 文件，以查看工具箱是否正常工作。
- 我用 Block Factory 创建了两个新 block .
- 我尝试使用新的
customBlocks.js文件将这些新 block 添加到工具箱中。
当我尝试进行第四步时出现问题，因为我添加了两个新 block ，但它只显示在工具箱上，第一个是我在 js 上的，但从来没有显示第二个，顺序无关紧要在 block 中，只有第二个 block 永远不会正确显示。
这是我的 html 文件:
<!DOCTYPE html>
<html>
<head>
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="customBlocks.js"></script>
<script src="msg/js/en.js"></script>
</head>
<body>
<h1>This is a prove </h1>
<div id = "blocklyMove" style = "height: 100px; width: 100px; background-color: red;"></div>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
<block type="move_right"></block>
<block type="blockObject"></block>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
</body>
</html>
这是我的 customBlocks.js 文件:
'use strict';
/* *********************** MOVES TO RIGHT *********************** */
Blockly.Blocks['move_right'] = {
init: function() {
this.appendValueInput("PIXELS")
.setCheck("Number")
.appendField("move to right");
this.setInputsInline(true);
this.setOutput(true, null);
this.setColour(120);
this.setTooltip('');
this.setHelpUrl('http://www.example.com/');
}
};
Blockly.JavaScript['move_right'] = function(block) {
var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
// TODO: Assemble JavaScript into code variable.
var code = "$(document).ready(function(){ " +
"$(\"blocklyMove\").animate({ " +
"right: " + value_pixels + "px" +
"});" +
"});";
// TODO: Change ORDER_NONE to the correct strength.
return [code, Blockly.JavaScript.ORDER_NONE];
};
/* *********************** BLOCK *********************** */
Blockly.Blocks['blockObject'] = {
init: function() {
this.appendValueInput("MOVEMENT")
.setCheck(null)
.appendField("Block");
this.setColour(20);
this.setTooltip('');
this.setHelpUrl('http://www.example.com/');
}
};
Blockly.JavaScript['blockObject'] = function(block) {
var value_movement = Blockly.JavaScript.valueToCode(block, 'MOVEMENT', Blockly.JavaScript.ORDER_ATOMIC);
// TODO: Assemble JavaScript into code variable.
var code = '...;\n';
return code;
};
我可以看到它在 Google Chrome 的控制台上给我以下错误:
Uncaught TypeError: Cannot set property 'move_right' of undefined
我被困在这里，我无法弄清楚问题是什么。任何帮助将不胜感激。
P.S:不要关注 block 的逻辑，因为我还没有完成它们，但我想在完成逻辑之前看到两个 block 都能正确显示。
提前致谢!
最佳答案
最后，我找到了解决方案。关于html文件我必须添加以下 <script>标记以引用另一个 js文件 (javascript_compressed.js) 其中 Blockly.JavaScript它被定义为:
<script src="javascript_compressed.js"></script>
关于javascript - Blockly 上的 "Uncaught TypeError: Cannot set property..."，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36435549/