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));

本文链接：https://blog.csdn.net/onightfalls/article/details/106543037

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

第五章微服务框架-Spring Boot、Spring Cloud_springboot微服务-程序员宅基地

文章浏览阅读526次。随着动态语言的流行(Ruby、Groovy、 Scala、 Node.js) ，Java的开发显得格外的笨重繁多的配置、低下的开发效率、复杂的部署流程以及第三方技术集成难度大。在上述环境下，Spring Boot应运而生。它使用“习惯优于配置”(项目中存在大量的配置，此外还内置了一个习惯性的配置 ,让你无需手动进行配置)的理念让你的项目快速的运行起来。_springboot微服务

如何查看数据包路由和转发情况_看发送的数据包的转发过程-程序员宅基地

文章浏览阅读1.7k次。tcpdump是一个强大的网络分析工具，可以捕获和分析网络流量。它可以应用于任何网络接口，包括veth、bridge等设备。例如，你可以使用以下命令来捕获在某个veth设备上的流量：其中vethXXX是你想要观察的veth设备的名称。: ip命令是一个多功能的网络配置工具。你可以使用它来查看网络设备、路由表、ARP表等信息。例如，你可以使用以下命令来查看veth设备的状态：你还可以使用以下命令来查看路由表：: netstat命令可以显示网络连接、路由表、接口统计等信息。_看发送的数据包的转发过程

计算两个经纬度点之间的距离_getdistance求经纬度之间的距离-程序员宅基地

文章浏览阅读1.2k次。计算经纬度点之间距离的算法 getDistance(lat1, lng1, lat2, lng2) { const radLat1 = lat1 * Math.PI / 180.0; const radLat2 = lat2 * Math.PI / 180.0; const a = radLat1 - radLat2; con..._getdistance求经纬度之间的距离

Unity + Grpc + protobuf + C# 使用流程详解_unity grpc-程序员宅基地

文章浏览阅读3.7k次，点赞11次，收藏30次。最近公司的一个unity项目要把通信方式从Photon替换成grpc，正好系统学一下grpc,以下是我的学习心得。本篇博客系统详细地介绍了unity使用grpc通信的全部要点，希望可以帮助到大家。奥利给！详解目录一、本篇博客知识点简介二、资源及工具的下载地址1、protocolBuffer各个版本2、GRPC3、grpc_unity_package.2.27.0-dev4、.NET Core SDK 2.1及以上三、C#使用Grpc方法流程1、新建项目2、定义服务3、使用GRPC.Tools自动生成.c_unity grpc

Keil出现无法生成.hex文件，经检查，发现是MULTIPLE PUBLIC DEFINITIONS。_keil生成不了hex文件的原因multilple-程序员宅基地

文章浏览阅读1.3w次，点赞4次，收藏6次。Keil出现无法生成.hex文件，经检查，发现是MULTIPLE PUBLIC DEFINITIONS。实际并不应该出现这种问题。回顾新建项目时在选择单片机型号STC12C5A60S2后，在CPU栏没有选择默认，而是选择了　Use　Extended Linker(LX51) instead of BL51 和 Use Extended Assembler(AX51) instead of ..._keil生成不了hex文件的原因multilple

hibernate 的dialect(方言)配置_hibernate.dialect配置-程序员宅基地

文章浏览阅读4.2k次。转自：https://blog.csdn.net/baidu_40487407/article/details/93042568RDBMS方言RDBMSDialectDB2org.hibernate.dialect.DB2DialectDB2 AS/400org.hibernate.dialect.DB2400DialectDB2 OS390org.hibern..._hibernate.dialect配置