blockly二次开发（一）自定义模块

最新推荐文章于 2025-05-30 20:18:32 发布

wangsiqi91

最新推荐文章于 2025-05-30 20:18:32 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：少儿编程教育模块化编程文章标签： blockly二次开发

本文链接：https://blog.youkuaiyun.com/wangsiqi91/article/details/82732466

本文介绍了如何进行Blockly的二次开发，重点在于自定义模块。首先，在非压缩模式下定义块，然后创建代码生成器。接着，针对ardublockly，更新ardublockly_toolbox.js文件以添加自定义类别，并在index.html中引入新的模块脚本，确保模块在工具栏中正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

blockly自定义模块

一、创建快

非压缩模式

由于blockly压缩模式需要翻墙编译，没有梯子只要使用非压缩模式

1.定义块（存放位置在..blockly/blocks）

定义类型名Blockly.Blocks['vision_imread'] = {}；

2.代码生成器（存放位置在..blockly/generators）

Blockly.JavaScript['vision_imread'] = function(block) {}；

以上两步可以使用谷歌块开发工具生成

https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools

3.添加工具栏类

（我使用的是ardublockly，所以工具栏跟blockly略有不同）

在ardublockly目录下更改ardublockly_toolbox.js文件，添加category项

添加类型名vision_imread（在块和代码生成器中定义的类型）

4.添加主页script

更改ardublockly目录index.html文件

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wangsiqi91

关注关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

探索 Blockly：自定义积木实例

yuanchun的知识整理

07-27

889

自定义标签的实例

Mixly 二次开发 自定义库

zycwlkq的博客

05-18

1505

Mixly基本原理 Mixly可以看作是介于普通用户与Arduino IDE之间桥梁，通过这个桥梁，即使用户不懂C语言的语法，也可以利用图形化程序编写Arduino程序。Mixly的基本原理是将图形化程序转化成C语言，再利用Arduino IDE上传到硬件中。在我们动手编写第三方库之前，先来了解Mixly是如何将图形化程序转化成C语言的。根目录下的xxx.xml文件定义了图形块的基本信息，比如类别、名称，ID等。block/xxx.js文件定义了每个图形块的样式，比如颜色、文字、图标等。generator

参与评论您还未登录，请先登录后发表或查看评论

blockly二次开发

sinat_41629921的博客

10-05

1180

目前有的问题 1.文档少,主要是因为谷歌的网站上不去, 2.Blockly Develop Tools使用有问题,预览有问题,暂时无法解决. 目前源码下载难度较大 github下载速度慢,自己在gitee上弄了一份. https://gitee.com/liuaqu/blockly ...

Drawio编辑器二次开发

热门推荐

TEST_PROGRAM_NONE

04-03

1万+

前言本章内容是对Mixly 图像化编程软件进行的二次开发,需要一定的编程基础,需要用到的概念和知识点有: 绑定与事件概念, JavaScript的基本语法, .xml脚本的标签定义限于篇幅,本章内容中笔者不做原理和JS脚本的剖析和讲解! 如参考阅读时困难, 恕笔者精力有限, 暂不不能提供详细内容, 当然,若笔者有空余时间, 自会补充相关原理讲解和脚本内容剖析. 还请各位读者...

Mixly 二次开发 自定义库 OLED

WXLeader的博客

06-20

1072

前言本章内容是对Mixly 图像化编程软件进行的二次开发,需要一定的编程基础,需要用到的概念和知识点有: 绑定与事件概念, JavaScript的基本语法, .xml脚本的标签定义限于篇幅,本章内容中笔者不做原理和JS脚本的剖析和讲解! 如参考阅读时困难, 恕笔者精力有限, 暂不不能提供详细内容,当然,若笔者有空余时间, 自会补充相关原理讲解和脚本内容剖析. 还请各位读者知悉! Mixly基本原理 Mixly可以看作是介于普通用户与Arduino IDE之间桥梁，通过这个桥梁，即使用户不懂C..

Mixly二次开发【模块封装-第三方库引用】

Easadon的博客

03-08

3867

1.简介 Mixly主要是用于少儿编程或者一些不懂C语言语法但是想进行Arduino开发的初学者，通过拖拉拽的方式实现程序的编写程序的初始化、执行部分都有对应的图形模块，将图形模块进行拼堆，完成一整个程序代码，图形化模块最终可以直接翻译成C语言，烧写入Arduino等MCU 实际上就是设计好对应的图形模块样式，再将模块与C代码进行对应。 2.Mixly目录组成以上两张图是Mi...

vue + blockly 自定义块、工具箱、主题

范百岁

09-08

4994

vue + blockly 自定义块、工具箱、主题 自定义块建议使用 Blockly Developer Tools 方便而且选择多样，随时生成块代码。 自定义块块由三个组件组成：块定义对象：定义块的外观和行为，包括文本、颜色、字段和连接。工具箱引用：对工具箱 XML 中块类型的引用，因此用户可以将其添加到工作区。生成器函数：生成此块的代码字符串。它总是用 JavaScript 编写，即使目标语言不是 JavaScript。通过 Blockly Developer Tools

图形化编程应用 Blockly

12-11

你是不是对编程感到好奇，也想自己做一个程序，但是却有无从下手呢？Google Blockly 是一个图形化编程语言，它可以帮助你快速入门。这个网页应用让你可以将不同的模块拖拽到一起来创作程序，然后你可以将它们输出到真实的程序语言中（比如 C 语言）。 Blockly 包含了许多 App Inventor 的元素，Google 的另一个图形化编程工具，而这个工具是受到了 MIT 的一款教小孩子编程的工具 Scratch 的启发。 Blockly 看起来非常像 Scratch，不过它还具有导出代码块及将你的代码块以 JavaScript、Dart、Python或 XML 来表达出来的功能。它对孩子和大人来说都适用。

Android Blockly积木编程源码对Workspace中的block数据保存及读取的流程，及改造原生代码实现Trash垃圾桶中的block保存及读取

01-31

Android Blockly积木编程源码对Workspace中的block数据保存及读取的流程，及改造原生代码实现Trash垃圾桶中的block保存及读取。

blockly -- 自定义块

wolf

01-14

2395

本文档面向希望在Blockly中创建新块的开发人员。假定有人拥有一个可以编辑的Blockly本地副本，一个通常熟悉Blockly的用法，另一个则对JavaScript有基本的了解。 Blockly带有大量预定义的块。从数学函数到循环结构，应有尽有。但是，为了与外部应用程序接口，必须创建自定义块以形成API。例如，创建绘图程序时，可能需要创建一个“半径为R的绘图圆”块。在大多数情况下，...

blockly game二次开发集成登陆功能

wespaul的专栏

06-28

655

blockly game二次开发，实现闯关记录在线统计登陆按钮页面：快捷登陆页面：登陆成功页面：用户登陆对话框：登陆代码：

blockly构建自定义块及其工具

fly7632785的专栏

07-27

1702

<h1 id="前言">前言</h1> <p><a href="https://blockly-demo.appspot.com/static/demos/blockfactory/index.htm

【Blockly图形化积木编程二次开发学习笔记】1.工具箱的实现

乙酸氧铍的博客

07-15

1691

文章目录Blockly 版本选择上手 Blockly 版本选择在【兰州大学】Blockly创意趣味编程【全36讲】主讲教师：崔向平周庆国中提到，在18年6月份之前的版本中，可以通过安装依赖库的方式，打开开发者工具的离线版本，但是新版本的Blockly移除了部分离线的依赖文件。在Github仓库上，对于18年6月份之前的版本，我只找到了2017.10.23的版本是相对较新的blockly-update-20171023，可配套Closure Library v20180405使用开发者工具但是

blockly自定义块简单实现

tomato3351的博客

03-17

4436

blockly自定义块支持使用json和JS，本文使用JS。 自定义块需要两个部分，blocks和generators。要看效果可以新建自己的index.html。一、自定义块的步骤 1.在blocks/文件夹下新建文件myblocks.js文件，写入 'use strict'; goog.require('Blockly.Blocks'); goog.require('Blo...

Blockly自定义块的右键菜单

SEU_YL的博客

07-16

337

customContextMenu: function(options) { const option = { enabled: true, text: ‘取值’, callback: function() { console.log(‘取值’, this); }.bind(this), }; while (options.length !== 0) { options.pop(); } options.unshift(option); },

Scratch3.0的二次开发

03-09

<think>好的，用户想了解如何进行Scratch3.0的二次开发，特别是自定义扩展和开发者文档。我需要先整理相关的信息，确保回答结构清晰，并且符合用户提供的引用内容。首先，根据引用[2]，main.ts文件在arduinoC文件夹下，是定义积木形状和生成代码的关键。这说明自定义扩展需要处理main.ts来定义积木和代码生成。可能需要详细说明如何创建扩展项目结构，修改main.ts。其次，用户提到的开发者文档可能涉及到官方资源，比如引用[1]中的Flask官方文档，但Scratch3.0可能有自己的文档。需要引导用户查阅官方指南，尽管引用中没有直接提到，但可以建议参考GitHub仓库或官方文档链接。另外，引用[3]的GitHub进度链接可能相关，但不确定，可能需要忽略。用户需要具体的步骤，比如环境搭建、项目结构、扩展开发、调试和集成，这些都需要分步骤说明。还要确保使用正确的LaTeX格式，比如行内公式用$...$，独立公式用$$...$$，但在这个问题中可能数学内容较少，可能需要检查是否有需要的地方。最后，生成相关问题，考虑用户可能的后续疑问，如调试工具、扩展限制、资源推荐等。确保问题与二次开发相关，并帮助用户深入探索。</think>### Scratch3.0 二次开发教程：自定义扩展 #### 1. **环境搭建** - **克隆仓库**：从官方GitHub仓库克隆Scratch3.0源码： ```bash git clone https://github.com/LLK/scratch-gui.git ``` - **依赖安装**：使用`npm install`安装依赖包[^2]。 #### 2. **扩展项目结构** 自定义扩展需遵循以下目录结构： ``` scratch-gui/src/lib/extensions/ └── your-extension/ # 扩展名称 ├── index.js # 扩展入口文件 └── blocks.js # 积木定义与代码生成逻辑 ``` 引用[2]提到`main.ts`文件定义积木形状和代码生成逻辑，此处需在`blocks.js`中实现类似功能。 #### 3. **积木定义与代码生成** 在`blocks.js`中使用Blockly语法定义积木： ```javascript export default { blocks: [ { opcode: 'myCustomBlock', blockType: Blockly.BlockType.COMMAND, text: '执行自定义操作 [ARG]', arguments: { ARG: { type: Blockly.ArgumentType.STRING, defaultValue: 'hello' } } } ], generators: { myCustomBlock: (block) => `custom_command(${block.ARG});` } }; ``` #### 4. **扩展注册** 在入口文件`index.js`中注册扩展： ```javascript import ScratchExtensions from 'scratch-vm/src/extension-support'; import blocks from './blocks'; class YourExtension { getInfo() { return { id: 'yourExtension', name: '自定义扩展', blocks: blocks.blocks }; } } ScratchExtensions.register(new YourExtension()); ``` #### 5. **调试与集成** - **本地运行**：`npm start`启动开发服务器，访问`http://localhost:8601`测试扩展 - **打包部署**：使用`npm run build`生成生产环境代码[^3] ### 开发者文档资源 - **官方开发指南**：建议阅读Scratch扩展开发文档（[Scratch Extension Docs](https://github.com/LLK/scratch-vm/blob/develop/docs/extensions.md)） - **代码示例**：参考官方扩展实现（如音乐、画笔模块）