与Electron桌面开发

什么是Electron

Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。它将Chromium和Node.js合并到同一个运行时环境中，允许开发者使用Web技术开发原生应用。Electron应用可以打包为Windows、macOS和Linux的可执行文件，实现"一次编写，到处运行"的目标。

// 一个最简单的Electron应用示例
import { app, BrowserWindow } from 'electron'

let mainWindow: BrowserWindow | null = null

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  mainWindow.loadFile('index.html')
})

TypeScript与Electron的结合

TypeScript为Electron开发带来了类型安全和更好的开发体验。通过类型定义，可以避免许多常见的运行时错误。安装必要的依赖：

npm install electron typescript @types/node @types/electron -D

配置tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

主进程与渲染进程

Electron应用由主进程和渲染进程组成。主进程管理应用生命周期，创建浏览器窗口；渲染进程显示Web页面。它们通过IPC(进程间通信)进行交互。

主进程示例：

// src/main.ts
import { app, BrowserWindow, ipcMain } from 'electron'
import path from 'path'

let mainWindow: BrowserWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
    }
  })
  
  ipcMain.handle('perform-action', (event, data) => {
    console.log('Received data from renderer:', data)
    return { status: 'success' }
  })
  
  mainWindow.loadFile('renderer/index.html')
})

渲染进程通信示例：

// src/renderer/app.ts
import { ipcRenderer } from 'electron'

async function sendDataToMain() {
  const response = await ipcRenderer.invoke('perform-action', {
    message: 'Hello from renderer'
  })
  console.log('Response from main:', response)
}

进程间通信的最佳实践

为了安全性和可维护性，应该：

1. 使用contextBridge在预加载脚本中暴露有限的API
2. 验证所有IPC通信数据
3. 使用枚举定义IPC通道名称

预加载脚本示例：

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

contextBridge.exposeInMainWorld('electronAPI', {
  sendData: (data: unknown) => ipcRenderer.invoke('perform-action', data),
  onUpdate: (callback: (data: unknown) => void) => 
    ipcRenderer.on('update-data', (event, data) => callback(data))
})

状态管理与数据持久化

Electron应用通常需要管理复杂状态和持久化数据。可以使用Redux或MobX等状态管理库，结合electron-store进行本地存储。

// src/store/configStore.ts
import Store from 'electron-store'

interface Config {
  theme: 'light' | 'dark'
  fontSize: number
  lastOpenedFiles: string[]
}

const schema = {
  theme: {
    type: 'string',
    enum: ['light', 'dark'],
    default: 'light'
  },
  fontSize: {
    type: 'number',
    minimum: 12,
    maximum: 24,
    default: 14
  }
} as const

const configStore = new Store<Config>({ schema })

export function getConfig(): Config {
  return {
    theme: configStore.get('theme'),
    fontSize: configStore.get('fontSize'),
    lastOpenedFiles: configStore.get('lastOpenedFiles', [])
  }
}

export function updateConfig(updates: Partial<Config>) {
  configStore.set(updates)
}

原生功能集成

Electron允许访问操作系统原生功能，如文件系统、菜单、托盘图标等。

文件操作示例：

// src/native/fileOperations.ts
import { dialog, ipcMain } from 'electron'
import fs from 'fs'
import path from 'path'

ipcMain.handle('open-file-dialog', async (event) => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [
      { name: 'Text Files', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  })
  
  if (!result.canceled && result.filePaths.length > 0) {
    const filePath = result.filePaths[0]
    const content = fs.readFileSync(filePath, 'utf-8')
    return { filePath, content }
  }
  return null
})

系统托盘示例：

// src/native/tray.ts
import { Tray, Menu, nativeImage } from 'electron'
import path from 'path'

export function createTray(iconPath: string) {
  const icon = nativeImage.createFromPath(iconPath)
  const tray = new Tray(icon)
  
  const contextMenu = Menu.buildFromTemplate([
    { label: '打开', click: () => mainWindow.show() },
    { label: '退出', click: () => app.quit() }
  ])
  
  tray.setToolTip('我的Electron应用')
  tray.setContextMenu(contextMenu)
  
  return tray
}

打包与分发

使用electron-builder打包应用：

// package.json配置
{
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "directories": {
      "output": "release"
    },
    "files": ["dist/**/*", "package.json"],
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png"
    }
  }
}

打包命令：

npm run build && electron-builder --win --x64

调试与性能优化

Electron应用调试可以使用Chrome开发者工具：

// 开发模式下打开DevTools
if (process.env.NODE_ENV === 'development') {
  mainWindow.webContents.openDevTools({ mode: 'detach' })
}

性能优化建议：

1. 使用webpack或vite打包渲染进程代码
2. 延迟加载非关键模块
3. 使用Worker线程处理CPU密集型任务
4. 优化DOM操作和渲染性能

Webpack配置示例：

// webpack.renderer.config.js
module.exports = {
  entry: './src/renderer/index.ts',
  output: {
    filename: 'renderer.js',
    path: path.resolve(__dirname, 'dist/renderer')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  target: 'electron-renderer'
}

安全最佳实践

Electron应用安全注意事项：

1. 启用contextIsolation
2. 禁用nodeIntegration
3. 使用CSP(内容安全策略)
4. 验证所有用户输入
5. 保持Electron和依赖项更新

安全配置示例：

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

CSP设置示例：

<!-- 在HTML头部添加 -->
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
">

测试策略

Electron应用测试应包括：

1. 单元测试(Jest)
2. 集成测试
3. E2E测试(Spectron或Playwright)

Jest测试示例：

// __tests__/configStore.test.ts
import { getConfig, updateConfig } from '../store/configStore'

describe('configStore', () => {
  it('should return default config', () => {
    const config = getConfig()
    expect(config.theme).toBe('light')
    expect(config.fontSize).toBe(14)
  })
  
  it('should update config', () => {
    updateConfig({ theme: 'dark' })
    expect(getConfig().theme).toBe('dark')
  })
})

Playwright E2E测试示例：

// tests/app.spec.ts
import { test, expect } from '@playwright/test'

test('should open window', async () => {
  const electronApp = await playwright._electron.launch({
    args: ['dist/main.js']
  })
  
  const window = await electronApp.firstWindow()
  await expect(window).toHaveTitle('My Electron App')
  
  await electronApp.close()
})

更新机制

实现自动更新功能：

// src/updater.ts
import { autoUpdater } from 'electron-updater'
import { ipcMain } from 'electron'

export function initAutoUpdate() {
  if (process.env.NODE_ENV === 'development') {
    autoUpdater.autoDownload = false
  }
  
  autoUpdater.on('update-available', () => {
    mainWindow.webContents.send('update-available')
  })
  
  autoUpdater.on('update-downloaded', () => {
    mainWindow.webContents.send('update-downloaded')
  })
  
  ipcMain.handle('check-for-updates', () => {
    autoUpdater.checkForUpdates()
  })
  
  ipcMain.handle('install-update', () => {
    autoUpdater.quitAndInstall()
  })
}

多窗口管理

复杂应用可能需要管理多个窗口：

// src/windowManager.ts
import { BrowserWindow } from 'electron'
import path from 'path'

const windows = new Set<BrowserWindow>()

export function createWindow(options = {}) {
  const window = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
    },
    ...options
  })
  
  windows.add(window)
  
  window.on('closed', () => {
    windows.delete(window)
  })
  
  return window
}

export function getWindows() {
  return Array.from(windows)
}

原生菜单与快捷键

自定义应用菜单和快捷键：

// src/menu.ts
import { Menu, MenuItem } from 'electron'

export function createMenu() {
  const template: (MenuItemConstructorOptions | MenuItem)[] = [
    {
      label: '文件',
      submenu: [
        {
          label: '打开',
          accelerator: 'CmdOrCtrl+O',
          click: () => openFileDialog()
        },
        { type: 'separator' },
        {
          label: '退出',
          role: 'quit'
        }
      ]
    },
    {
      label: '编辑',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' }
      ]
    }
  ]
  
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

错误处理与日志

实现健壮的错误处理和日志记录：

// src/logger.ts
import { app } from 'electron'
import fs from 'fs'
import path from 'path'

const logFilePath = path.join(app.getPath('logs'), 'app.log')

export function logError(error: Error) {
  const timestamp = new Date().toISOString()
  const message = `[${timestamp}] ERROR: ${error.stack || error.message}\n`
  
  fs.appendFile(logFilePath, message, (err) => {
    if (err) console.error('Failed to write to log file:', err)
  })
  
  console.error(message)
}

// 全局错误处理
process.on('uncaughtException', (error) => {
  logError(error)
})

原生模块集成

使用Node.js原生模块或编写自己的原生插件：

// 使用node-gyp编译原生模块
// binding.gyp
{
  "targets": [
    {
      "target_name": "my_native_module",
      "sources": ["src/native/module.cc"],
      "include_dirs": ["<!(node -e \"require('node-addon-api').include\")"],
      "dependencies": ["<!(node -e \"require('node-addon-api').gyp\")"],
      "defines": ["NAPI_DISABLE_CPP_EXCEPTIONS"]
    }
  ]
}

TypeScript声明文件：

// typings/my-native-module.d.ts
declare module 'my-native-module' {
  export function calculate(input: number): number
}

使用示例：

import { calculate } from 'my-native-module'

const result = calculate(42)
console.log('Native module result:', result)

跨平台兼容性处理

处理不同操作系统的差异：

// src/utils/platform.ts
import { platform } from 'os'

export function getPlatformSpecificConfig() {
  switch (platform()) {
    case 'darwin':
      return {
        menuStyle: 'macOS',
        shortcutModifier: 'Cmd'
      }
    case 'win32':
      return {
        menuStyle: 'windows',
        shortcutModifier: 'Ctrl'
      }
    case 'linux':
      return {
        menuStyle: 'linux',
        shortcutModifier: 'Ctrl'
      }
    default:
      return {
        menuStyle: 'default',
        shortcutModifier: 'Ctrl'
      }
  }
}

性能监控

实现应用性能监控：

// src/performance.ts
import { performance, PerformanceObserver } from 'perf_hooks'
import { ipcMain } from 'electron'

const obs = new PerformanceObserver((items) => {
  const entries = items.getEntries()
  for (const entry of entries) {
    console.log(`${entry.name}: ${entry.duration}ms`)
  }
})

obs.observe({ entryTypes: ['measure'] })

export function startMeasure(name: string) {
  performance.mark(`${name}-start`)
}

export function endMeasure(name: string) {
  performance.mark(`${name}-end`)
  performance.measure(name, `${name}-start`, `${name}-end`)
}

// IPC性能监控
ipcMain.on('ipc-message', (event, message) => {
  startMeasure(`ipc-${message.type}`)
  
  // 处理消息...
  
  endMeasure(`ipc-${message.type}`)
})