很多人都利用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.jsx2)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 欢迎交流 -----------------------------------------------------