Electron基础及常用到的点

窗口管理#

主进程创建完毕后，会在其内部创建一个或多个 BrowserWindow 模块，创建和管理应用程序窗口。

1
const { BrowserWindow } = require('electron')
2

3
const win = new BrowserWindow({
4
  x: 100,
5
  y: 100, // x y 用于设置窗口显示的位置
6
  show: false, // 默认情况下创建一个窗口对象之后就会显示，设置为false 就不会显示了
7
  width: 800,
8
  height: 400, // 设置窗口的宽高
9
  maxHeight: 600,
10
  maxWidth: 1000,
11
  minHeight: 200,
12
  minWidth: 300, // 可以通过 min max 来设置当前应用窗口的最大和最小尺寸
13
  resizable: false, // 是否允许缩放应用的窗口大小
14
  frame: true, // 用于自定义 menu ，设置为 false 可以将默认的菜单栏隐藏
15
  autoHideMenuBar: true, // 自动隐藏菜单栏
16
  icon: 'logo.ico', // 设置一个图片路径，可以自定义当前应用的显示图标
17
  title: '测试', // 自定义当前应用的显示标题
18
  webPreferences: {
19
    webviewTag: true,
20
    preload: path.join(__dirname, 'preload.js'),
21
  },
22
})
23
win.loadURL('https://github.com')

• 优雅显示窗口

  通过设置 show 属性为 false，可以隐藏窗口，然后再通过 win.show() 方法显示窗口，参考优雅地显示窗口。

• Node.js 集成

  通过设置 webPreferences 可以在渲染进程中使用 Node.js API

  1
  webPreferences: {  // 用于控制窗口加载的网页是否集成 node.js 环境
  2
    nodeIntegration: true,
  3
    enableRemoteModule: true
  4
  }

  此时想要在渲染进程中创建窗口，可以使用 electron 的 remote 进行创建：

  1
  const { remote } = require('electron')
  2
  
  3
  window.addEventListener('DOMContentLoaded', () => {
  4
    const oBtn = document.getElementById('btn')
  5
    oBtn.addEventListener('click', () => {
  6
      let indexMin = new remote.BrowserWindow({
  7
        width: 200,
  8
        height: 200,
  9
      })
  10
      indexMin.loadFile('xxx')
  11
  
  12
  })

  出于安全考虑，不要为远程内容启用 Node.js 集成

1
const { BrowserWindow } = require('electron')
2

3
const win = new BrowserWindow({ width: 800, height: 1500 })
4
win.loadURL('https://github.com')
5

6
const contents = win.webContents
7
// Event Emitter
8
console.log(contents)

应用程序生命周期#

主进程可以通过 Electron 的 app 模块控制当前应用程序的生命周期，即在相应的时间点执行需要的动作。

1
const { app } = require('electron')
2
// 在最后一个窗口被关闭时退出应用
3
app.on('window-all-closed', () => {
4
  if (process.platform !== 'darwin') app.quit()
5
})

Electron 的生命周期包括以下阶段：

• ready

  当 Electron 完成初始化时，发出一次，用于加载窗口的初始化操作 createWindow

• dom-ready

  当前窗体中的文本加载完成后触发，这个事件通常用于开始 DOM 操作

• did-finish-load

  导航完成时触发。这个事件会在页面内容完全加载后触发，适合用来做页面的后置处理。

• window-all-closed

  当所有窗口都被关闭时触发，未监听此事件时，所有窗口关闭后会自动退出应用，并且 before-quit 和 will-quit 两个事件不会生效；监听时需要自己控制是否需要退出应用

• before-quit

  在关闭窗口之前触发，即将关闭最后一个打开的窗口时被触发

• will-quit

  在窗口关闭并且应用退出时触发，可以执行清理工作的逻辑

• quit

  在应用程序退出时发出

• closed

  当窗口被关闭时触发，此时应删除窗口引用避免内存泄露，设置为 null 即可

我们可以使用以下代码进行测试：

1
function createWindow() {
2
  let mainWin = new BrowserWindow({
3
    width: 800,
4
    height: 400,
5
  })
6

7
  mainWin.loadFile('index.html')
8

9
  mainWin.webContents.on('dom-ready', () => {
10
    console.log('2--->dom-ready')
11
  })
12

13
  mainWin.webContents.on('did-finish-load', () => {
14
    console.log('3--->did-finish-load')
15
  })
16

17
  mainWin.on('closed', () => {
18
    console.log('8--->window-closed')
19
    mainWin = null
20
  })
21
}
22

23
app.on('ready', () => {
24
  console.log('1--->ready')
25
  createWindow()
26
})
27

28
app.on('window-all-closed', () => {
29
  console.log('4--->window-all-closed')
30
  app.quit()
31
})
32

33
app.on('before-quit', () => {
34
  console.log('5--->before-quit')
35
})
36

37
app.on('will-quit', () => {
38
  console.log('6--->will-quit')
39
})
40

41
app.on('quit', () => {
42
  console.log('7--->quit')
43
})

输出结果如下所示：

自定义菜单#

process.platform

自定义右键菜单#

Dialog 对话框#

showOpenDialogSync showOpenDialog

Native API#

为了使 Electron 的功能不仅仅限于对网页内容的封装，主进程也添加了自定义的 API 来与用户的作业系统进行交互。 Electron 有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。

主进程到渲染进程#

借助 webContents 的 send 方法来发送，只有单向通信

渲染进程到主进程#

两种模式：

1. send 单向模式，不需要返回值
2. invoke 双向模式，需要返回值，相当于一来一回，异步调用 实现在渲染进程中调用主进程的 API，渲染进程中使用 ipcRenderer.send 发送消息，在主进程中使用 ipcMain.on 监听渲染进程的事件用来接收消息，类似于发布订阅

渲染进程到渲染进程#

也就是来个 BrowserWindow 之间的通信，由于 ipc 通信的基础是 webContents，而两个 browserWindow 的 wenContents 是独立的，无法直接交换上下文，所以需要借助主进程的帮助。

1. 使用 ipcRenderer.sendTo

   该方法支持传入一个 webContentsId 作为发送目标，发送到特定的渲染上下文，通过它我们可以实现窗口对窗口的直接通信，但首先需要通过主进程来获取另一个窗口的 webContentsId。

   1
   // A窗口
   2
   const targetId = await ipcRenderer.invoke(“GetIWindowBId”) //主进程需要通过ipcMain监听该事件并返回窗口B的id
   3
   ipcRenderer.sendTo(targetId,"CrossWindow”,”窗口A发给窗口B”)
   4
   
   5
   // B窗口
   6
   ipcRenderer.on("CrossWindow",(event,...params)=>{
   7
     console.log("CrossWindow Request from ",event.senderId,...params) // B窗口可以把senderId记录下来，并通过它给A窗口发送消息
   8
     ipcRenderer.sendTo(event.senderId,"CrossWindow”,”窗口B发给窗口A”)
   9
   })

2. 使用 MessagePort

   MessagePort 并不是 Electron 提供的能力，而是基于 MDN 的 web 标准 API，这意味着它可以在渲染进程直接创建。同时 Electron 提供了 nodejs 侧的实现，所以它也能在主进程创建。

   1
   // 在渲染进程
   2
   const messageChannel = new MessageChannel()
   3
   console.log(messageChannel.port1)
   4
   console.log(messageChannel.port2)
   5
   
   6
   // 在主进程
   7
   import { MessageChannelMain } from 'electron'
   8
   const messageChannel = new MessageChannelMain()
   9
   console.log(messageChannel.port1)
   10
   console.log(messageChannel.port2)

选项#

1
module.exports = {
2
  packagerConfig: {
3
    /* ... */
4
  },
5
  rebuildConfig: {
6
    /* ... */
7
  },
8
  makers: [],
9
  publishers: [],
10
  plugins: [],
11
  hooks: {
12
    /* ... */
13
  },
14
  buildIdentifier: 'my-build',
15
}

以上所有配置属性都是可选的，下面单个介绍：

1
packagerConfig: {
2
  name: APP_NAME,
3
  icon: IS_TEST_PKG ? './icon/icon-test' : './icon/icon',
4
  asar: IS_NEED_SIGN && !IS_TEST_PKG,
5
  appBundleId: APP_BUNDLE_ID,
6
  appCopyright: `Copyright © 2023 ${packageJson.author}`,
7
  ignore: [/\.yarn/, /node_modules\/\.vite/, /node_modules\/\@ant-design/],
8
  ...
9
},

1
"build": {
2
  "appId": "xxx",
3
  "productName": "xxx",
4
  "nsis": {
5
    "oneClick": false,
6
    "allowElevation": true,
7
    "createDesktopShortcut": true,
8
    "createStartMenuShortcut": true,
9
    "allowToChangeInstallationDirectory": true,
10
    "perMachine": true,
11
    "deleteAppDataOnUninstall": true,
12
    "installerIcon": "icon/icon.ico",
13
    "installerHeaderIcon": "icon/icon.ico",
14
    "guid": "xx"
15
  },
16
  ...
17
}

1
makers: [
2
  {
3
    name: '@felixrieseberg/electron-forge-maker-nsis',
4
    platforms: undefined,
5
  },
6
  {
7
    name: '@electron-forge/maker-zip',
8
    platforms: ['darwin', 'win32'],
9
    config: {
10
      macUpdateManifestBaseUrl: AUTO_UPDATE_URL,
11
      macUpdateReleaseNotes: packageJson.versionNotes,
12
    },
13
  },
14
  {
15
    name: '@electron-forge/maker-dmg',
16
    platforms: ['darwin'],
17
    config: {
18
      icon: './icon/icon.icns',
19
      background: './icon/background.png',
20
      format: 'ULFO',
21
      contents: [
22
        { x: 192, y: 244, type: 'file', path: RELEASE_APP_DIR },
23
        { x: 448, y: 244, type: 'link', path: '/Applications' },
24
        { x: 192, y: 700, type: 'position', path: '.background' },
25
        { x: 292, y: 700, type: 'position', path: '.VolumeIcon.icns' },
26
        { x: 392, y: 700, type: 'position', path: '.DS_Store' },
27
        { x: 492, y: 700, type: 'position', path: '.Trashes' },
28
      ],
29
    },
30
  },
31
]

1
plugins: [
2
    {
3
      name: '@electron-forge/plugin-vite',
4
      config: {
5
        // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
6
        // If you are familiar with Vite configuration, it will look really familiar.
7
        build: [
8
          {
9
            // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
10
            entry: 'src/main/main.ts',
11
            config: 'vite.main.config.mjs'
12
          },
13
          {
14
            entry: 'src/main/preload.ts',
15
            config: 'vite.preload.config.mjs'
16
          },
17
          {
18
            entry: 'src/main/hybrid-manager/preload-hy.ts',
19
            config: 'vite.preload.config.mjs'
20
          }
21
        ],
22
        renderer: [
23
          {
24
            name: 'main_window',
25
            config: 'vite.renderer.config.mjs'
26
          }
27
        ]
28
      }
29
    }
30
  ],

1
"main": ".vite/build/main.js",

1
postPackage: async () => {
2
  const sourceDir =
3
    process.platform == 'darwin'
4
      ? path.resolve(__dirname, 'extraResources/Mac/')
5
      : path.resolve(__dirname, 'extraResources/Windows/')
6
  const destDir =
7
    process.platform == 'darwin' ? `${RELEASE_APP_DIR}/Contents/Resources/` : `${RELEASE_EXE_PATH}/resources/`
8
  try {
9
    await fs.ensureDir(destDir)
10
    await fs.copy(sourceDir, destDir, { recursive: true })
11
  } catch (error) {
12
    console.log(error)
13
    throw error
14
  }
15
},

1
preMake: async () => {
2
  if (process.platform == 'darwin') {
3
    if (!IS_TEST_PKG) await makeMacProfile()
4
    await signMac(RELEASE_APP_DIR, APP_NAME)
5
  } else {
6
    await signWin(RELEASE_EXE_DIR, APP_NAME)
7
  }
8
},

1
postMake: async () => {
2
  if (IS_TEST_PKG) return
3
  if (process.platform == 'darwin') {
4
    await notarizeMac(RELEASE_DMG_DIR)
5
    await releasesJson.postMake(
6
      path.join(__dirname, `./out/make/zip/darwin/${ARCH}/RELEASES.json`)
7
    )
8
  } else {
9
    await signWin(RELEASE_OUT_EXE_DIR, APP_NAME)
10
    await fixHash(RELEASE_OUT_EXE_DIR, RELEASE_OUT_YML_DIR)
11
    await releasesJson.postMake(
12
      path.join(__dirname, `./out/make/nsis/${ARCH}/RELEASES.json`)
13
    )
14
  }
15
}