文章目录
- 相关笔记
- 笔记说明
- 七、系统
- 5、托盘图标
- (1)、设置托盘图标
- (2)、托盘图标闪烁
- (3)、托盘图标菜单
- 6、剪切板
- (1)、写入剪切板
- (2)、读取剪切板
- 7、系统通知
- 8、其他
- (1)、使用系统默认应用打开文件
- (2)、接收拖拽到窗口中的文件
- (3)、使用系统字体
相关笔记
- Electron学习笔记（一）
- Electron学习笔记（二）
- Electron学习笔记（三）
- Electron学习笔记（四）
- Electron学习笔记（五）
- Electron学习笔记（六）
- 使用 electron-vite-vue 构建 electron + vue3 项目并打包
笔记说明
文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍，针对原理部分并无相关记录。笔记记录于 2023年9月。
七、系统
5、托盘图标
(1)、设置托盘图标
更新 index.js 文件内容如下：
const {app,BrowserWindow,Tray} = require('electron');
let path = require('path');
let tray;
let win = null;
app.on('ready', function() {
win = new BrowserWindow({
// ...
});
// 获取 图标路径
let iconPath = path.join(__dirname, 'icon.ico');
tray = new Tray(iconPath);
// ...
});
(2)、托盘图标闪烁
更新 index.js 文件内容如下：
const {app,BrowserWindow,Tray} = require('electron');
let path = require('path');
let tray;
let win = null;
let iconPath = path.join(__dirname, 'icon.ico');
let iconPath2 = path.join(__dirname, 'icon2.ico');
let flag = true;
app.on('ready', function() {
win = new BrowserWindow({
// ...
});
tray = new Tray(iconPath);
// ...
});
setInterval(() => {
if (flag) {
tray.setImage(iconPath2);
flag = false;
} else {
tray.setImage(iconPath);
flag = true;
}
}, 600)
效果展示：
(3)、托盘图标菜单
更新 index.js 文件内容如下：
const { app, BrowserWindow, Tray, Menu } = require('electron');
let path = require('path');
let tray;
let win = null;
app.on('ready', function () {
win = new BrowserWindow({
// ...
});
let iconPath = path.join(__dirname, 'icon.ico');
tray = new Tray(iconPath);
// 响应鼠标点击事件
tray.on('click', function () {
win.show();
});
// 鼠标右键菜单
let menu = Menu.buildFromTemplate([{
click() { win.show(); },
label: '显示窗口',
type: 'normal'
}, {
click() { app.quit(); },
label: '退出应用',
type: 'normal'
}]);
tray.setContextMenu(menu);
// ...
});
效果展示：
6、剪切板
(1)、写入剪切板
clipboard：该模块渲染进程和主进程都可以直接使用。
文本内容写入：更新 index.html 文件内容如下：
<input type="text" name="" id="">
<script>
let { clipboard } = require("electron");
// 向剪切板写入文本
clipboard.writeText("你好Text");
// 向剪切板写入HTML
// clipboard.writeHTML("<h1>你好HTML</h1>");
</script>
图片内容写入：程序运行后可在word文档或聊天框中粘贴
<body>
<script>
let path = require("path");
let { clipboard, nativeImage } = require("electron");
let imgPath = path.join(__dirname, "1.jpg");
let img = nativeImage.createFromPath(imgPath);
clipboard.writeImage(img);
</script>
</body>
清空剪切板：
clipboard.clear();
(2)、读取剪切板
读取剪切板内的文本内容：更新 index.html 文件内容如下：
<body>
<input type="text" name="" id="">
<script>
let { clipboard } = require("electron");
console.log(clipboard.readText()); // 读取剪切板的文本
// clipboard.readHTML(); // 读取剪切板的HTML
</script>
</body>
读取剪切板内的图片内容：
<body>
<script>
let { clipboard } = require("electron");
// 获取在系统文件夹里复制的图片文件路径
let filePath = clipboard.readBuffer('FileNameW').toString('ucs2')
filePath = filePath.replace(RegExp(String.fromCharCode(0), 'g'), '');
// 创建一个 img 元素写入页面
let imgDom = document.createElement('img')
imgDom.src = filePath;
document.body.appendChild(imgDom);
</script>
</body>
7、系统通知
更新 index.html 文件内容如下：
<body>
<script>
Notification.requestPermission(function (status) {
if (status === "granted") {
let notification = new Notification('来自Electron程序的消息', {
body: '测试系统消息发送'
});
notification.onclick = function () {
alert('用户点击了系统消息');
}
} else {
// 用户拒绝授权
}
});
</script>
</body>
效果展示：
8、其他
(1)、使用系统默认应用打开文件
shell：该模块可以被 Electron 中主进程和渲染进程直接使用。
使用 shell 模块打开默认浏览器：
<body>
<script>
const { shell } = require("electron");
shell.openExternal('https://www.baidu.com');
</script>
</body>
使用 shell 模块打开 word 文档：
<body>
<script>
const { shell } = require("electron");
let openFlag = shell.openPath("D:\\桌面\\test.docx");
console.log(openFlag);
</script>
</body>
使用 shell 模块将文件移入垃圾箱：（说明：经测试，该代码在主进程中有效，但在渲染进程中会报错）
在 index.js 文件中添加以下内容：
const { shell } = require("electron");
let delFlag = shell.trashItem("D:\\桌面\\test.docx");
console.log(delFlag);
关于 shell 模块更多详情参见：https://www.electronjs.org/zh/docs/latest/api/shell
(2)、接收拖拽到窗口中的文件
修改 index.html 文件内容如下：
<body>
<script>
document.addEventListener('dragover', ev => {
ev.preventDefault();
console.log('请在此处放置文件');
});
document.addEventListener('drop', ev => {
console.log(ev.dataTransfer.files);
ev.preventDefault();
});
</script>
</body>
效果展示：
(3)、使用系统字体
<div style="font:caption">这是我的标题</div>
<div style="font:menu">菜单中的字体</div>
<div style="font:message-box">对话框中的字体</div>
<div style="font:status-bar">状态栏中的字体</div>
效果展示：
