Scratch二次开发教程——1界面样式修改

安装

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

gitclone https://github.com/LLK/scratch-gui.git

cdscratch-gui

npminstall

目录结构

├── 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 runs tart

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

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

更改Logo

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

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

更改主题色

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

修改菜单栏

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

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

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