美文网首页
ScratchDesktop打包指南

ScratchDesktop打包指南

作者: 桃木有禾 | 来源:发表于2020-09-27 18:37 被阅读0次

    ScratchDesktop安装

    1. 分别下载ScratchDesktop和ScratchGui (ScratchDesktop分支)

    2. 在gui中查找scratch-logo.svg,替换为本站logo,安装ScratchGui ,并npm run build

    3. 安装yarn npm install -g yarn

    4. 避免安装时报错可对electron做加速 yarn config set ELECTRON_MIRROR http=://npm.taobao.org/mirrors/electron/【此步可遇到问题后再操作】

    5. yran install

    6. 修改资源获取url (/scripts/fetchMediaLibraryAssets.js)

    cdn.assets.scratch.mit.edu 替换为 cdn.mozhua.org
     const getOptions = {
            host: ASSET_HOST,
            path: `/internalapi/asset/${md5}/get/`, //替换为https://cdn.mozhua.org/Project/GetAsset?name=${md5}
            agent: myAgent
        };
    
    1. npm run dist

    文件更改【必须】

    1. 修改gui引用路径为本地

      package.json

      "github:LLK/scratch-gui#scratch-desktop"
      修改为
      "file:../scratch-gui"//此路径为scratch-gui的路径可根据实际路径修改
      

      package-lock.json

      "scratch-gui": {
            "version": "github:LLK/...",
      
            "from": "github:LLK/...."
      }
      修改为
      "scratch-gui": {
       "version": "file:../scratch-gui",//本地路径可根据实际路径修改
       "from": "file:../scratch-gui"
      }
      
    1. 去掉资源获取相关代码

      package.json 删除npm run fetch

    2. 去除appx打包相关代码(非win10环境下运行会报错)

      electron-builder-wrapper.js注释以下代码


      image.png
    image.png
    image.png

    遇到的问题

    安装时卡在Building fresh packages...
    image.png

    解决方案:命令行中输入

    yarn config set ELECTRON_MIRROR http=://npm.taobao.org/mirrors/electron/
    
    内存溢出(虚拟机会遇到的问题)

    解决方案:命令行中输入,命令完成后需重启cmd

    setx NODE_OPTIONS --max_old_space_size=2048
    
    Electron failed
    image.png
    node node_modules/electron/install.js
    

    文件修改

    修改 ScratchDesktop.ico 图标 //桌面图标
    修改 ScratchDesktop.svg 图标 //About页面显示的图标
    about 页面根据需求修改

    // 在浏览器中打开网址
    import { shell } from 'electron';
    <a onClick={() => shell.openExternal("https://www.aerfaying.com")}> www.aerfaying.com</a>
    // 修改about默认窗口大小 修改/src/main/index.js文件
    const createAboutWindow = () => {
        const window = createWindow({
            width: 550,  // 宽度
            height: 550,  // 高度
            parent: _windows.main,
            search: 'route=about',
            title: `About ${productName}`
        });
        return window;
    };
    

    修改主界面左上角logo: 修改scratch-logo.svg 文件
    修改默认项目名:修改 project-title-input.jsx中<BufferedInput />的value //此方法非最佳方式

    相关文章

      网友评论

          本文标题:ScratchDesktop打包指南

          本文链接:https://www.haomeiwen.com/subject/etmluktx.html