如何为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 欢迎交流 -----------------------------------------------------  
上一篇:javascript-反应本机路由器流量:覆盖组件内的向左或向右按​​钮并访问本地功能


下一篇:React入门看这篇就够了