Scratch3.0二次开发（3）：Scratch3.0自定义组件转Python代码

一.前言

  前面我们介绍了*Scratch3.0*的本地编译和自定义积木块，下面将介绍怎么实现将自定义积木块生成自己想要的*Python*代码。为了方便我们可以使用国人开源的项目来进行接下来的介绍。下载链接请访问下面的网址。

https://github.com/zhangweihong/scratch-blocks-code.git

二.下载代码并编译

下载后需要进行编译。

npm i

编译后打开gencode文件夹下的index.xml，我们可以看到如下图的效果 。

我们拖入对应的组件，代码区就会生成对应的代码。

三.自定义积木组件

我们在selfblocks文件夹下的motion.js末尾处新建一个积木组件。

代码为：

//自定义积木组件

Blockly.Blocks['self_make'] = {
  /**
      * Block to move steps.
      * @this Blockly.Block
      */
  init: function() {
    this.jsonInit({
      "message0": "自定义组件 %1 %2",
      "args0": [
        {
          "type": "input_value",
          "name": "SPEEDLEFT"
        },
        {
          "type": "input_value",
          "name": "SPEEDRIGHT"
        }
      ],
      "category": Blockly.Categories.motion,
      "extensions": ["colours_motion", "shape_statement"]
    });
  }
};

保存后，我们还需要到同目录下的tool-box-xml.js文件加入下面代码。

// 自定义积木组件
        <block type="self_make">
        <value name="SPEEDLEFT">
                <shadow type="math_number">
                
                    <field name="NUM">99</field>
                </shadow>
            </value>
            <value name="SPEEDRIGHT">
                <shadow type="math_number">
                    <field name="NUM">88</field>
                </shadow>
            </value>
        </block>

再次保存后，我们重新刷新index.html我们就可以看到我们自定义的组件了。因为我们是在motion.js里面，并且将其目录设置在运行下面，所以我们可以在运行下面看到我们的自定义组件。

四.转对应代码设置

其实转Python也好，转Lua也罢，其原理都一样！从上面的图中我们可以看到，虽然我们将组件拼接在开始组件下面，但是我们转码区域并没有任何的显示。那么我们应该怎么实现当我们把组件拼接在开始组件下面时，代码区域可以显示出我们想要的代码呢？我们可以打开lua文件夹下的other文件夹下的motion.js。在末尾加入下面代码。如下图所示。

//自定义组件转码
Lua['self_make'] = function(block){
  const code = `hello! I am self_make\n`;
  return code
};

五.效果展示

我们保存后，重新刷新打开*index.html,*等我们再次把自定义组件放置到开始组件下面的时候，您会惊奇的发现——我们每放一个积木组件，代码区就会生成我们自己设置的对应代码。

作者简介
热爱编程、写作的小菜鸡，喜交天下各路英雄好友，欢迎关注本人公众号一起学习、交流。
如果您在编译的时候遇到什么问题请给我留言。

关注我，一起学习探讨更多scratch知识！