Scratch3.0如何實現頁面初始化并同時加載sb3文件

小編給大家分享一下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文件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！