如何为scratch3.0创建一个独立的页面或窗体

很多人都利用GIT上的scratch3.0做开发，但是苦于有些定制需要个性化开发但是不知道如何动手。本篇文章来做好普及工作吧。

首先需要完成事项如下：

1.需要进行modal定义

2.新增窗口的UI界面

3.新增窗口逻辑页面

4.GUI的UI页面注册

5.gui逻辑页面注册

6.顶部菜单新增接口

下面我们就一步不来模拟，例如，我需要开发一个论坛功能。

第一步，modal定义

　　1.打开reducers/modals.js文件，修改如下：

　　　　1）找到约16行，新增以下代码

　　　　const MODAL_BBS = 'bbs';

　　　　2.）找到约30行，新增如下代码

　　·　　[MODAL_BBS]: false

　　　　3）找到约96行，新增如下代码

　　　　const openbbs = function () {

　　　　　　return openModal(MODAL_bbs);
　　　　}

　　　　const closebbs = function () {
　　　　　　return closeModal(MODAL_bbs);
　　　　};

　　　　4）找到末尾倒数第二行，新增代码

　　　　　　openbbs,

   　　　　 closebbs

　　　　以上请注意逗号的使用

第二步，新增窗体的UI界面，详见附件

　　1）components/bbs/bbs.jsx

　　2）components/bbs/bbs.css

第三步，新增窗体的逻辑页面，详见附件

　　containers/bbs.jsx

第四步，gui 的UI页面注册

　　找到compents/gui/gui.jsx

　　1）找到第27行，新增代码

　　　　import Bbs from '../../containers/bbs.jsx';

　　2）找到约118行，新增代码，别忘了逗号

　　　　bbsVisible,

　　3）找到约180行，新增代码

　　　　{bbsVisible ? (

              　　      <Bbs />

                ) : null}

　　4）搜索tipsLibraryVisible: PropTypes.bool,新增代码

　　　　bbsVisible: PropTypes.bool, 

第五步，GUI逻辑页面注册

　　打开containers/gui.jsx在153行，也就是在const mapStateToProps = state => {中新增

　　　　bbsVisible: state.scratchGui.modals.bbs,

第六步，在菜单中新增论坛菜单

　　找到compents/menu-bar/menu-bar。jsx

　　1）找到33行，找到import {openTipsLibrary} from '../../reducers/modals';

　　更改为import {openTipsLibrary,openbbs} from '../../reducers/modals';

　　2）找到倒数第9行，也就是mapDispatchToProps = dispatch => ({方法内，新增（注意标点符号）

　　onOpenbbs: () =>dispatch(openbbs())

　　3）找到479行新增

<Divider className={classNames(styles.divider)} />

 <div   className={classNames(styles.menuBarItem, styles.hoverable)} onClick={this.props.onOpenbbs}>

                          论坛

                    </div>

 

附件地址：点击下载

 

--------------------------------------------------------------------

博主：雷君（微软MVP，众聚互联CEO）

长期致力于企业IT服务，以及青少年编程培训课程

培训机构讨论热线：18859773999

--------------------------------------------------------------------