Scratch3.0 页面初始化同时加载sb3文件的操作代码
scratch是一种非常合适的培养自己的编程兴趣的方式。通过拖拽的方式,可以实现一些游戏,小程序的开发,就像搭积木一样,下面给大家介绍Scratch3.0 页面初始化同时加载sb3文件的操作方法,一起看看吧!
目标文件地址:src\containers\sb-file-uploader.jsx
修改 sb-file-uploader.jsx文件, class SBFileUploader中添加componentDidMount(),代码如下
componentDidMount() { var _this = this; // 作品所在存放地址 var sb3Path = null; /** * 必须使用 $(window).on("load",function(){}); * 否则页面在未加载完的情况下,有些组件会来不及加载,影响二次文件保存 */ console.log("尚未初始加载Sb3文件"); $(window).on("load",function(){ console.log("即将初始加载Sb3文件"); let reader = new FileReader(); let request = new XMLHttpRequest(); console.log("加载的资源路径", sb3Path); request.open('GET', sb3Path, true); request.responseType = "blob"; request.onload = function() { if(request.status==404){ alert("未找到sb3类型的资源文件"); location.href='/scratch'; } let blobs = request.response reader.readAsArrayBuffer(blobs); reader.onload = () => _this.props.vm.loadProject(reader.result).then(() => { analytics.event({ category: 'project', action: 'Import Project File', nonInteraction: true }); _this.props.onLoadingFinished(_this.props.loadingState); }).catch(error => { log.warn(error); }); } request.send(); }); }
目标文件地址:src\components\menu-bar\menu-bar.jsx
修改 menu-bar.jsx文件, class MenuBar 中初始SBFileUploader,代码如下
// 必须加载这个文件 import SBFileUploader from '../../containers/sb-file-uploader.jsx'; class MenuBar extends React.Component { render () { return ( <Box className={classNames( this.props.className, styles.menuBar, {[styles.saveInProgress]: this.props.isUpdating} )} > <SBFileUploader onUpdateProjectTitle={PropTypes.func} /** 初始化加载文件到项目 **/> {(className, renderFileInput, loadProject) => ( <button onClick={loadProject} className={classNames(styles.scratchHide)}></button> )} </SBFileUploader> </Box> ); } } export default injectIntl(connect( mapStateToProps, mapDispatchToProps )(MenuBar));
到此这篇关于Scratch3.0 页面初始化同时加载sb3文件的操作代码的文章就介绍到这了,更多相关Scratch页面初始化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
phpMyAdmin“无法载入 mysql 扩展, 请检查 PHP 配置”问题的解决方案
安装XAMPP后,phpMyAdmin无法进入,一直提示“无法载入 mysql 扩展, 请检查 PHP 配置”。网上查,需要修改php.ini,却发现本来就是正确的;2009-02-02Git恢复之前版本的三种方法之reset、revert、rebase详解
这篇文章主要介绍了Git恢复之前版本的三种方法之reset、revert、rebase解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03
最新评论