Electron使用教程

electron官网

安装

  • 新建项目目录
  • yarn add electron
  • yarn add @electron-forge/cli electron-rebuild -D

使用

目录结构
  • main.js 应用入口文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    function createWindow() {
        // 加载UI代码
        const mainWindow = new BrowserWindow({
            fullscreen: true,  // 全屏窗口
            // kiosk: true,  // 服务亭模式
            // frame: false,  // 是否显示窗口边缘框架
            // resizable: false,  // 不可更改窗口尺寸
            // maximizable: true, // 支持最大化
            // show: false,  // 为了让初始化窗口显示无闪烁，先关闭显示，等待加载完成后再显示。
            // width: 800,
            // height: 600,
            // ...windowOpenConfig,
            webPreferences: {
                // 用于读取本地语音文件
                webSecurity: false,
                // 是否能能在渲染页面中使用node模块
                nodeIntegration: true,
                nodeIntegrationInWorker: true,
                // contextBridge usage 开启后打开沙盒模式 无法直接通过preload挂在在global上
                // contextIsolation: true,
                preload: path.join(__dirname, 'preload.js'),
            }
        })
        // 加载html代码 也可以是http链接 可以是个单页应用服务入口url
        mainWindow.loadFile('./demo.html')
        // mainWindow.loadURL('http://localhost:3000/demo.html')
    }
    // 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.
    app.whenReady().then(() => {
      createWindow()
      // 隐藏系统菜单
      Menu.setApplicationMenu(null)

      app.on('activate', function () {
        // On macOS 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
      })
    })

    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', function () {
      systemLogger.info('主程序关闭')
      // 手动销毁子进程 经测试子进程内的socket会自动随子进程一起销毁
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
  • preload.js 负责与渲染进程进行通信
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /**
     * The preload script runs before. It has access to web APIs
     * as well as Electron's renderer process modules and some
     * polyfilled Node.js functions.
     *
     * https://www.electronjs.org/docs/latest/tutorial/sandbox
     */
    const { contextBridge, ipcRenderer } = require('electron')

    contextBridge.exposeInMainWorld('electronAPI', {
      
    })

通信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1. 主进程主动推送
```js
// 在main.js中主动发送
mainWindow.webContents.send('ui-receive-message', {
    msg: 'hello',
})
// preload.js中
contextBridge.exposeInMainWorld('electronAPI', {
    receive: (cb) => ipcRenderer.on('ui-receive-message', cb),
})
// UI层
window.electronAPI.receive((sender, data) => {
    console.log(data.msg) // hello
})
  1. 渲染进程主动通信
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // preload.js
    contextBridge.exposeInMainWorld('electronAPI', {
        logToFile: (payload) => ipcRenderer.invoke('log-to-file', payload),
    })
    // main.js 订阅消息
    ipcMain.handle('log-to-file', (event, data) => {
        // 打印日志到本地
        logger.info(data.msg);
        return void 0
    })
    // UI层
    window.electronAPI.logToFile({ msg: '操作失败' })

自启动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const AutoLaunch = require('auto-launch')
const AppAutoLaunch = new AutoLaunch({
    name: app.getName(),
    // path: '',
})
AppAutoLaunch.enable()
AppAutoLaunch.isEnabled()
    .then((isEnabled) => {
        if(isEnabled){
            return
        }
        AppAutoLaunch.enable()
    })
    .catch((err) => {
        systemLogger.error(`自启动设置失败：${parseError(err)}`)
    })

打包

electron应用打包需要依赖 @electron-forge/cli
可在forge.config.js文件中进行配置不同平台的打包设置
通过electron-forge package命令进行对应平台的打包操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const { name } = require('./package.json')

module.exports = {
  rebuildConfig: {},
  makers: [
    // {
    //   name: '@electron-forge/maker-squirrel',
    //   config: {},
    // },
    // {
    //   name: '@electron-forge/maker-zip',
    //   platforms: ['darwin'],
    // },
    {
      name: '@electron-forge/maker-deb',
      config: {
        options: {
          productName: name,
          name,
          icon: 'image/logo.png'
        },
      },
    },
    // {
    //   name: '@electron-forge/maker-rpm',
    //   config: {},
    // },
  ],
}

CI/CD基础镜像搭建 (以linux平台为例)

1
2
3
4
5
6
7
FROM node:14.20.0-alpine

RUN apk update
RUN apk add dpkg
RUN apk add fakeroot
RUN apk add rpm
RUN apk add git