前言

这段时间在整理今年的资料。这篇文章记录于2023年初，当时的情况是要将网页端的内容移动到服务端，最省事省力的方案自然是用Electron解决(至于臃肿的问题，那就交给消费者自己去烦恼吧😂)

以下部分仅作记录，今天暂且就水一篇

安装

修改.yarnrc

1
registry "https://registry.npmmirror.com"
2
ELECTRON_MIRROR "https://npmmirror.com/mirrors/electron/"
3
ELECTRON_BUILDER_BINARIES_MIRROR "https://npmmirror.com/mirrors/electron-builder-binaries/"

Vue启动

1
npm create electron-vite
2
or
3
git clone https://github.com/electron-vite/electron-vite-vue
4
然后yarn

Quick start

1
mkdir my-electron-app && cd my-electron-app
2
yarn init
3
yarn add --dev electron

解决CSP问题

1
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
2
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

预加载

你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。它们存在于完全不同的进程！

这是将 预加载 脚本连接到渲染器时派上用场的地方。预加载脚本在渲染器进程加载之前加载，并有权访问两个渲染器全局 (例如 window 和 document) 和 Node.js 环境。

创建一个名为 preload.js 的新脚本如下：

1
window.addEventListener('DOMContentLoaded', () => {
2
  const replaceText = (selector, text) => {
3
    const element = document.getElementById(selector)
4
    if (element) element.innerText = text
5
  }
6

7
  for (const dependency of ['chrome', 'node', 'electron']) {
8
    replaceText(`${dependency}-version`, process.versions[dependency])
9
  }
10
})

要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。

1
// 需在当前文件内开头引入 Node.js 的 'path' 模块
2
const path = require('path')
3

4
// modify your existing createWindow() function
5
const createWindow = () => {
6
  const win = new BrowserWindow({
7
    width: 800,
8
    height: 600,
9
    webPreferences: {
10
      preload: path.join(__dirname, 'preload.js')
11
    }
12
  })
13

14
  win.loadFile('index.html')
15
}
16
// ...

进程通信

https://www.electronjs.org/zh/docs/latest/tutorial/ipc

主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口

electron中的ipc通信（二）

大概是全网最详细的Electron ipc 讲解(一)——主进程与渲染进程的两情相悦

主进程与渲染进程通信

主进程

一个electron只能有一个主进程
主进程指的是，你在执行 electron . 命令后,对应的当前目录下面的package.json文件下面的main的指定文件将会被执行，这里指的是

渲染进程(Renderer Process)

由主进程调用GUI接口创建的页面，都有自己的进程，叫做渲染进程。主进程通过实例化BrowserWindow，每个BrowserWindow实例都会渲染一个web页面，相互独立，当一个BrowserWindow被销毁，相应的渲染进程也会被终止。
渲染进程被主进程管理，每个渲染进程相互独立，只管理他们自己的web页面

两者需要通信，就需要用ipc通信

Example

单向

主进程.ts(可以写NodeJS代码，访问本地存储)

1
ipcMain.on("async-message", (event, arg) => {
2
  //异步消息回复
3
  console.log(`async-message:我接收到了异步消息`, arg);
4
  event.reply("async-reply", "哥们我收到消息了-来自异步");
5
});
6

7
ipcMain.on("sync-message", (event, arg) => {
8
  //同步消息回复
9
  console.log(`async-message:我接收到了同步消息`, arg);
10
  event.returnValue = "哥们我收到消息了-来自同步";
11
});

渲染进程.ts

1
const { ipcRenderer } = require('electron');
2
ipcRenderer.on("async-reply", (event, arg) => {
3
  console.log("异步消息:", arg);
4
    data = JSON.parse(arg)
5
    console.log(data);
6
});
7

8
ipcRenderer.send("async-message", "发个异步消息");

ipcRenderer.send进行触发，ipcRenderer.on对返回进行相应

双向

ipcRenderer.invoke 与 ipcMain.handle 搭配使用

1
const { ipcRenderer } = require('electron');
2

3
async function invokeMessageToMain() {
4
  const replyMessage = await ipcRenderer.invoke('render-invoke-to-main', '我是渲染进程通过 invoke 发送的消息');
5
  console.log('replyMessage', replyMessage);
6
}

1
ipcMain.handle('render-invoke-to-main', async (event, message) => {
2
  console.log(`receive message from render: ${message}`)
3
  const result = await asyncWork();
4
  return result;
5
})
6

7
const asyncWork = async () => {
8
  return new Promise(resolve => {
9
    setTimeout(() => {
10
      resolve('延迟 2 秒获取到主进程的返回结果')
11
    }, 2000)
12
  })
13
}

功能

读取文件

使用icp

Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互

双向

1
ipcMain.handle('render-invoke-to-main', async (event, message) => {
2
  console.log(`receive message from render: ${message}`)
3
  const result = await asyncWork();
4
  return result;
5
})
6
async function asyncWork(){
7
  return new Promise(resolve => {
8
    let fs = require("fs");
9
    fs.readFile('E:\\code\\test_node\\a.json', function (err, data) {
10
      if (err) {
11
        console.log(err)
12
        resolve(err)
13
      }
14
      resolve(data.toString())
15
    });
16
  })
17
}

1
const replyMessage = await ipcRenderer.invoke('render-invoke-to-main', 'render invoke');
2
data = JSON.parse(replyMessage)

单向

1
ipcMain.on('asynchronous-message', function(event, arg) {
2
  let fs = require("fs");
3
  fs.readFile("E:\\code\\test_node\\a.json","utf8",(err,data)=>{
4
    if(err){
5
    event.sender.send('asynchronous-reply', "读取失败");
6
  }else{
7
    event.sender.send('asynchronous-reply', data);
8
  }
9
  })
10
});

1
const { ipcRenderer } = require('electron');
2
ipcRenderer.on("asynchronous-reply", function(event, arg) {
3
// 这里的arg是从主线程请求的数据
4
    console.log(arg)
5
    data = JSON.parse(arg)
6
    console.log(data);
7
});
8
ipcRenderer.send("asynchronous-message", "ping");

使用预加载

修改DOM树

1
window.addEventListener('DOMContentLoaded', () => {
2
    let readAndDisplay = () => {
3
      let fs = require("fs");
4
      fs.readFile("E:\\code\\test_node\\input.txt","utf8",(err, data) => {
5
        if (err) return console.error(err);
6
        console.log(data.toString());
7
      });
8
    }
9

10
    document.querySelector('#btn1').addEventListener("click", event => {
11
      readAndDisplay();
12
    })
13
  })

全屏

1
mainWindow = new BrowserWindow({
2
    //...
3
    fullscreenable:true,
4
    fullscreen: true,
5
    simpleFullscreen:true,
6
});

取消菜单栏

1
import { Menu } from 'electron'
2
Menu.setApplicationMenu(null) // null值取消顶部菜单栏

使用系统摄像头

未解决的issue

Electron加载HTTP页面打开本地摄像头

纯HTML5打开

Electron 从入门到实践07之实战相机应用(还是mediaDevices.getUserMedia，但是保存到了本地)

Esc退出全屏

https://www.electronjs.org/zh/docs/latest/api/global-shortcut

1
const { app, globalShortcut } = require('electron')

在CreateWindow()中添加相关

1
  globalShortcut.register('ESC', function () {
2
      win.close()
3
  })

流程模型

https://www.electronjs.org/zh/docs/latest/tutorial/process-model

Electron 应用程序的结构非常相似。作为应用开发者，你将控制两种类型的进程：主进程和渲染器进程。这类似于上文所述的 Chrome 的浏览器和渲染器进程。

窗口管理

主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。

BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。您可从主进程用 window 的 webContent 对象与网页内容进行交互。

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
console.log(contents)

预加载（Preload 脚本）

预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码。这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。

预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。

main.js

1
const { BrowserWindow } = require('electron')
2
//...
3
const win = new BrowserWindow({
4
  webPreferences: {
5
    preload: 'path/to/preload.js',
6
  },
7
})
8
//...