下面通過程式碼介紹下Scratch3.0初始化載入七牛雲上的sbs檔案，程式碼如下所示：

編寫元件

import PropTypes from 'prop-types';
import React from 'react';
import {connect} from 'react-redux';
import {injectIntl,intlShape} from 'react-intl';

import analytics from '../lib/analytics';
import log from '../lib/log';
import {LoadingStates,onLoadedProject,onProjectUploadStarted} from '../reducers/project-state';

import {openLoadingProject,closeLoadingProject} from '../reducers/modals';

/** 獲取作品的編號 **/
function getProjectId() {
	if(document.getElementById("projectId")){
		return $("#projectId").val();
	} else {
		alert("sb3-downloader-qiniu.x檔案提示：頁面不存在id屬性為projectId的物件!");
		return null;
	}
}

/**
 * 從七牛雲載入sb3檔案
 */
class SB3DownloaderQiniu extends React.Component {
    constructor (props) {
        super(props);
    }
	
	componentDidMount() { 
		var _this = this;
		
		if(getProjectId()==null){
			return;
		}
	  
		// 作品所在存放地址
		var sb3Path = null;
		$.ajax({
			dataType:"json",async:false,url:"/project/checkProjectByProjectId",data: {id: getProjectId()},success:function(res){
				if(res.success==true){
					sb3Path = res.sb3Path;
				}
			}
		});
		
		/**
		 * 必須使用 $(window).on("load",function(){});
		 * 否則頁面在未載入完的情況下，有些元件會來不及載入，影響二次檔案儲存
		 */
		$(window).on("load",function(){
			let reader = new FileReader();
			let request = new XMLHttpRequest();
			request.open('GET',sb3Path,true);
			request.responseType = "blob";
			requGCavvbE
 
est.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();
		});
	    
	}
   
    render () {
        return this.props.children(this.props.className);
    }
}

SB3DownloaderQiniu.propTypes = {
    children: PropTypes.func,className: PropTypes.string,intl: intlShape.isRequired,loadingS
 
tate: PropTypes.oneOf(LoadingStates),onLoadingFinished: PropTypes.func,vm: PropTypes.shape({
        loadProject: PropTypes.func
    })
};

SB3DownloaderQiniu.defaultProps = {
    className: ''
};

const mapStateToProps = state => ({
    loadingState: state.scratchGui.projectState.loadingState,vm: state.scratchGui.vm
});

const mapDispatchToProps = (dispatch,ownProps) => ({
    onLoadingFinished: loadingState => {
		console.dir("sb3檔案載入完畢！");
        dispatch(onLoadedProject(loadingState,ownProps.canSave));
        dispatch(closeLoadingProject());
    }
});

// Allow incoming props to override redux-provided props. Used to mock in tests.
const mergeProps = (stateProps,dispatchProps,ownProps) => Object.assign(
    {},stateProps,ownProps
);

export default connect(
    mapStateToProps,mapDispatchToProps,mergeProps
)(injectIntl(SB3DownloaderQiniu));

使用元件

<SB3DownloaderQiniu /** 初始化載入檔案到專案 **/>
	{(className,loadProject) => (
		<button onClick={loadProject} className={classNames(styles.scratchHide)}></button>
	)}
</SB3DownloaderQiniu>

好了，下面看下如何自動載入scratch3.0的頁面上實現自動載入原有的作品

首先，我們在安裝scratch3。0後，瀏覽器預設開啟的是的頁面。如下圖：

那麼我們希望開發一個功能，就是開啟的時候預設加入某一個SB3的開發檔案

1.首先，我們需要有一個.SB3的開發檔案，建議上傳到STATIC目錄下

2、找到scratch-gui-develop>src>container》gui.jsx檔案

找到44行的componentDidMount函式

　　新增以下程式碼

const url="/static/123.sb3";
        fetch(url,{
            method: 'GET'
        })
        .then(response=>response.blob())
        .then(blob=>{
            const reader=new FileReader();
            reader.onload=()=>this.props.vm.loadProject(reader.result)
            .then(()=>{
                GoogleAnalytics.event({
                    category:'project',                    action:'Import Project File',nowww.cppcns.comnInteraction:true
                })
            })
            reader.readAsArrayBuffer(blob)
        })
        .catch(error=>{
            alert(`遠端載入檔案錯誤！${error}`)
        })

檔案載入完畢

此外，我們例如希望開發像修改作業之類的，我們可以需要進行檔案的傳遞

我們需要將上面的第一行

consturl="/static/123.sb3";

更改為

consturl=window.projecturl;

然後呢。在首頁，例如paly.html新增上以上程式碼，或者自己用引數來傳遞

<script>

window.projectUrl="https://steam.nosdn.127.net/885318eb-ad83-44c4-afe3-d3bea0a0d2ab.sb3";

</script>

到此這篇關於Scratch3.0初始化載入七牛雲上的sbs檔案的文章就介紹到這了,更多相關Scratch載入sbs檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！