Scratch3.0 页面初始化同时加载sb3文件的操作代码

 更新时间:2021年08月13日 10:08:42   作者:onightfalls  
今天通过本文给大家分享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页面初始化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 设计高可用和高负载的网站系统的几个注意事项

    设计高可用和高负载的网站系统的几个注意事项

    随着网站的运营,用户访问量和数据存储量会随着时间发生几何级变化,很快整个系统不堪重负,频繁出现问题。
    2011-06-06
  • IDEA+Git+Gitlab使用详细教程

    IDEA+Git+Gitlab使用详细教程

    这篇文章主要介绍了IDEA+Git+Gitlab使用详细教程,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • 蝴蝶优化算法及实现源码

    蝴蝶优化算法及实现源码

    这篇文章主要为大家介绍了蝴蝶优化算法的讲解及实现源码,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-02-02
  • Gitee的下载安装配置及使用步骤详解

    Gitee的下载安装配置及使用步骤详解

    这篇文章主要介绍了Gitee的下载安装配置及使用,本文通过详细步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 详解VScode 配置为 LaTeX 编辑器(IDE)

    详解VScode 配置为 LaTeX 编辑器(IDE)

    这篇文章主要介绍了详解VScode 配置为 LaTeX 编辑器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 程序员喜欢的5款最佳代码比较工具

    程序员喜欢的5款最佳代码比较工具

    这篇文章主要介绍了程序员喜欢的5款最佳代码比较工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-06-06
  • 用Meta标签控制360浏览器默认极速模式打开自己的网站

    用Meta标签控制360浏览器默认极速模式打开自己的网站

    最近用360浏览器访问自己的网站,发现都是被优先选用兼容模式打开,这使得网站很难看。为了让360浏览器打开网站的时候优先使用极速模式,而非兼容模式,找了一下官方论坛,发现了解决方案。
    2016-07-07
  • spark大数据任务提交参数的优化记录分析

    spark大数据任务提交参数的优化记录分析

    这篇文章主要介绍了spark大数据任务提交参数的优化记录分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 安全校验Session验证码并避免绕开验证码攻击

    安全校验Session验证码并避免绕开验证码攻击

    校验验证码的Session是否为空或者校验用户输入的验证码是否合法,构造安全表单的关键就是永远不要相信用户的输入
    2012-01-01
  • Web 开发中遇到的UTF-8编码的问题总结

    Web 开发中遇到的UTF-8编码的问题总结

    一个网站如果需要国际化,就需要将编码从GB2312转成UTF-8,其中有很多的问题需要注意,如果没有转换彻底,将会有很多的编码问题出现!
    2010-02-02

最新评论