scratch 3.0——extension添加
介绍了scratch环境配置,开始介绍scratch插件的添加。
插件是scratch完成功能的重要组成部分,而进行二次开发也可以从插件入手。
那么,如何添加插件呢?
第一步:下载插件
刚开始学,我们可能不具备做插件的能力,但我们可以找相应插件自己添加练练手。
hello world
第二步:添加插件
我们知道scratch本身是具有插件的,但这些插件放在什么位置,应该怎样去添加呢?
插件其实由两部分构成,功能(函数)部分、图像部分
一、功能(函数)部分
- 打开\scratch-gui-develop\node_modules\scratch-vm\src\extensions
新建文件夹scratch3_hello_world,将index.js文件放在其中。
- 打开\scratch-gui-develop\node_modules\scratch-vm\src\extension-support
更改其中extension-manager.js
//helloworld
const Scratch3HelloBlocks = require('../extensions/scratch3_hello_world');
const builtinExtensions = {
……
//helloworld
helloWorld:() => require('../extensions/scratch3_hello_world'),
……
}
注意逗号(,)添加,若无可能报错。
到此为止,函数功能部分就结束了,那么图像部分怎么处理。
二、图像部分
打开\scratch-gui-develop\src\lib\libraries\extensions
- 添加图片
在目录下新建一名为helloworld的文件夹,添加两张图片,更改命名及格式。
- 更改图片函数
打开该目录下的index.jsx文件
//hello world
import helloworldImage from './helloworld/helloworld.png';
import helloworldInsetImage from './helloworld/helloworld-small.svg';
仿照文件夹原extension格式更改内容
//hello world
{
name: (
<FormattedMessage
defaultMessage="hello world"
description="Name for the 'hello world' extension"
id="gui.extension.helloworld.name"
/>
),
extensionId: 'helloWorld',
iconURL: helloworldImage,
insetIconURL: helloworldInsetImage,
description: (
<FormattedMessage
defaultMessage="hello world."
description="Description for the 'hello world' extension"
id="gui.extension.helloworld.description"
/>
),
featured: true
},
添加图片功能及描述
第三步:试验结果
打开scratch网址,看看什么效果吧
编译成功说明,代码没有出错。(仅仅是代码没有硬性问题)打开网页说明成功!
拖动及点击代码块,试验一下插件效果。
如何添加插件已经讲完了,大家学废了吗?
简单插件添加大家已经明白了,但是不是所有的插件都是helloworld哦,搞清其中原理才是根本之道。
下一节:细说插件