electron目录规划

目录规划仅仅只是简写版本

目录明细

electron
├─electronConfig
|  ├─devtools.ts //chrome插件
|  ├─index.ts //总输出
|  ├─listenIpc.ts //监听渲染进程发送到主进程的事件
|  ├─protocol.ts //自定义协议
├─ main.ts

文件内容

main.ts

import * as os from "os";
import * as path from "path";
import * as url from "url";
import { app, BrowserWindow, ipcMain } from "electron";
import { loadExtension, setProtocol, listenIpc } from "./electronConfig";

let win: BrowserWindow = null,
  loadingWindow: BrowserWindow = null;
const args = process.argv.slice(1),
  serve = args.some((val) => val === "--serve");
  
  
function createWindow(): BrowserWindow {
  win = new BrowserWindow({
    width: 800 + (os.platform() === "darwin" ? 15 : 34),
    height: 600,
    minWidth: 540,
    minHeight: 540,
    show: false,
    frame: true, // 去掉顶部操作栏
    webPreferences: {
      webSecurity: false, //允许加载本地资源
      nodeIntegration: true,
    },
  });
  if (serve) {
    win.webContents.openDevTools();

    require("electron-reload")(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`),
    });

    //安装扩展 仅在开发环境使用
    loadExtension();
    
    win.loadURL("http://localhost:4200");
  } else {
    win.loadURL(
      url.pathToFileURL(path.join(__dirname, "dist/index.html")).href
    );
  }
  //设置自定义协议
  setProtocol();
  //监听渲染进程发送到主进程的事件
  listenIpc.call(this, win);
  win.on("closed", () => {
    win = null;
  });
  
  return win;
}

try {
  app.on("ready", function () {
    const win = createWindow();
  });

  app.on("window-all-closed", () => {
    // 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", () => {
    if (win === null) {
      createWindow();
    }
  });
} catch (e) {
  // Catch Error
  // throw e;
}

electronConfig-devtools.ts

//添加扩展

import { session } from "electron";
import * as os from "os";
import * as path from "path";

/**
 * 获取扩展版本号
 * @param id 扩展id
 * @param v  扩展版本号
 */
const getExtension = function (id: string, v: string): string {
  return path.join(
    os.homedir(),
    (process.platform !== "darwin"
      ? "/AppData/Local/Google/Chrome/User Data/Profile 3/Extensions/"
      : "/Library/Application Support/Google/Chrome/Default/Extensions/") +
    id +
    "/" +
    v+'_0'
  );
};

const Angular_State_Inspector = getExtension(
  "nelkodgfpddgpdbcjinaaalphkfffbem",
  "1.4.5"
);
const Redux_DevTools = getExtension(
  "lmhkpmbekcpmknklioeibfkpmmfibljd",
  "2.17.0"
);
// electron11不支持某个api 故此不用了
// const Augury = getExtension(
//   "elgalmkoelokbchhkhacckoklkejnhcd",
//   "1.25.2"
// );


export function loadExtension():void{
  //添加angular 扩展
  session.defaultSession.loadExtension(Angular_State_Inspector);
  session.defaultSession.loadExtension(Redux_DevTools);
}

electronConfig-listenIpc.ts

import { ipcMain, BrowserWindow, dialog } from "electron";

export function listenIpc(win: BrowserWindow): void {
   const SELECT_DIR = (files: string[], outdir: string) => {
      //向渲染进程发送事件
      //渲染进程 使用 ipcRenderer.on 监听
      win.webContents.send(...,...);
  });

  ipcMain.on('SELECT_DIR', SELECT_DIR);
}

electronConfig-protocol.ts

import { protocol } from "electron";

export function setProtocol(): void {
  //让electron 可以加载本地文件
  protocol.interceptFileProtocol("file", (req, callback) => {
    const url = req.url.substr(8);
    callback(decodeURI(url));
  });
}

electronConfig-index.ts

export * from './devtools';
export * from './protocol';
export * from './listenIpc';