如何爲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>

 

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

福建衆聚互聯信息科技有限公司CEO  雷君

 

wechat：leijun3999

歡迎交流

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