最近有个项目，基于scratch3.0二开的，发现网上这方面资料比较少，特把涉及到scratch3.0的相关知识分享给大家，让scratch3.0二开的人，可以少走点弯路。

主要涉及内容，基本以scratch3.0工程本身及相关底层接口调用或扩展为准。

目录

框架初始化升级

集成antd，集成axios：

1.  
   "devDependencies": {
2.  
   "antd": "^3.26.19",
3.  
   "axios": "^0.26.1",
4.  
   }

保存编程项目到自有服务器

项目文件上传通用封装函数

1.  
    
2.  
   export function uploadFile (form) {
3.  
   return new Promise((resolve, reject) => {
4.  
   request({
5.  
   url: '你自己的项目保存地址',
6.  
   data: form
7.  
   })
8.  
   .then(response => {
9.  
   resolve(response.data);
10.  
    })
11.  
    .catch(err => {
12.  
    console.log(err);
13.  
    reject(response.data);
14.  
    });
15.  
    });
16.  
    }

编程项目上传

1.  
   window.vm.saveProjectSb3().then(projectData => {
2.  
   const projectFile = new File([projectData], `${window.scratch.getProjectName()}.sb3`);
3.  
   const form = new FormData();
4.  
   // File.lastModified：最后修改时间
5.  
   // File.name：文件名或文件路径
6.  
   // File.size：文件大小（单位字节）
7.  
   // File.type：文件的 MIME 类型
8.  
   form.append('file', projectFile);
9.  
   form.append('projectId', this.state.projectId);
10.  
    uploadFile(form).then(rres => {
11.  
    log.debug('程序文件上传，返回结果 editProject：', rres);
12.  
    if (rres && rres.data && rres.data.id) {
13.  
     
14.  
    }
15.  
    });
16.  
    });

在线编程项目加载

1.  
    
2.  
   /**
3.  
   * 加载当前编程项目
4.  
   * @param {number} _codeId
5.  
   * @param {string} _title
6.  
   */
7.  
   loadCloudProject (_codeId, _title) {
8.  
   log.debug('状态用户最新的编程项目', _codeId, _title);
9.  
   window.scratch.loadProject(
10.  
    `你自己的项目下载地址`, _title,
11.  
    res => {
12.  
    log.debug('编程项目加载结果：', res);
13.  
    window.scratch.setProjectName(_title);
14.  
    this.props.onProjectUnchanged();
15.  
    }
16.  
    );
17.  
    }

这篇好文章是转载于：学新通技术网