vue3+electron的使用心得

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第四天，点击查看活动详情

开头

月初的时候第一次了解electron这个桌面开发技术平台，也通过小册了解到vue3+ts+electron的配合开发，于是基于自己的思路就尝试开发自己的摸鱼APP，但在一开始接触的时候会遇到很多问题，所以就写下了这篇文章，当然会不定时更新。

1、如何让主线程和渲染线程通信

让vue和electron互相通信，因为他们是不同的线程。

事件机制：无论是BrowerWindow.webContents.send()，还是ipc，其实都是node的事件机制，都是EventEmitter的实例。

1.主线程：借用mainWindow.webContents.send("eventName",[...params])来发送

import { app, BrowserWindow } from "electron";
​
let mainWindow:BrowserWindow;
app.whenReady().then(()=>{
    mainWindow = new BrowserWindow(config);
    mainWindow.webContents.on('did-finish-load',()=>{
        mainWindow.webContents.send('ping','8888')
    })
})

2.渲染线程：引用electron里的ipcRenderer来接受参数，用ipcRenderer的send/sendSync方法来传值

import { icpRenderer } from 'electron';
icpRenderer.on('ping',(event,message)=>{
    console.log(message)
})
ipcRenderer.send('pingping','6666')

3.主线程：使用electron里的ipcMain来接受渲染线程的参数

import { app, BrowserWindow ,ipcMain } from "electron";
​
let mainWindow:BrowserWindow;
app.whenReady().then(()=>{
    mainWindow = new BrowserWindow(config);
    mainWindow.webContents.on('did-finish-load',()=>{
        mainWindow.webContents.send('ping','8888')
    })
    ipcMain.on('pingping',(event,message)=>{
        console.log(message)
    })
})

2、自定义全局快捷键

像我的摸鱼软件，肯定的设置快捷键方便自己摸鱼。

我们可以借用electron里的globalShortcut来注册，这个方法很简单：只需要通过两个方法

0. register('xxx',handle)
1. unregister('xxx')

//随便定义一个快捷键
import { app,globalShortcut } from "electron";
app.whenReady().then(()=>{
    globalShortcut.register('Alt + F4',()=>{
        console.log('Alt + F4 触发')
    })
    // 判断是否注册成功
    console.log(globalShortcut.isRegistered('Alt + F4'))
})
// 清除自定义快捷键
app.on('window-all-closed',()=>{
    globalShortcut.unregisterAll();
})

3、覆盖已存在的快捷键

通过Alt + F4的例子来讲解，这是默认的关闭事件，但我们可以进覆盖，让别人用不了关不了^_^

electron的globalShortcut，是没法对已有的快捷键进行覆盖的，而是不生效，因此我们需要借用BrowserWindow().webContents的一个事件before-input-event 在页面中调度 keydown 和 keyup 之前触发。仅阻止菜单快捷键, 使用 setIgnoreMenuShortcuts:

const mainWindow = new BrowserWindow();
mainWindow.webContents.on("before-input-event",(event,input)=>{
    if (input.key == 'F4' && input.alt) {
        event.preventDefault();
        mainWindow.webContents.setIgnoreMenuShortcuts(input.key === "F4" && input.alt);
    }
})

4、监听窗体的隐藏和聚焦

这个很重要好吧，老板一来就隐藏，老板一走就激活，这不是必备么(#^.^#)。

这个需要借用自定义快捷键和BrowserWindow().webContents下的方法来结合使用

import { globalShortcut,BrowserWindow } from "electron";
​
export function myRegister(mainWindow:BrowserWindow) {
    // 唤醒事件
    globalShortcut.register("Alt + 1", () => {
        mainWindow.show();
    })
    // 隐藏事件
    globalShortcut.register("Alt + 2", () => {
        mainWindow.hide();
    })
}

结尾：

希望我的文章能帮到大家，多多点赞。