electron常用方法

---

一、主进程与渲染进程间的通信

使用IPC通信
主进程 ipcMain 使用 ipcMain.on (同步) 或者ipcMain.handle
渲染进程 ipcRenderer
通过contextBridge暴露定义好的ipcRenderer.invoke方法给渲染进程页面使用
主进程通过ipcMain.handle(‘name’,()=>{}) 捕获到渲染进程ipcRenderer.invoke提交的数据。

ipcMain.handle('on-open-event', (e, url) => {
  const winState = new WinState({
    defaultHeight: 800,
    defaultWidth: 1200,
    electronStoreOptions: {
      name: 'window-state-open'
    }
  })

  win = new BrowserWindow({
    ...winState.winOptions,
    show: false,
    webPreferences: {
      preload: path.resolve(__dirname, '../preload/open.js')
    }
  })

  win.on('ready-to-show', () => {
    win.show()
  })

  win.loadURL(url)

  win.webContents.openDevTools()

  winState.manage(win)

  win.webContents.executeJavaScript(js).catch(() => {})

  win.webContents.on('context-menu', (e, args) => {
    saveas(args.srcURL)
  })
})

 const open = (url) => {
    ipcRenderer.invoke('on-open-event', url)
  }

二、常见方法属性

before-quit 窗口关闭前
browser-window-blur 窗口失去焦点
app.quit 关闭窗口
app.getPath 获取系统目录路径
BrowserWindow 新建窗口
ready-to-show 优雅加载
background 背景颜色
frame: false 无边框

三、electron-win-state

窗口宽度/高度/位置缓存 插件
1.引入依赖

npm i electron-win-state -S //本地使用

2.窗口使用WinState

//获取WinState对象
const WinState = require('electron-win-state').default
const createWindow = () =>{
//实例化WinState对象
    const winState = new WinState({
        dafaultWidth: 1000,
        defaultHeight: 800,
        electronStoreOptions: {
        name: 'window-state-main'
        }
    })
    const win = new BrowserWindow({
    // 使用winState 对象
       ...winState.winOptions,
       
       webPreferences:{
        // 定义预加载js
        preload: path.resolve(__dirname, './preload/index.js')
       },
       show:false
    })
    win.loadURL('http://localhost:5173')
    win.webContents.openDevTools()
    //监听窗口
    winState.manage(win)
    win.on('ready-to-show',()=>{
        win.show()
    })
}

四、webContent

控制浏览器的方法在这个函数中

webContent.on('did-finish-load',()=>{})//加载完毕
webContent.on('dom-ready',()=>{})//元素dom加载完毕
webContent.on('new-window',()=>{})//是否打开新窗口
webContent.on('content-menu',(e, params)=>{})//右键上下文信息
webContent.executeJavaScript()//注入一点javaScript

五、dialog

对话框（操作系统级对话框）

dialog.showMessageBox({
    message: msg,
    type: 'error'
  })

六、global.shortcut

快捷键、系统快捷键

//main.js
var electron = require('electron');
var globalShortcut = electron.globalShortcut;

app.on('ready',function(){
//添加快捷键
    globalShortcut.register('ctrl+shift+1',function(){
        mainWindow.webContents.send('global-shortcut',0);
   });
   //移除快捷键
   globalShortcut.unregister('ctrl+shift+1',function(){
        mainWindow.webContents.send('global-shortcut',0);
   });
})

七、Menu

系统菜单

const { app, Menu, ipcMain } = require('electron')
const template = [
  {
    label: 'actions',
    submenu: [
      {
        label: '添加',
        click: () => {
          event.sender.send('on-renderer-event', 'add')
        },
        accelerator: 'CommandOrControl+Alt+O'
      }
    ],
  }
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

八、contextMenu.popup

注册到右键菜单

const contextMenu = Menu.buildFromTemplate([
      {
        label: '菜单名',
        click: () => {},
        accelerator: 'CommandOrControl+S'
      }
    ])
    contextMenu.popup()

九、Tray

托盘

const { Tray } = require('electron')

function createTray(app, win) {
  const tray = new Tray('icon.png')
  tray.setToolTip('readit')
  tray.on('click', (e) => {
    if (e.shiftKey) {
      app.quit()
    }
  })
}

module.exports = createTray

十、Clipboard

//渲染进程中使用
var { clipboard,nativeImage}=require("electron");
var getBtn = document.querySelector("#getBtn");
var setBtn= document.querySelector("#setBtn");

// 点击复制
getBtn.onclick=function(){
    clipboard.writeText(code.innerHTML);
    alert("复制成功!");
};
setBtn.onclick = function(){ 
    // 获取复制的内容
    input.value = clipboard.readText();
};
var copyImage = document.querySelector("#imageBtn");
// 点击复制图片
copyImage.onclick = function(){
    var image = nativeImage.createFromPath("图片地址");
    clipboard.writeImage(image);
    // base64图片编码
    var imageSrc = clipboard.readImage().toDataURL();
    // 插入复制的图片
    var copyImage = new Image();
    copyImage.src = imageSrc;
    copyImage.style.width = "";
    copyImage.style.height = "";
    document.body.appendChild(newImage);
 
}