scratch二次开发——如何实现程序代码的保存和打开过程

大家好，我是小黄。

很久没有更新有关scratch的有关内容了，由于现在国内的有关scratch二次开发的中文教程还是很少，所以学习起来会比较困难，恰逢最近有很多小伙伴私信来询问有关scratch的相关内容。今天我们继续来分享一下对于如何实现程序代码的保存和打开过程。

一.使用场景

我么在实际使用的过程中，有些积木块我们需要多次使用，比如下列的代码。但是如果不进行保存的话，每次使用都需要重新编辑一遍特别的麻烦。为了解决这个问题我们可以选择把以及编辑好的积木块保存到文件里面，后面想要重新执行这个程序的时候我们就重新打开。

二.实现过程

这次使用的代码还是之前分享有关scratch的文章代码。

我们通过阅读代码发现index.html文件里面有两个方法。

//生成xml字符串
function exportXml(){
let xml = Blockly.Xml.workspaceToDom(workspace);
let content = Blockly.Xml.domToPrettyText(xml)
console.log(content);
return content;

  }
  //导入xml字符串并生成代码
  function importXml(value){
    let xml = Blockly.Xml.textToDom(value);
    Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace);
    workspace.refreshToolboxSelection_()
    genLuaCode()
  }

2.为了方便调用，小黄随便写了两个button调用。

输出XML

加载XML

具体的效果在这里。

![](https://img-blog.csdnimg.cn/direct/dd1d26af2b214738909f398abb80aadf.png

3.我们点击一下输出xml试试效果。

我们可以看到，控制台以及成功输出对应的内容了。我们再试一次，可以看到也成功输出了。

相信聪明的小伙伴已经发现了，输出的内容就是一个xml代码。文件的保存就是把对应的xml代码保存，打开就是把xml代码重新加载。

4.因为代码有点长，我们选择把代码写到文件中。

//生成xml字符串
function exportXml(){
let xml = Blockly.Xml.workspaceToDom(workspace);
let content = Blockly.Xml.domToPrettyText(xml)
console.log(content);

   // 创建一个 Blob 对象，包含格式化的 XML 字符串
   // 指定要写入的文件名和编码
   const blob = new Blob([content], { type: 'text/xml' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'test.txt';
    link.click();
    window.URL.revokeObjectURL(url);
    return content;
   
  }

文件里面已经保存了对应的xml了。

5.下面我们将实现打开流程。

打开也很简单，我们先获取到对应文件里面的xml代码，之后使用上面的函数加载进去就好了。

6.有时候为了保密，我们不要明文保存到文件中，我们可以选择一下加密算法去进行加密，在打开文件的时候进行解密。这样就不会那么容易被破解了。

好了，今天小黄的分享就到这里。

如果您在学习的时候遇到什么问题请给我留言。

关注我，一起学习探讨更多scratch知识！您的支持将是我创作的最大动力！需要项目源码的小伙伴请回复：scratch源码。小黄看到都会及时回复的。