Question

我开始在Blockly上编码，但是当我尝试创建新块时遇到问题。我做的步骤：

下载Blockly申请code。
我将所有文件放在名为Blockly的文件夹中。
我在该文件夹中创建了一个新的html文件，以查看工具箱是否正常工作。
我使用Block Factory创建了两个新块。
我尝试使用新的customBlocks.js文件将这些新块添加到工具箱中。

当我尝试进行第四步时出现问题，因为我添加了两个新块，但它只显示在工具箱上我在js上的第一个，但从来没有第二个，它与顺序无关块中，只有第二个块永远不会正确显示。

这是我的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的控制台上给我以下错误：

未捕获的TypeError：无法设置属性＆＃39; move_right＆＃39;未定义的

我被困在这里，我无法弄清楚问题是什么。任何帮助将不胜感激。

P.S：不要专注于块的逻辑，因为我还没有完成它们，但我想看到在完成逻辑之前两个块都会正确显示。

提前致谢！

Answer 1

最后，我找到了解决方案。在html文件中，我必须添加以下<script>标记，以引用另一个js文件（javascript_compressed.js），其中定义了Blockly.JavaScript：

<script src="javascript_compressed.js"></script>

＆＃34;未捕获的TypeError：无法设置属性...＆＃34;在Blockly

1 个答案: