Electron-基本使用

const { app, BrowserWindow } = require("electron");
const path = require("path");
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 400,
    height: 400,
    // 置顶
    alwaysOnTop: true,
    x: 1500,
    y: 100,
  });
  // 打开开发者工具
  mainWindow.webContents.toggleDevTools();
  // 可以加载网页url资源
  mainWindow.loadURL("https://michstabe.cn/");
  // 可以加载本地资源
  mainWindow.loadFile(path.resolve(__dirname, "./index.html"));
});
console.log("主进程");

主进程

console.log 会在终端里打印，因为我们目前是在主进程文件里

渲染进程

新建 render.js 并在 index.html 中引入

1 2	console.log("abc"); document.querySelector("body").innerHTML = "渲染";

那么此时的 console.log 会在渲染进程窗口中打印而不是终端里

主进程是不能操作 DOM BOM 的

nodemon

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": " nodemon --exec electron ."
 },

nodemon.json

{
  "verbose": true,
  "ignore": ["*.test.js", "**/fixtures/**"],
  "execMap": {
    "rb": "ruby",
    "pde": "processing --sketch={{pwd}} --run"
  },
  "watch": "*.*",
  "restartable": "rs",
  "ext": "html,js"
}

其他使用技巧：

处理不同操作系统

const { app, BrowserWindow } = require("electron");
const path = require("path");
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 400,
    height: 400,
    // 置顶
    alwaysOnTop: true,
    x: 1500,
    y: 100,
  });
  // 打开开发者工具
  mainWindow.webContents.toggleDevTools();
  // 可以加载网页url资源
  // mainWindow.loadURL("https://michstabe.cn/");
  // 可以加载本地资源
  mainWindow.loadFile(path.resolve(__dirname, "./index.html"));
}
app.whenReady().then(() => createWindow());

// 苹果系统默认关闭不会退出程序
app.on("window-all-closed", () => process.platform != "darwin" && app.quit());
app.on("activate", () => createWindow());

样式

样式也是通过 css 去引入

同时可以隐藏掉标题栏，但是隐藏以后就不能拖动窗口了

这个也可以通过 css 来解决，还有一些其他的 API 可以参考文档

结合 vue

原生方式使用起来过于繁琐，可以结合 vue/vite/react 来进行开发

以 vue 为例

pnpm create vite

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "main": "./src/electron/index.cjs",
  "type": "module",
  "scripts": {
    "dev": "concurrently \"vite\" \"electron .\" ",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "concurrently": "^7.6.0",
    "electron": "^23.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }
}

concurrently 用于执行多个命令

electron/index.cjs

const { app, BrowserWindow } = require("electron");

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 400,
    height: 400,
    alwaysOnTop: true,
  });
  mainWindow.loadURL("http://localhost:5173/");
}
app.whenReady().then(() => createWindow());