Scratch3.0 页面初始化的时候加载sb3文件_js 实现scrach sb3 播放器-程序员宅基地

技术标签: Scratch3.0  

目标文件地址: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));

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/onightfalls/article/details/106543037

智能推荐

从图的邻接表表示转换成邻接矩阵表示_typedef struct arcnode{int adjvex;-程序员宅基地

文章浏览阅读1.1k次。从图的邻接表表示转换成邻接矩阵表示typedef struct ArcNode{ int adjvex;//该弧指向的顶点的位置 struct ArcNode *next;//下一条弧的指针 int weight;//弧的权重} ArcNode;typedef struct{ VertexType data;//顶点信息 ArcNode *firstarc;} VNode,AdList[MAXSIZE];typedef struct{ int vexnum;//顶点数 int _typedef struct arcnode{int adjvex;

学好Python开发你一定会用到这30框架种(1)-程序员宅基地

文章浏览阅读635次,点赞18次,收藏26次。14、fabric是基于Python实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括命令执行,文件上传,下载及完整执行日志输出等功能。7、pycurl 是一个用C语言写的libcurl Python实现,功能强大,支持的协议有:FTP,HTTP,HTTPS,TELNET等,可以理解为Linux下curl命令功能的Python封装。Scipy是Python的科学计算库,对Numpy的功能进行了扩充,同时也有部分功能是重合的。

Ubuntu中anaconda图形化界面的使用_ubuntu安装anaconda后怎么运行图形化节目-程序员宅基地

文章浏览阅读4.9k次,点赞3次,收藏25次。看网上教程,跟着配置,然后装完anaconda之后,大家都继续安装pycharm,然后傻吊的以为Ubuntu下的anaconda是没有图形化界面的,只有win下面 装完anaconda之后,可以直接在jupyter下面写代码今天突然发现Ubuntu下anaconda也是有图像化界面的$ conda --version /* 查看版本 */$ conda create --name my_en..._ubuntu安装anaconda后怎么运行图形化节目

深度学习RNN-程序员宅基地

文章浏览阅读771次,点赞22次,收藏11次。只记得我在一个昏暗潮湿的地方喵喵地哭泣着。——夏目漱石《我是猫》到目前为止,我们看到的神经网络都是前馈型神经网络。(feedforward)是指网络的传播方向是单向的。具体地说,先将输入信号传给下一层(隐藏层),接收到信号的层也同样传给下一层,然后再传给下一层……像这样,信号仅在一个方向上传播。虽然前馈网络结构简单、易于理解,而且可以应用于许多任务中。不过,这种网络存在一个大问题,就是不能很好地处理时间序列数据(以下简称为“时序数据”)。

Rsync数据复制——本地数据传输_rsync本地拷贝-程序员宅基地

文章浏览阅读2.5k次。1本地数据传输类似cp的复制,实现文件,目录的增量复制。#语法模式rsync命令 参数 src源文件/目录 dest目标文件/目录1.本地文件复制# 复制hosts文件[root@chaogelinux ~]# rsync /etc/hosts /tmp/2.复制目录内容-r, --recursive 对子目录以递归模式处理# 复制/data下所有内容到/tmp[root@lb01 ~]# rsync -r /data/ /tmp/# 复制/data整个文件夹到/tmp_rsync本地拷贝

随机密码约瑟夫环_py约瑟夫环问题n,k,m要求由键盘输入值,每个人持有的密码随机生成。 2、每个函数完-程序员宅基地

文章浏览阅读1.4k次,点赞3次,收藏11次。约瑟夫环问题: 问题描述:设有编号为1,2,3……n的n个人顺时针方向围坐一圈,每人有一密码(正整数)。开始时给出一初始密码m,从编号为1的人开始报数,报m的人出列;以后将出列者的密码作为新的m,从顺时针方向紧挨着他的下一个人开始报数……直至所有人出列。试编算法,求出出列顺序。要求:用不带头结点的单向循环链表实现从键盘输入n,m各人的密码由计算机随机产生(1~10的正整数,也可以自定义_py约瑟夫环问题n,k,m要求由键盘输入值,每个人持有的密码随机生成。 2、每个函数完

随便推点

AHAS arms调用链查询中,接口实际耗时和监听耗时差异在什么地方?_arms调用链路耗时看不懂-程序员宅基地

文章浏览阅读109次。监听耗时仅代表了 AHAS ARMS Listener(即调用链收集器)在收集并处理当前请求的调用信息时所需要的时间。它不包括网络传输、处理请求、执行操作、处理响应等其他阶段的时间,仅代表 Listener 所需的时间。通常这个时间会很短,只有几毫秒甚至更短。接口实际耗时包括了整个请求/响应周期中的所有时间,包括网络传输、处理请求、执行操作、处理响应等阶段消耗的时间。它代表了该请求在客户端发起到最终服务器响应完成所花费的总时间。_arms调用链路耗时看不懂

常见的Web应用的漏洞总结(原理、危害、防御)_web 应用中常见的漏洞及其危害有哪些-程序员宅基地

文章浏览阅读2.5k次。一、 SQL注入1.原理:SQL注入就是把SQL命令插入到Web表单然后提交到所在页面请求(查询字符串),从而达到欺骗服务器执行恶意的SQL命令。它是利用现在已有的应用程序,将SQL语句插入到数据库中执行,执行一些并非按照设计者意图的SQL语句。2.原因:根据相关技术原理,SQL注入可以分为平台层注入和代码层注入。前者由不安全的数据库配置或数据库平台的漏洞所致;后者主要是由于程序员对输入..._web 应用中常见的漏洞及其危害有哪些

离散数学——命题逻辑_离散数学命题逻辑-程序员宅基地

离散数学中的命题逻辑,包括命题的表示和联结词的运用,推理理论和常用的证明方法,如真值表法和直接证明法。还介绍了附加前提证明法或CP规则。

Spring Expression Language(SpEL)-程序员宅基地

文章浏览阅读8.6k次。Spring Expression Language(SpEL)spring的一种表达式。用来动态的获取,值、对象等。 样式: #{ …} 使用既定的规则放置在花括号中。式中的规则得以运行,可以反馈结果。理论上可以返回任何类型。 说说两种方式去设置SpELAnnotation注解。@Value()方便快捷。 你可以在里面方式任何符合SpEL规范的语句,并把它的返回值注..._spring expression language

ansible最大并发_通过这7种方法来最大程度地提高Ansible技能-程序员宅基地

文章浏览阅读1.7k次。ansible最大并发 Ansible是一种功能强大的无代理(但易于使用且轻巧)的自动化工具,自2012年推出以来一直稳步流行。这种流行在一定程度上是由于其简单性。 默认情况下,Ansible的最基本依赖项(Python和SSH)几乎在所有地方都可用,这使得Ansible可以轻松用于各种系统:服务器,工作站,Raspberry Pi,工业控制器,Linux容器,网络设备等。 Ansible可..._ansible 提升 高并发

Barcode Reader在45毫秒内实现条码识别-程序员宅基地

文章浏览阅读479次。应我的客户要求,需要找到一款可以在极短时间识别二维条码的软件以应对他们现在极其迅速的货品入库需求。正好听说过一款Dynamsoft Barcode Reader的开发包,根据其官网介绍最新版对条码检测速度比以前的版本快2倍以上。根据对Dynamsoft Barcode Reader8.8SDK包拆解,其中含了JavaScript Package /.NET Package /C/C++ Package /Python Package /Java Package /iOS Package /A..._barcode reader