【Scratch二次开发】01-界面修改

界面修改

安装

下载scratch-gui项目，并进入目录，执行下面的命令安装依赖包。

git clone https://github.com/LLK/scratch-gui.git
cd scratch-gui
npm install

目录结构

├── build                    # 编译后的文件夹
│   ├── static               # 静态资源
│   ├── chunks               # scratch核心加载器
│   ├── index.html           # scratch编辑器
│   ├── player.html          # scratch播放器
│   ├── lib.min.js           # scratch核心
├── src
│   ├── components           # UI组件
│   ├── containers           # 容器组件，承载容器组件业务逻辑
│   ├── css                  # 全局通用css
│   ├── examples             # 集成测试用例
│       ├── extensions       # 拓展案例
│   ├── lib                  # 插件及高阶组件
│       ├── audio            # 声音插件
│       ├── backpack         # 背包插件
│       ├── default-project  # 默认项目
│       ├── libraries        # 素材库相关
│       ├── video            # 视频模块
│   ├── playground           # 编译后页面的模版
│   ├── reducers             # 全局状态控制
├── test                     # 测试用例
├── translations             # 翻译库
├── README.md
└── package.json
└── webpack.config.js

启动

执行下面命令，启动项目。

npm run start

启动成功后，可以看到控制台输出Compiled successfully.，表示编译完成。

浏览器输入http://localhost:8601/，即可访问项目，如下。

更改Logo

在src/components/memu-bar/文件夹上传你的Logo图，然后在menu-bar.jsx中找到替换掉。

# 替换成你的logo图
import scratchLogo from './scratch-logo.png';

然后，我们还能找到另外一个地方也用了logo图，找到并替换。

更改主题色

找到css/color.css文件，找到如下参数，更改即可。

修改菜单栏

菜单栏的有些功能，我们不需要，可以隐藏起来。

主要改动的是menu-bar.jsx文件，而且还是MenuBar组件的render()方法。

对于不需要的组件，我们完全可以把代码注释或者删除掉。