创建一个Electron Demo

使用electron-vite构建

npm create @quick-start/electron
或
yarn create @quick-start/electron

创建完成后的目录结构

├── build
│   ├── entitlements.mac.plist
│   ├── icon.icns
│   ├── icon.ico
│   └── icon.png
├── resources
│   └── icon.png
├── src
│   ├── main  
│   │   └── index.js //主进程文件
│   ├── preload
│   │   └── index.js //预加载文件
│   └── renderer  //渲染进程文件
│       ├── index.html
│       └── src
├── README.md
├── electron-builder.yml
├── electron.vite.config.js
├── package.json
└── yarn.lock

主进程文件示例

import { app, shell, BrowserWindow, ipcMain } from 'electron'
import { is } from '@electron-toolkit/utils'

function createWindow() {
  const mainWindow = new BrowserWindow({  //创建一个窗口
    width: 900,
    height: 670,
    show: false,  //默认隐藏，防止没有加载内容出现白屏
    autoHideMenuBar: true,  //关闭顶部默认菜单栏
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),  //这个脚本将在网页加载之前运行
    }
  })

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()  //当窗口准备好显示时，显示出窗口
  })
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {  
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) //开发情况下加载本地开发服务器的URL
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html')) //生产环境加载本地目录中的HTML文件
  }
  
  mainWindow.on('closed', () => { });  //监听窗口的关闭
}

app.whenReady().then(() => { //主进程完成初始化
  createWindow()  //创建窗口
})

app的一些常用生命周期钩子

• will-finish-launching 在应用完成基本启动进程之后触发。
• ready 当 electron 完成初始化后触发。
• window-all-closed 所有窗口都关闭的时候触发
• before-quit 退出应用之前的时候触发。
• will-quit 即将退出应用的时候触发。
• quit 应用退出的时候触发。

BrowserWindow的一些常用生命周期钩子

• closed 当窗口被关闭的时候。
• focus 当窗口被激活的时候。
• show 当窗口展示的时候。
• hide 当窗口被隐藏的时候。
• maxmize 当窗口最大化时。
• minimize 当窗口最小化时。

preload/index文件示例

这个文件在窗口创建时预加载到窗口了

import { contextBridge } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'  

//contextBridge：安全的方式来暴露 Electron 的内置模块和自定义的 JavaScript API 给渲染进程使用，
//electronAPI封装的渲染进程通信工具

const api = {}  //自定义一些通信方法

if (process.contextIsolated) { 
    //contextIsolated上下文隔离，默认为true
  try {
    contextBridge.exposeInMainWorld('electron', electronAPI)  
    contextBridge.exposeInMainWorld('api', api)
  } catch (error) {
    console.error(error)
  }
} else { 
  window.electron = electronAPI  
  window.api = api
}