Electron入门

Electron介绍

  • 一款应用广泛的跨平台的桌面应用开发框架
  • Electron的本质是结合了Chromium与Node.js
  • 使用HTML,CSS,JS等Web技术构建桌面应用程序
    20240625111122

Electron流程模型
20240625112028

创建Electron项目

直接npm i electron -D先安装

主进程->预加载脚本->渲染进程
而预加载脚本是运行在渲染进程上的

进程通信

渲染进程->主进程(单向)

一个简单的需求,在窗口内输入一个字符串,然后将字符串写入到磁盘中

也就是渲染进程传递到主进程,要借助预加载脚本

首先在预加载脚本中写上传递参数的方法

1
2
3
4
5
6
7
contextBridge.exposeInMainWorld('myAPI', {
    version: process.versions.electron,
    // 这个就相当于传递数据的桥梁,供渲染进程使用
    saveFile: (data) => {
        ipcRenderer.send('file-save', data)
    }
})

然后在渲染进程中调用

1
2
3
btn2.onclick = () => {
    myAPI.saveFile(input.value)
}

最后在主进程中接收

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
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const fs = require('fs')

function writeFile(_, data) {
    // 写文件
    fs.writeFileSync('D:/hello.txt', data)
}

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        // autoHideMenuBar: true
        x: 0,
        y: 0,
        // 置顶(显示在最上层)
        // alwaysOnTop:true
        webPreferences: {
            preload: path.resolve(__dirname, './preload.js')
        }
    })
    // 注意要在loadFile之前绑定上预加载脚本中的内容
    ipcMain.on('file-save', writeFile)
    // win.loadURL('https://blog.zzmr.buzz')
    win.loadFile('./src/index.html')
}

app.on('ready', () => {
    console.log('be ready')
    createWindow()
    app.on('activate', () => {
        // 当应用被激活时,判断有没有窗口,没有窗口就创建
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

双向通信

读取D盘中刚写入的文件,为什么说是双向呢?
因为这个流程是

  1. 渲染进程通知主进程要读取哪个文件
  2. 主进程将读取出的文件内容传递给渲染进程

预加载脚本

1
2
3
readFile() {
    return ipcRenderer.invoke('file-read')
}

渲染进程

1
2
3
4
btn3.onclick = async () => {
    let data = await myAPI.readFile()
    alert(data)
}

主进程

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
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const fs = require('fs')

function writeFile(_, data) {
    // 写文件
    fs.writeFileSync('D:/hello.txt', data)
}

function readFile() {
    const res = fs.readFileSync('D:/hello.txt').toString()
    return res
}

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        // autoHideMenuBar: true
        x: 0,
        y: 0,
        // 置顶(显示在最上层)
        // alwaysOnTop:true
        webPreferences: {
            preload: path.resolve(__dirname, './preload.js')
        }
    })
    ipcMain.on('file-save', writeFile)
    ipcMain.handle('file-read', readFile)
    // win.loadURL('https://blog.zzmr.buzz')
    win.loadFile('./src/index.html')
}


app.on('ready', () => {
    console.log('be ready')
    createWindow()
    app.on('activate', () => {
        // 当应用被激活时,判断有没有窗口,没有窗口就创建
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

就实现了双向通信

另外一种由主进程传递给渲染进程的单向通信就不看了

打包

使用electron-builder打包应用
首先安装electron-builder