Scratch3.0 页面初始化同时加载sb3文件的操作代码

要实现Scratch3.0页面初始化同时加载sb3文件的操作代码，可以按照以下步骤：

步骤一：创建一个Scratch3.0项目并上传sb3文件

首先需要在Scratch3.0官网：https://scratch.mit.edu/ 上创建一个Scratch项目。在项目中上传需要加载的sb3文件，可以通过点击文件按钮，再选择上传按钮来完成。上传成功后，记录sb3文件的ID号。

步骤二：使用Scratch API加载sb3文件

Scratch提供了API来帮助加载sb3文件。具体实现步骤如下：

1. 导入Scratch API

<script src="https://cdn.jsdelivr.net/npm/scratch-api/dist/scratch-api.js"></script>

1. 创建Scratch存储和加载所需的变量

<script>
  var projectId = 'sb3文件的ID号';
  var md5ext = 'sb3';
  var loader = new ScratchLoader();
  var vm = new window.VirtualMachine();
  vm.loadProject(projectId, md5ext, loader).then(() => {
    console.log('Scratch 3.0 project loaded!');
  });
</script>

其中，projectId和md5ext分别代表sb3文件的ID和扩展名，loader用于加载实际项目文件。使用loadProject方法下载程序数据，然后使用VM执行程序并初始化。

示例一：使用Scratch API加载本地sb3文件

如果需要从本地加载sb3文件，可以通过以下方式实现：

1. 创建ID为"fileInput"的文件输入框

<input type="file" id="fileInput">

1. 注册事件监听函数并加载sb3文件

document.getElementById('fileInput').addEventListener('change', function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var buffer = e.target.result;
    var projectId = await fetch('https://uploads.scratch.mit.edu/internalapi/project/' + projectId + '/get/').then(r => r.json()).then(json => json.contentId);
    vm.loadProject(projectId, 'sb3', buffer)
      .then(() => {
        console.log('Scratch 3.0 project loaded from file!');
      });
  };
  reader.readAsArrayBuffer(file);
});

其中，fetch方法用于获取sb3文件的ID，vm.loadProject方法用于加载sb3文件到虚拟机中。

示例二：使用Scratch API加载网络中的sb3文件

如果需要从网络中加载sb3文件，可以通过以下方式实现：

const projectId = 'sb3文件的ID号';
const extendUrl = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/' + projectId + '.sb3/get/';
fetch(extendUrl)
  .then(res => {
    console.log('项目资料:', res);
    return res.arrayBuffer();
  })
  .then(buffer => {
    vm.downloadProject(buffer).then(() => {
      console.log('Scratch 3.0 project loaded from URL!');
    });
  });

其中，fetch方法用于获取sb3文件的内容，vm.downloadProject方法用于将sb3文件下载到虚拟机中。

完成以上步骤后，就可以实现在Scratch3.0页面初始化同时加载sb3文件的操作。