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>