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

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