Windows平台下使用electron进行网页打包

• 步骤

  • 安装nodej.s

    • 如何查看自己是否安装了node.js

  • 安装asar

    • 如何查看自己是否安装了asar

    • npm install -g asar

    • 

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIftqvHD-1634137192052)(data:image/svg+xml;utf8, )]

  • 安装Electron

    • 下载windows安装包

      • Release electron v9.1.0 · electron/electron · GitHub

      • 这里需要注意的是，一定要下载windows平台安装包，否则后面会报错

      • 

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m8lQ5Yhk-1634137192063)(data:image/svg+xml;utf8, )]

    • 配置Electron

      • 在Electron目录中新建app目录, 放置如下两个文件:

        • 

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o1Z5gaTF-1634137192069)(data:image/svg+xml;utf8, )]

        • 

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaf8pJtc-1634137192074)(data:image/svg+xml;utf8, )]

      • 两个文件分别的代码如下

      • main.js

      • 如果你的网址有变化的话，就修改一下 const mainWindowURL 变量的值

      • // app 模块是为了控制整个应用的生命周期设计的。
        // BrowserWindow 类让你有创建一个浏览器窗口的权力。
        const {app, BrowserWindow, Menu, ipcMain} = require(‘electron’);
        const nativeImage = require(‘electron’).nativeImage;
        var overlay = nativeImage.createFromPath(‘icon.png’);

        const mainWindowURL = ‘https://www.processon.com’;

        let mainWindow;

        //api:https://wizardforcel.gitbooks.io/electron-doc/content/api/browser-window.html
        function createWindow () {
        console.log(“createWindow…”);
        mainWindow = new BrowserWindow({
        // fullscreen: true,
        maximizable: true, //支持最大化
        show: false, //为了让初始化窗口显示无闪烁，先关闭显示，等待加载完成后再显示。
        // icon: “https://medical.3vyd.com/alk/prod/pc/icon/icon.ico”
        })

        // Emitted when the window is closed.
        mainWindow.on(‘closed’, function () {
        console.log(“closed…”);
        mainWindow = null;
        })
        // mainWindow.once(‘ready-to-show’, () => { //开启这个以后点击了图片虽然没有白屏，但是会感觉不到点了没点
        mainWindow.maximize(); //打开时最大化打开，不是全屏，保留状态栏
        // })

        // mainWindow.setOverlayIcon(overlay, “ProcessOn”)
        mainWindow.setTitle(“ProcessOn”);
        mainWindow.setAutoHideMenuBar(true);//自动隐藏菜单
        mainWindow.loadURL(mainWindowURL);
        // app.commandLine.appendSwitch("–disable-http-cache") 禁用缓存
        // mainWindow.webContents.openDevTools({mode:‘bottom’});
        mainWindow.show();
        }

        app.on(‘ready’, function() {
        console.log(“ready…”);
        createWindow();
        });

        // Quit when all windows are closed.
        app.on(‘window-all-closed’, function () {
        // On OS X it is common for applications and their menu bar
        // to stay active until the user quits explicitly with Cmd + Q
        if (process.platform !== ‘darwin’) {
        app.quit();
        }
        })

      • package.json

      • { “name”: “electron”, “productName”: “Electron”, “main”: “main.js” }

  • 进行打包

    • 使用如下命令打包

    • 进入electron/resources目录，将这个文件夹下原有的default_app.asar来删除

      • 

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WOYYHohk-1634137192077)(data:image/svg+xml;utf8, )]

    • 到根目录下进行打包，这里一定要看清楚，一定是该目录点，其他目录会报错的

    • asar pack app default_app.asar

      • 这个代码的运行速度非常快，瞬间就可以完成

      • 

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LuTWkFRb-1634137192080)(data:image/svg+xml;utf8, )]

      • 运行代码之后会在根目录下生成一个default_app.asar

      • 

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDE9qg19-1634137192084)(data:image/svg+xml;utf8, )]

      • 我们将这个文件重新放到resources下面，那么整个打包过程就算完成了

  • 运行

    • 运行electon.exe文件即可 ，如果你有需求的话，可以将其改下名即可

    • 

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6Ny2qIO-1634137192088)(data:image/svg+xml;utf8, )]

    • 可以看到我们百度一下，你就知道的网页已经出来了

    • 

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHCpvIcC-1634137192091)(data:image/svg+xml;utf8, )]

• 出现的问题

  • 打包完成之后，双击excel文件没反应
    • 有可能是打包的这个软件不适合于当前系统环境
      • 可以看一下自己下载的这个文件是不是自己对应平台的，会不会下载错成linux或者make平台下的了
    • 确保自己main.js 和package.json两个文件里面的内容不为空
      • 有时候就犯这么低级的错误
  • 不生成exe文件
    • 打包一定是在根目录下对APP文件夹进行打包的，不要去resources下面打包，这个问题自己卡了好长一段时间，后来才在大佬的指导下解决的
  • ‘electron’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
    • 安装electron即可
    • npm install electron -g

• 需要注意的问题

  • 必须在英文路径下，否则会报错