小编给大家分享一下Scratch3.0如何实现页面初始化并同时加载sb3文件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
scratch是一种非常合适的培养自己的编程兴趣的方式。通过拖拽的方式,可以实现一些游戏,小程序的开发,就像搭积木一样
目标文件地址: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文件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。