温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Scratch3.0如何实现页面初始化并同时加载sb3文件

发布时间:2021-08-17 14:47:51 来源:亿速云 阅读:446 作者:小新 栏目:开发技术

小编给大家分享一下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文件”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI