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));
