我是靠谱客的博主 紧张胡萝卜,这篇文章主要介绍Scratch3.0初始化加载七牛云上的sbs文件的方法,现在分享给大家,希望可以做个参考。

下面通过代码介绍下Scratch3.0初始化加载七牛云上的sbs文件,代码如下所示:

编写组件

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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.jsx文件提示:页面不存在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"; 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(); }); } render () { return this.props.children(this.props.className); } } SB3DownloaderQiniu.propTypes = { children: PropTypes.func, className: PropTypes.string, intl: intlShape.isRequired, loadingState: 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, dispatchProps, ownProps ); export default connect( mapStateToProps, mapDispatchToProps, mergeProps )(injectIntl(SB3DownloaderQiniu));

使用组件

复制代码
1
2
3
4
5
<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函数

  新增以下代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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', nonInteraction:true }) }) reader.readAsArrayBuffer(blob) }) .catch(error=>{ alert(`远程加载文件错误!${error}`) })

文件加载完毕

此外,我们例如希望开发像修改作业之类的,我们可以需要进行文件的传递

我们需要将上面的第一行

consturl="/static/123.sb3";

更改为

consturl=window.projecturl;

然后呢。在首页,例如paly.html添加上以上代码,或者自己用参数来传递

复制代码
1
2
3
4
5
<script> window.projectUrl="https://steam.nosdn.127.net/885318eb-ad83-44c4-afe3-d3bea0a0d2ab.sb3"; </script>

到此这篇关于Scratch3.0初始化加载七牛云上的sbs文件的文章就介绍到这了,更多相关Scratch加载sbs文件内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客!

最后

以上就是紧张胡萝卜最近收集整理的关于Scratch3.0初始化加载七牛云上的sbs文件的方法的全部内容,更多相关Scratch3.0初始化加载七牛云上内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(164)

评论列表共有 0 条评论

立即
投稿
返回
顶部