准备工作

// 设置electron源 不然安装时可能会网络错误
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install --save-dev electron
// 用来打包
npm i -D @electron-forge/cli
// 自动修改package.json
npx electron-forge import
// 重启设置
npm i electron-reload -D

  "name": "ng-dsp",
  "version": "1.0.0",
  // 需要增加main.js
  "main": "main.js",
  "scripts": {
  "start:electron": "npx electron . --serve",
  "package": "electron-forge package",
  "make": "electron-forge make",
  "start:ng": "ng s --host 0.0.0.0",
  "build": "ng build",
  "build:prod": "ng build --prod",
  "watch": "ng build --watch --configuration development",
  "test": "jest",
  "test:watch": "jest --watch",
  "test:cov": "jest --coverage"
},
"config": {
    "forge": {
      "packagerConfig": {
        "appVersion": "1.0.0",
        "dir": "dist/",
        "name": "ng-dsp",
        "overwrite": true,
        "ignore": [
          "node_modules"
        ],
        "win32metadata": {
          "ProductName": "dsp转换器",
          "CompanyName": "长城",
          "FileDescription": ""
        }
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "ng_dsp"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }

根路径下创建main.js

// electron的启动文件
let path = require("path");
const { app, BrowserWindow, ipcMain, screen } = require("electron");
let win = null;
let url = require("url");
let args = process.argv.slice(1);
let size = { width: 0, height: 0 };
// 用于控制是否显示devTool的环境工具
let serve = args.some(function (val) {
  return val === "--serve";
});
function createWindow() {
  let electronScreen = screen;
  size = electronScreen.getPrimaryDisplay().workAreaSize;
  // Create the browser window.
  win = new BrowserWindow({
    width: Math.floor(size.width * 0.8),
    height: Math.floor(size.height * 0.8),
    center: true,
    resizable: true,
    webPreferences: {
      devTools: true,
      nodeIntegration: true,
      allowRunningInsecureContent: serve ? true : false,
      contextIsolation: false,
      enableRemoteModule: true, // true if you want to run 2e2 test  with Spectron or use remote module in renderer context (ie. Angular)
    },
    // fullscreen: false,
    frame: false,
  });
  // 如果是测试 此时映射load localhost 否则load对应的打包文件
  if (serve) {
    win.webContents.openDevTools();
    require("electron-reload")(__dirname, {
      electron: require(__dirname + "/node_modules/electron"),
    });
    win.loadURL("http://localhost:4200");
  } else {
    win.loadURL(
      url.format({
        pathname: path.join(__dirname, "dist/index.html"),
        protocol: "file:",
        slashes: true,
      })
    );
  }
  // Emitted when the window is closed.
  win.on("closed", function () {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
  return win;
}
function closeWindow() {
  if (win) {
    // win.close();
    win = null;
    // 弹窗
    app.exit();
  }
}
// 窗口展开
function expand() {
  win.setSize(size.width, size.height);
  win.center();
}
function fold() {
  win.setSize(Math.floor(size.width * 0.8), Math.floor(size.height * 0.8));
  win.center();
}
// 最小化
function minimize() {
  win.minimize();
}
try {
  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  // Added 400 ms to fix the black background issue while using transparent window. More detais at https://github.com/electron/electron/issues/15947
  app.on("ready", function () {
    return setTimeout(createWindow, 400);
  });
  // 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();
    }
  });
  app.on("activate", function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow();
    }
  });
  ipcMain.on("closeWindow", (event, arg) => {
    closeWindow();
  });
  ipcMain.on("expand", (event, arg) => {
    if (arg) {
      fold();
    } else {
      expand();
    }
  });
  ipcMain.on("minimize", (event, arg) => {
    minimize();
  });
} catch (e) {
  // Catch Error
  // throw e;
}
//# sourceMappingURL=main.js.map

# Electron build
out/*

开发

electron和程序通信

main.js中的console会打印在控制台，代码中的console会打印在DevTool

import { Component } from '@angular/core';
import { IpcRenderer } from 'electron';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less'],
})
export class AppHeaderComponent {
  private ipc!: IpcRenderer;
  // 是否最大化
  isExpand = false;
  constructor() {
    if ((window as any).require) {
      try {
        this.ipc = (window as any).require('electron').ipcRenderer;
      } catch (e) {
        throw e;
      }
    } else {
      console.warn('App not running inside Electron!');
    }
  }
  expand() {
    this.ipc.send('expand', this.isExpand);
    this.isExpand = !this.isExpand;
  }
  minimize() {
    this.ipc.send('minimize');
  }
  close() {
    this.ipc.send('closeWindow');
  }
}

打包

修改angular打包输出位置

修改index.html

打包
```
npm run build
npm run package
```
替换electron打包后的out/xxx/resources/app

之后再打包时，只用替换dist即可。

编程记录

electron angular开发

准备工作

开发

electron和程序通信

打包