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

1. 教程
   • https://zhuanlan.zhihu.com/p/161864662
2. 步骤
   • 安装nodej.s
     • 如何查看自己是否安装了node.js
   • 安装asar
     • 如何查看自己是否安装了asar
     • npm install -g asar
   • 安装Electron
     • 下载windows安装包
       • Release electron v9.1.0 · electron/electron · GitHub
       • 这里需要注意的是，一定要下载windows平台安装包，否则后面会报错
     • 配置Electron
       • 在Electron目录中新建app目录, 放置如下两个文件:
       • 两个文件分别的代码如下
       • 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来删除
     • 到根目录下进行打包，这里一定要看清楚，一定是该目录点，其他目录会报错的
     • asar pack app default_app.asar
       • 这个代码的运行速度非常快，瞬间就可以完成
       • 运行代码之后会在根目录下生成一个default_app.asar
       • 我们将这个文件重新放到resources下面，那么整个打包过程就算完成了
   • 运行
     • 运行electon.exe文件即可 ，如果你有需求的话，可以将其改下名即可
     • 可以看到我们百度一下，你就知道的网页已经出来了
3. 出现的问题
   • 打包完成之后，双击excel文件没反应
     • 有可能是打包的这个软件不适合于当前系统环境
       • 可以看一下自己下载的这个文件是不是自己对应平台的，会不会下载错成linux或者make平台下的了
     • 确保自己main.js 和package.json两个文件里面的内容不为空
       • 有时候就犯这么低级的错误
   • 不生成exe文件
     • 打包一定是在根目录下对APP文件夹进行打包的，不要去resources下面打包，这个问题自己卡了好长一段时间，后来才在大佬的指导下解决的
   • 'electron' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
     • 安装electron即可
     • npm install electron -g
4. 需要注意的问题
   • 必须在英文路径下，否则会报错
5.