探索 Electron：快捷键与剪切板操作

news2024/9/24 0:05:25

Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。

快捷键

剪切板

快捷键

在应用程序没有键盘焦点时，我们可以通过监听键盘事件globalShortcut模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。

注意：因为快捷方式是全局的，即使应用程序没有键盘焦点，它也仍然在持续监听键盘事件，在应用程序模块发出ready事件之前，不应该使用此模块，这里我们通过一段代码对快捷键的注册和销毁做一下演示：

// app应用；BrowserWindow 窗口
const { app, BrowserWindow, globalShortcut } = require('electron')
const path = require('path')

const createWindow = () => {
    const win = new BrowserWindow({ // 窗口的配置
        width: 800, 
        height: 600, 
        icon: 'logo.png', 
        title: "亦世凡华、",
        webPreferences: {
            preload: path.resolve(__dirname, './preload.js') // 预加载脚本
        }        
    })
    win.loadFile('./src/index.html') // 加载页面
    globalShortcut.register('g', () => {
        console.log("快捷键 g 注册成功")
    })
    globalShortcut.register('h', () => {
        console.log("将快捷键 g 注销掉")
        globalShortcut.unregister('g')
    })
}

这里我们通过桌面端界面的演示，可以看到我们的快捷键被注册和销毁成功了：

如果想在桌面端退出的时候取消某个或者全部的快捷键，可以在生命周期will-quit进行，如下：

// 桌面端快要退出的时候，注销快捷键
app.on('will-quit', () => {
    globalShortcut.unregister('ctrl + q') // 注销单个快捷键
    globalShortcut.unregisterAll() // 注销所有快捷键
})

剪切板

剪切在桌面端是常见的功能，顾名思义就是在系统剪贴板上执行复制和粘贴操作，然后最新版本的electron中给其加了一个限制就是只能在非沙盒下使用，如下：

什么是沙盒：是一种安全机制，用于增强应用程序的安全性和稳定性，它主要通过限制渲染进程(web 页面)的权限来实现，例如只允许访问特定目录或文件。这可以防止恶意代码修改或删除用户的文件。

在最新版本的 Electron 中，沙盒机制是可选的，并且需要在应用程序的启动配置中明确启用。它不仅限制了渲染进程的权限，还提供了一些额外的安全性措施，如堆栈限制和沙盒内的特权分离。这些措施有助于最大程度地隔离和保护渲染进程，确保即使出现漏洞，也不会波及到整个应用程序或用户系统。所以如果我们想开启剪切操作，则需要关闭沙盒，如下：

接下来我们就需要在预加载脚本中编写相应的剪切clipboard函数的操作，然后在渲染进行中进行调用了，代码过程如下所示：

最终呈现的效果如下所示：

当然这里我们也可以对图片进行一个剪切粘贴的操作，这里我们在预加载脚本文件中进行如下操作，这里我们借助 Electron 框架中的一个模块，用于创建原生的图像对象，可以通过 NativeImage 创建和操作系统级别相关的图像对象，例如窗口图标、菜单图标、应用程序图标等。它提供了一种跨平台的方式来处理和操作图像，使开发者能够在 Electron 应用中使用原生的图像功能：

const { contextBridge, clipboard, nativeImage } = require("electron")

// 复制文本
const copy = (data) => {
    clipboard.writeText(data)
}
// 读取文本
const read = (data) => {
    return clipboard.readText(data)
}
// 复制图片
const addImage = (data) => {
    // 将图片放置于剪切板当中的时候要求图片类型属于 nativeImage 实例
    let oImagg = nativeImage.createFromPath(data)
    clipboard.writeImage(oImagg)
    // 将剪切板中的图片作为dom元素显示在界面上
    let oImg = clipboard.readImage()
    let oImgDom = new Image()
    oImgDom.src = oImg.toDataURL()
    document.body.appendChild(oImgDom)
}

contextBridge.exposeInMainWorld('myAPI', {
    copy,
    read,
    addImage
})

然后我们在渲染进行进行调用函数然后传递对应的图片路径即可，如果控制台报出图片资源相关的错误问题，可以在index.html文件中替换一下下面的文件即可：

<meta http-equiv="Content-Security-Policy" content="connect-src *; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

最终呈现的效果如下所示：

当然还有一些其他的功能如下，其他功能就不再详细赘述了，后面做项目用到的时候再进行阐述吧

shell模块：提供与桌面集成相关的功能，在用户的默认浏览器中打开url：

const { shell } = require('electron')
shell.openExternal('https://www.baidu.com') // 打开外部链接
shell.showItemInFolder(path.resolve(__dirname)) // 打开文件管理器

消息通知：通过Notification我们可以在桌面端中向电脑发送消息：

window.onload = function() {
    let btn = document.getElementsByClassName("btn")[0];

    btn.addEventListener('click', ()=> {
        let option = {
            title: '亦世凡华、',
            body: '一键三联，求关注',
            icon: './logo.png'
        }
        new Notification(option.title, option);
    })
}

最终呈现的效果如下所示：