electron 入门

原创已于 2024-02-15 13:04:57 修改 · 459 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#electron #前端

于 2024-02-15 12:06:41 首次发布

electron 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Electron中安装、配置和使用main.js作为入口文件，涉及进程划分（主进程和渲染进程）、主进程的生命周期管理、nodeIntegration设置以及进程间通信（IPC）。还演示了如何通过contextBridge实现主进程与渲染进程之间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装electron

npm i electron

二、electron 基础知识

1.electron入口文件main.js

whenReady 当electron 初始化完成时创建窗口
app.whenReady().then()
BrowserWindow创建一个浏览器窗口
win.loadFile() 加载本地文件
win.loadUrl() 嵌入网页面内容
热更新插件
nodemon
electron-reload

//main.js
const path = require('path')
const { app, BrowserWindow, ipcMain } = require('electron')

// BrowserWindow,创建一个浏览器窗口
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      show: false,
      webPreferences:{
        // nodeIntegration: true,
        // contextIsolation: false,
        sandbox: false,
        preload: path.resolve(__dirname, './preload.js')
      }
    })
  
    win.loadFile('index.html')
    win.webContents.openDevTools()
    win.on('ready-to-show',()=>{
      win.show()
    })

    const win2 = new BrowserWindow({
      width: 300,
      height: 400,
      parent: win,
      // modal: true
    })
    win2.loadURL('http://baidu.com')
  }

  app.on('window-all-closed',() => {
    console.log(100)
    if(process.platform==='darwin') {
      // 如果是mac系统下,彻底关闭浏览器窗口
      app.quit()
    }

  })

  ipcMain.handle('send-event', (event,msg)=> {
    console.log(msg)
    return msg
    })

  app.whenReady().then(() => {
    createWindow()
    app.on('activate',()=>{
      if(BrowserWindow.getAllWindows().length === 0){
        createWindow()
      }
    })
  })

2.进程

mainProcess 主进程 (唯一) RenderProcess 渲染进程(多个)

3.主进程的生命周期

关闭（mac中关闭窗口不会彻底关闭应用）

app.on('window-all-closed',() => {
    console.log(100)
    if(process.platform==='darwin') {
      // 如果是mac系统下,彻底关闭浏览器窗口
      app.quit()
    }

  })

激活

app.on('activate',()=>{
      if(BrowserWindow.getAllWindows().length === 0){
        createWindow()
      }
    })

4.配置node

webPreferences:{
         nodeIntegration: true,
        contextIsolation: false,
      }

5.进程通信ipc

通过contextBridge暴露给渲染进程

主进程中定义通信方法

  ipcMain.handle('send-event', (event,msg)=> {
    console.log(msg)
    return msg
    })

预加载中定义通信方法

const { contextBridge, ipcRenderer }  = require('electron') 

const handleSend =  async() => {
   let fallback = await ipcRenderer.invoke('send-event', '渲染进程触发发送给主进程')
    console.log(fallback)
}
contextBridge.exposeInMainWorld('myApi',{
    platform: process.platform,
    handleSend
})

页面中使用

document.querySelector('#btn').addEventListener('click',() => {
    myApi.handleSend()
})