Electron学习笔记（六）

文章目录

- - 相关笔记
  - 笔记说明
- 七、系统
- - 5、托盘图标
  - - (1)、设置托盘图标
    - (2)、托盘图标闪烁
    - (3)、托盘图标菜单
  - 6、剪切板
  - - (1)、写入剪切板
    - (2)、读取剪切板
  - 7、系统通知
  - 8、其他
  - - (1)、使用系统默认应用打开文件
    - (2)、接收拖拽到窗口中的文件
    - (3)、使用系统字体

笔记说明

文本为学习《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>

效果展示：

效果展示