scratch是一种非常合适的培养自己的编程兴趣的方式。通过拖拽的方式，可以实现一些游戏，小程序的开发，就像搭积木一样，下面给大家介绍Scratch3.0 页面初始化同时加载sb3文件的操作方法，一起看看吧！
目标文件地址：src\containers\sb-file-uploader.jsx
修改 sb-file-uploader.jsx文件， class SBFileUploader中添加componentDidMount()，代码如下
componentDidMount() {
var _this = this;
// 作品所在存放地址
var sb3Path = null;
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页面初始化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
