汉阳做网站多少钱,注册公司名称查询网站,什么是企业形象设计,天津网站建设首选 津坤科技文章目录 相关笔记笔记说明 七、系统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 typetext name idscriptlet { clipboard } require(electron);// 向剪切板写入文本clipboard.writeText(你好Text); // 向剪切板写入HTML // clipboard.writeHTML(h1你好HTML/h1);
/script图片内容写入程序运行后可在word文档或聊天框中粘贴
bodyscriptlet 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 文件内容如下
bodyinput typetext name idscriptlet { clipboard } require(electron);console.log(clipboard.readText()); // 读取剪切板的文本// clipboard.readHTML(); // 读取剪切板的HTML/script
/body读取剪切板内的图片内容
bodyscriptlet { 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
/body7、系统通知
更新 index.html 文件内容如下
bodyscriptNotification.requestPermission(function (status) {if (status granted) {let notification new Notification(来自Electron程序的消息, {body: 测试系统消息发送});notification.onclick function () {alert(用户点击了系统消息);}} else {// 用户拒绝授权}});/script
/body效果展示 8、其他
(1)、使用系统默认应用打开文件
shell该模块可以被 Electron 中主进程和渲染进程直接使用。
使用 shell 模块打开默认浏览器
bodyscriptconst { shell } require(electron);shell.openExternal(https://www.baidu.com);/script
/body使用 shell 模块打开 word 文档
bodyscriptconst { 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 文件内容如下
bodyscriptdocument.addEventListener(dragover, ev {ev.preventDefault();console.log(请在此处放置文件);});document.addEventListener(drop, ev {console.log(ev.dataTransfer.files);ev.preventDefault();});/script
/body效果展示 (3)、使用系统字体
div stylefont:caption这是我的标题/div
div stylefont:menu菜单中的字体/div
div stylefont:message-box对话框中的字体/div
div stylefont:status-bar状态栏中的字体/div效果展示
