基本概念

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron . --enable-logging"
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

// main.js
const { app, BrowserWindow } = require("electron")

let mainWindow

// 当 Electron 完成初始化并准备创建浏览器窗口时调用
app.on("ready", () => {
  console.log("应用已就绪")
  createWindow()
})

// 当所有窗口都关闭时触发
app.on("window-all-closed", () => {
  console.log("所有窗口已关闭")
  // 在 macOS 上，除非用户明确退出（Cmd + Q），否则应用及其菜单栏会保持活动状态
  if (process.platform !== "darwin") {
    app.quit()
  }
})

// 在 macOS 上，当单击 dock 图标并且没有其他窗口打开时，
// 通常会重新创建一个窗口
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 在应用退出前触发
app.on("before-quit", () => {
  console.log("应用即将退出")
  // 在这里可以执行一些清理工作，例如保存应用状态
})

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  })
  
  mainWindow.loadFile("index.html")
}

// 获取应用版本
const version = app.getVersion()

// 获取应用路径
const appPath = app.getAppPath()
const userDataPath = app.getPath('userData')
const documentsPath = app.getPath('documents')

// 退出应用
app.quit()

// 重启应用
app.relaunch()

// 设置/获取应用菜单
const menu = app.applicationMenu

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    // 窗口标题
    title: 'My Electron App',
    // 窗口图标
    icon: path.join(__dirname, 'assets/icon.png'),
    // 是否显示窗口边框
    frame: true,
    // 是否支持透明窗口
    transparent: false,
    // 窗口背景色
    backgroundColor: '#ffffff',
    // 窗口在屏幕上的初始位置
    x: undefined,
    y: undefined,
    // 是否居中显示
    center: true,
    webPreferences: {
      // 预加载脚本
      preload: path.join(__dirname, "preload.js"),
      // 默认情况下，渲染进程无法访问 Node.js API，出于安全考虑推荐保持默认值
      nodeIntegration: false,
      // 上下文隔离，强烈建议保持为 true
      contextIsolation: true,
      // 启用沙盒
      sandbox: true,
      // 禁用远程模块
      enableRemoteModule: false,
      // 网络安全策略
      webSecurity: true
    }
  })

  // 加载应用的 index.html
  mainWindow.loadFile("index.html")

  // 或者加载一个远程 URL
  // mainWindow.loadURL('https://example.com')

  // 优雅地显示窗口，避免白屏
  mainWindow.once("ready-to-show", () => {
    mainWindow.show()
  })

  // 打开开发者工具（开发环境）
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools()
  }
}

app.whenReady().then(createWindow)

webPreferences: {
  // 预加载脚本路径
  preload: path.join(__dirname, 'preload.js'),
  
  // 是否启用 Node.js 集成（默认 false，推荐保持）
  nodeIntegration: false,
  
  // 是否启用上下文隔离（默认 true，推荐保持）
  contextIsolation: true,
  
  // 是否启用沙盒（默认 true）
  sandbox: true,
  
  // 是否启用远程模块（默认 false，已弃用）
  enableRemoteModule: false,
  
  // 是否启用网络安全策略（默认 true，推荐保持）
  webSecurity: true,
  
  // 是否允许运行不安全内容
  allowRunningInsecureContent: false,
  
  // 是否启用 Web 视图标签
  webviewTag: false,
  
  // 是否启用 Node.js 的实验性功能
  nodeIntegrationInWorker: false,
  nodeIntegrationInSubFrames: false,
  
  // 插件支持
  plugins: false,
  
  // 是否启用实验性功能
  experimentalFeatures: false,
  
  // 自定义 User Agent
  userAgent: 'MyApp/1.0',
  
  // DevTools 配置
  devTools: true,
  
  // 默认编码
  defaultEncoding: 'UTF-8',
  
  // 是否启用拼写检查
  spellcheck: true
}

const win = new BrowserWindow()

// 窗口显示与隐藏
win.show()
win.hide()
win.close()

// 窗口状态
win.minimize()
win.maximize()
win.unmaximize()
win.restore()
win.setFullScreen(true)
win.isFullScreen()

// 窗口大小和位置
win.setSize(800, 600)
win.getSize() // [800, 600]
win.setPosition(100, 100)
win.getPosition() // [100, 100]
win.setBounds({ x: 100, y: 100, width: 800, height: 600 })
win.getBounds()

// 窗口属性
win.setTitle('新标题')
win.getTitle()
win.setAlwaysOnTop(true)
win.isAlwaysOnTop()

// 窗口内容
win.loadFile('index.html')
win.loadURL('https://example.com')
win.reload()
win.webContents.openDevTools()

const { app, BrowserWindow, dialog, shell, Notification, globalShortcut } = require('electron')

// 对话框示例
async function showOpenDialog() {
  const result = await dialog.showOpenDialog({
    title: '选择文件',
    defaultPath: app.getPath('documents'),
    filters: [
      { name: '文本文件', extensions: ['txt', 'md'] },
      { name: '所有文件', extensions: ['*'] }
    ],
    properties: ['openFile', 'multiSelections']
  })
  
  console.log('选择的文件：', result.filePaths)
}

// 系统通知示例
function showNotification() {
  new Notification({
    title: '应用通知',
    body: '这是一条来自 Electron 应用的通知',
    icon: path.join(__dirname, 'assets/icon.png')
  }).show()
}

// 打开外部链接
function openExternal(url) {
  shell.openExternal(url)
}

// 注册全局快捷键
app.whenReady().then(() => {
  globalShortcut.register('CommandOrControl+Shift+I', () => {
    console.log('快捷键被触发')
  })
})

// 清理快捷键
app.on('will-quit', () => {
  globalShortcut.unregisterAll()
})

// preload.js
const { contextBridge, ipcRenderer } = require("electron")

contextBridge.exposeInMainWorld("electronAPI", {
  minimizeWindow: () => ipcRenderer.send("minimize-window"),
  maximizeWindow: () => ipcRenderer.send("maximize-window"),
  closeWindow: () => ipcRenderer.send("close-window")
})

// main.js
const { ipcMain, BrowserWindow } = require("electron")

ipcMain.on("minimize-window", () => {
  const window = BrowserWindow.getFocusedWindow()
  if (window) {
    window.minimize()
  }
})

ipcMain.on("maximize-window", () => {
  const window = BrowserWindow.getFocusedWindow()
  if (window) {
    if (window.isMaximized()) {
      window.unmaximize()
    } else {
      window.maximize()
    }
  }
})

ipcMain.on("close-window", () => {
  const window = BrowserWindow.getFocusedWindow()
  if (window) {
    window.close()
  }
})

// renderer.js
document.getElementById("minimize-btn").addEventListener("click", () => {
  window.electronAPI.minimizeWindow()
})

document.getElementById("maximize-btn").addEventListener("click", () => {
  window.electronAPI.maximizeWindow()
})

document.getElementById("close-btn").addEventListener("click", () => {
  window.electronAPI.closeWindow()
})

// preload.js
const { contextBridge, ipcRenderer } = require("electron")

contextBridge.exposeInMainWorld("electronAPI", {
  getAppVersion: () => ipcRenderer.invoke("get-app-version"),
  readFile: (filePath) => ipcRenderer.invoke("read-file", filePath),
  saveFile: (filePath, content) => ipcRenderer.invoke("save-file", filePath, content)
})

// main.js
const { ipcMain, app, dialog } = require("electron")
const fs = require("fs").promises

ipcMain.handle("get-app-version", () => {
  return app.getVersion()
})

ipcMain.handle("read-file", async (event, filePath) => {
  try {
    const content = await fs.readFile(filePath, "utf8")
    return { success: true, content }
  } catch (error) {
    return { success: false, error: error.message }
  }
})

ipcMain.handle("save-file", async (event, filePath, content) => {
  try {
    // 如果没有提供路径，弹出保存对话框
    if (!filePath) {
      const result = await dialog.showSaveDialog({
        title: "保存文件",
        defaultPath: app.getPath("documents"),
        filters: [
          { name: "文本文件", extensions: ["txt"] },
          { name: "所有文件", extensions: ["*"] }
        ]
      })
      
      if (result.canceled) {
        return { success: false, error: "用户取消保存" }
      }
      filePath = result.filePath
    }
    
    await fs.writeFile(filePath, content, "utf8")
    return { success: true, filePath }
  } catch (error) {
    return { success: false, error: error.message }
  }
})

// renderer.js
// 获取应用版本
async function displayAppVersion() {
  const version = await window.electronAPI.getAppVersion()
  document.getElementById("version-info").innerText = `版本号：${version}`
}

// 读取文件
async function loadFile(filePath) {
  const result = await window.electronAPI.readFile(filePath)
  if (result.success) {
    document.getElementById("file-content").value = result.content
  } else {
    alert(`读取失败：${result.error}`)
  }
}

// 保存文件
async function saveFile() {
  const content = document.getElementById("file-content").value
  const result = await window.electronAPI.saveFile(null, content)
  if (result.success) {
    alert(`保存成功：${result.filePath}`)
  } else {
    alert(`保存失败：${result.error}`)
  }
}

displayAppVersion()

// main.js
const { BrowserWindow } = require("electron")

// 获取目标窗口
const mainWindow = BrowserWindow.getAllWindows()[0]

// 发送消息到渲染进程
mainWindow.webContents.send("update-available", {
  version: "1.0.1",
  releaseDate: "2024-01-15"
})

// preload.js
const { contextBridge, ipcRenderer } = require("electron")

contextBridge.exposeInMainWorld("electronAPI", {
  onUpdateAvailable: (callback) => {
    ipcRenderer.on("update-available", (event, data) => callback(data))
  }
})

// renderer.js
window.electronAPI.onUpdateAvailable((data) => {
  console.log("有新版本可用：", data.version)
  document.getElementById("update-notification").style.display = "block"
})

// ✅ 推荐：使用 invoke/handle（Promise 支持，代码清晰）
const result = await ipcRenderer.invoke("read-file", filePath)

// ❌ 不推荐：使用 sendSync（会阻塞渲染进程）
const result = ipcRenderer.sendSync("read-file", filePath)

// main.js
ipcMain.handle("read-file", async (event, filePath) => {
  try {
    const content = await fs.readFile(filePath, "utf8")
    return {
      success: true,
      data: content
    }
  } catch (error) {
    return {
      success: false,
      error: {
        code: error.code,
        message: error.message
      }
    }
  }
})

// renderer.js
const result = await window.electronAPI.readFile(filePath)
if (!result.success) {
  console.error("操作失败：", result.error.message)
  return
}
console.log("文件内容：", result.data)

// preload.ts
import { contextBridge, ipcRenderer } from "electron"

interface FileResult {
  success: boolean
  data?: string
  error?: { code: string; message: string }
}

contextBridge.exposeInMainWorld("electronAPI", {
  readFile: (filePath: string): Promise<FileResult> => 
    ipcRenderer.invoke("read-file", filePath)
})

// renderer.ts
interface ElectronAPI {
  readFile: (filePath: string) => Promise<FileResult>
}

declare global {
  interface Window {
    electronAPI: ElectronAPI
  }
}

// ✅ 推荐：使用命名空间和动词
"user:get-profile"
"user:update-profile"
"file:read"
"file:save"
"window:minimize"
"window:maximize"

// ❌ 不推荐：模糊命名
"getData"
"save"
"action1"

// main.js
const path = require("path")
const { BrowserWindow } = require("electron")

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, "preload.js"),
    contextIsolation: true,
    nodeIntegration: false,
    sandbox: true
  }
})

// preload.js
// 在预加载脚本中设置全局变量
window.mySecretKey = "secret123"
window.electronAPI = { /* ... */ }

// renderer.js
// 在渲染进程中尝试访问
console.log(window.mySecretKey) // undefined（无法访问）
console.log(window.electronAPI) // ✅ 可以访问（通过 contextBridge 暴露）

// preload.js
const { contextBridge, ipcRenderer } = require("electron")

// 暴露安全的 API 到渲染进程
contextBridge.exposeInMainWorld("electronAPI", {
  // 平台信息
  platform: process.platform,
  
  // 应用版本
  getAppVersion: () => ipcRenderer.invoke("get-app-version"),
  
  // 文件操作
  readFile: (filePath) => ipcRenderer.invoke("read-file", filePath),
  saveFile: (filePath, content) => ipcRenderer.invoke("save-file", filePath, content),
  
  // 窗口控制
  minimizeWindow: () => ipcRenderer.send("window-minimize"),
  maximizeWindow: () => ipcRenderer.send("window-maximize"),
  
  // 事件监听
  onUpdateAvailable: (callback) => {
    ipcRenderer.on("update-available", (event, data) => callback(data))
  }
})

const { app, BrowserWindow, ipcMain, dialog } = require("electron")
const fs = require("fs").promises
const path = require("path")

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false,
      sandbox: true
    }
  })
  
  mainWindow.loadFile("index.html")
}

app.whenReady().then(createWindow)

// IPC 处理器
ipcMain.handle("get-app-version", () => app.getVersion())

ipcMain.handle("read-file", async (event, filePath) => {
  try {
    const content = await fs.readFile(filePath, "utf8")
    return { success: true, content }
  } catch (error) {
    return { success: false, error: error.message }
  }
})

ipcMain.handle("save-file", async (event, filePath, content) => {
  try {
    await fs.writeFile(filePath, content, "utf8")
    return { success: true }
  } catch (error) {
    return { success: false, error: error.message }
  }
})

ipcMain.handle("select-file", async () => {
  const result = await dialog.showOpenDialog(mainWindow, {
    title: "选择文件",
    filters: [
      { name: "文本文件", extensions: ["txt", "md"] },
      { name: "所有文件", extensions: ["*"] }
    ],
    properties: ["openFile"]
  })
  
  if (result.canceled) {
    return { success: false }
  }
  
  return { success: true, filePath: result.filePaths[0] }
})

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

contextBridge.exposeInMainWorld("fileAPI", {
  // 应用信息
  getAppVersion: () => ipcRenderer.invoke("get-app-version"),
  
  // 文件操作
  readFile: (filePath) => ipcRenderer.invoke("read-file", filePath),
  saveFile: (filePath, content) => ipcRenderer.invoke("save-file", filePath, content),
  selectFile: () => ipcRenderer.invoke("select-file"),
  
  // 系统信息（可以直接访问 Node.js API）
  getSystemInfo: () => ({
    platform: process.platform,
    arch: process.arch,
    versions: {
      node: process.versions.node,
      chrome: process.versions.chrome,
      electron: process.versions.electron
    }
  })
})

// 安全地调用暴露的 API
async function loadFile() {
  // 选择文件
  const selectResult = await window.fileAPI.selectFile()
  if (!selectResult.success) {
    return
  }
  
  // 读取文件内容
  const readResult = await window.fileAPI.readFile(selectResult.filePath)
  if (readResult.success) {
    document.getElementById("file-content").value = readResult.content
    document.getElementById("file-path").innerText = selectResult.filePath
  } else {
    alert("读取文件失败：" + readResult.error)
  }
}

async function saveFile() {
  const filePath = document.getElementById("file-path").innerText
  const content = document.getElementById("file-content").value
  
  const result = await window.fileAPI.saveFile(filePath, content)
  if (result.success) {
    alert("保存成功")
  } else {
    alert("保存失败：" + result.error)
  }
}

// 显示系统信息
function showSystemInfo() {
  const info = window.fileAPI.getSystemInfo()
  console.log("系统信息：", info)
}

// 尝试访问 Node.js API 会失败
// console.log(require('fs')); // ❌ Uncaught ReferenceError: require is not defined

// preload.js
contextBridge.exposeInMainWorld("electronAPI", {
  // ✅ 为每个操作提供专门的 API
  loadPreferences: () => ipcRenderer.invoke("load-prefs"),
  savePreferences: (prefs) => ipcRenderer.invoke("save-prefs", prefs)
})

// preload.js
contextBridge.exposeInMainWorld("electronAPI", {
  // ❌ 直接暴露底层 API，无参数过滤
  send: ipcRenderer.send,
  invoke: ipcRenderer.invoke
})

// ❌ 不支持
contextBridge.exposeInMainWorld("api", {
  myClass: class MyClass {}
})

// ❌ 不支持
const fn = () => {}
fn.customProperty = "value"
contextBridge.exposeInMainWorld("api", { fn })

// ✅ 支持：基本类型、数组、对象、Promise
contextBridge.exposeInMainWorld("api", {
  getString: () => "hello",
  getNumber: () => 123,
  getObject: () => ({ key: "value" }),
  getArray: () => [1, 2, 3],
  getPromise: () => Promise.resolve("result")
})

// ❌ 不支持：函数、DOM 元素、特殊对象
contextBridge.exposeInMainWorld("api", {
  getFunction: () => () => {}, // ❌
  getDOM: () => document.body  // ❌
})

// 分块传输示例
ipcMain.handle("read-large-file", async (event, filePath, chunkSize = 1024 * 1024) => {
  const stream = fs.createReadStream(filePath, { highWaterMark: chunkSize })
  
  for await (const chunk of stream) {
    event.sender.send("file-chunk", chunk)
  }
  
  event.sender.send("file-end")
})

// main.js - 打印所有 IPC 消息
ipcMain.on("*", (event, ...args) => {
  console.log("[IPC]", event.channel, args)
})

// 使用 electron-log
const log = require("electron-log")
ipcMain.handle("read-file", (event, filePath) => {
  log.info("读取文件：", filePath)
  // ...
})

// 使用 Chrome DevTools Protocol
const { app } = require("electron")
app.commandLine.appendSwitch("inspect", "5858")

// main.js
ipcMain.on("message-to-other-window", (event, message) => {
  const allWindows = BrowserWindow.getAllWindows()
  allWindows.forEach(win => {
    if (win.webContents !== event.sender) {
      win.webContents.send("message-from-other-window", message)
    }
  })
})