在本章中，我们将介绍如何在Electron应用中与操作系统进行集成。这些操作包括剪贴板操作、通知系统、原生对话框等功能。
8.1 剪贴板操作
Electron 提供了 clipboard 模块，允许我们在应用中访问和操作剪贴板内容。以下是一些基本的剪贴板操作示例。
8.1.1 复制文本到剪贴板
我们可以使用 clipboard.writeText 方法将文本复制到剪贴板。
主进程代码：
const { app, BrowserWindow, ipcMain, clipboard } = require('electron');
const path = require('path');
let mainWindow;
const createMainWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
mainWindow.loadFile('index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
};
app.on('ready', createMainWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createMainWindow();
}
});
// 处理剪贴板复制请求
ipcMain.handle('copy-to-clipboard', (event, text) => {
clipboard.writeText(text);
return { success: true };
});
预加载脚本（preload.js）：
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
copyToClipboard: (text) => ipcRenderer.invoke('copy-to-clipboard', text)
});
渲染进程代码：
<!DOCTYPE html>
<html>
<head>
<title>Clipboard Example</title>
</head>
<body>
<h1>Clipboard Example</h1>
<input type="text" id="textInput" placeholder="Enter text to copy">
<button id="copyButton">Copy to Clipboard</button>
<script>
document.getElementById('copyButton').addEventListener('click', async () => {
const text = document.getElementById('textInput').value;
const result = await window.electronAPI.copyToClipboard(text);
if (result.success) {
alert('Text copied to clipboard!');
}
});
</script>
</body>
</html>
8.1.2 从剪贴板读取文本
我们可以使用 clipboard.readText 方法从剪贴板读取文本。
主进程代码：
ipcMain.handle('read-from-clipboard', () => {
const text = clipboard.readText();
return { success: true, text };
});
预加载脚本（preload.js）：
contextBridge.exposeInMainWorld('electronAPI', {
readFromClipboard: () => ipcRenderer.invoke('read-from-clipboard')
});
渲染进程代码：
<!DOCTYPE html>
<html>
<head>
<title>Clipboard Example</title>
</head>
<body>
<h1>Clipboard Example</h1>
<button id="pasteButton">Paste from Clipboard</button>
<p id="pastedText"></p>
<script>
document.getElementById('pasteButton').addEventListener('click', async () => {
const result = await window.electronAPI.readFromClipboard();
if (result.success) {
document.getElementById('pastedText').innerText = result.text;
}
});
</script>
</body>
</html>
8.2 通知系统
Electron 提供了 Notification 接口，允许我们在应用中发送系统通知。以下是一些基本的通知示例。
8.2.1 发送基本通知
我们可以使用 new Notification 方法来发送一个基本通知。
渲染进程代码：
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
</head>
<body>
<h1>Notification Example</h1>
<button id="notifyButton">Send Notification</button>
<script>
document.getElementById('notifyButton').addEventListener('click', () => {
new Notification('Hello', {
body: 'This is a notification from your Electron app.'
});
});
</script>
</body>
</html>
8.3 原生对话框
Electron 提供了 dialog 模块，可以方便地显示各种原生对话框，包括消息框、文件选择对话框等。
8.3.1 显示消息框
我们可以使用 dialog.showMessageBox 方法来显示一个消息框。
主进程代码：
ipcMain.handle('show-message-box', async () => {
const result = await dialog.showMessageBox({
type: 'info',
title: 'Message Box',
message: 'This is a message box',
buttons: ['OK']
});
return { success: true, response: result.response };
});
预加载脚本（preload.js）：
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
showMessageBox: () => ipcRenderer.invoke("show-message-box"),
});
渲染进程代码：
<!DOCTYPE html>
<html>
<head>
<title>Message Box Example</title>
</head>
<body>
<h1>Message Box Example</h1>
<button id="messageBoxButton">Show Message Box</button>
<script>
document.getElementById('messageBoxButton').addEventListener('click', async () => {
const result = await window.electronAPI.showMessageBox();
if (result.success) {
alert('Message box closed with response: ' + result.response);
}
});
</script>
</body>
</html>
通过这些示例，开发者可以在Electron应用中实现与操作系统的深度集成，从而提供更丰富的功能和更好的用户体验。
标签：剪贴板,const,剪贴,通知,Electron,clipboard,result,text,Example From： https://blog.csdn.net/imdeity/article/details/140007604