Electron 简介与安装

┌─────────────────────────────────────────────────────────────────┐
│                        Electron 应用                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌─────────────────────┐       ┌─────────────────────┐         │
│  │   主进程 (Main)      │       │  渲染进程 (Renderer) │         │
│  ├─────────────────────┤       ├─────────────────────┤         │
│  │ • Node.js 环境      │ IPC   │ • Chromium 环境     │         │
│  │ • 完整系统权限        │◄────►│ • Web 页面渲染      │         │
│  │ • 原生 API 调用     │       │ • HTML/CSS/JS       │         │
│  │ • 窗口管理          │       │ • DOM API           │         │
│  │ • 应用生命周期      │       │ • 有限的 Node API   │         │
│  └─────────────────────┘       └─────────────────────┘         │
│           │                              │                      │
├───────────┼──────────────────────────────┼──────────────────────┤
│           ▼                              ▼                      │
│  ┌─────────────────────────────────────────────────────┐       │
│  │           底层技术栈                                 │       │
│  ├─────────────────────────────────────────────────────┤       │
│  │ • Chromium: UI 渲染引擎                             │       │
│  │ • Node.js: 系统交互能力                             │       │
│  │ • Native APIs: 操作系统原生功能                     │       │
│  └─────────────────────────────────────────────────────┘       │
└─────────────────────────────────────────────────────────────────┘

# 查看所有可用版本
npm view electron versions

# 安装指定版本
npm install electron@28.0.0 --save-dev

# 安装最新稳定版
npm install electron@latest --save-dev

# 安装 beta 版本
npm install electron@beta --save-dev

# 配置 npm 淘宝镜像
npm config set registry https://registry.npmmirror.com

# 配置 Electron 二进制包镜像
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# 配置 Electron Builder 镜像（打包工具）
npm config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/

# npm 镜像
export npm_config_registry=https://registry.npmmirror.com

# Electron 镜像
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

# Electron Builder 镜像
export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

# 创建项目目录
mkdir my-electron-app && cd my-electron-app

# 初始化项目
npm init -y

# 安装 Electron
npm install electron --save-dev

# 启动应用（需要先创建 main.js 入口文件）
npm start

# 方法1: 临时使用
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm install electron --save-dev

# 方法2: 永久配置（推荐）
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# macOS/Linux: 使用 sudo（不推荐）
sudo npm install electron --save-dev

# 更好的方案: 修复 npm 权限
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

# 查看本地已安装的 Node.js 版本
nvm list

# 安装并切换到 Node.js 18
nvm install 18
nvm use 18

# 验证版本
node -v  # 应显示 v18.x.x
npm -v

// main.js
const mainWindow = new BrowserWindow({
  webPreferences: {
    // 启用上下文隔离（Electron 12+ 默认启用）
    contextIsolation: true,
    // 禁用 Node.js 集成（推荐）
    nodeIntegration: false,
    // 启用沙箱
    sandbox: true,
    // 预加载脚本
    preload: path.join(__dirname, 'preload.js')
  }
})

<!-- index.html -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

// preload.js - 验证 IPC 通道白名单
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => {
    const validChannels = ['toMain']
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  }
})

pnpm add electron-updater

{
  "name": "camera",
  "version": "1.0.0",
  "repository": "https://github.com/houdunwang/camera",
  ...
}

import { is } from '@electron-toolkit/utils'
import { BrowserWindow, dialog, shell } from 'electron'
import { autoUpdater } from 'electron-updater'
//关闭自动下载更新，改为用户确认后再下载
autoUpdater.autoDownload = false
//退出时不自动安装更新
autoUpdater.autoInstallOnAppQuit = false

export default (win: BrowserWindow) => {
  //检查是否有更新
  if (!is.dev) autoUpdater.checkForUpdates()

  //有新版本时
  autoUpdater.on('update-available', (_info) => {
    dialog
      .showMessageBox({
        type: 'warning',
        title: '更新提示',
        message: '有新版本发布了',
        buttons: ['更新', '取消'],
        cancelId: 1
      })
      .then((res) => {
        if (res.response == 0) {
          //开始下载更新
          autoUpdater.downloadUpdate()
        }
      })
  })

  //没有新版本时
  autoUpdater.on('update-not-available', (_info) => {
    // dialog.showMessageBox({
    //   type: 'info',
    //   message: `你已经是最新版本`
    // })
  })

  //更新下载完毕
  autoUpdater.on('update-downloaded', (_info) => {
    //退出并安装更新
    autoUpdater.quitAndInstall()
  })

  //更新发生错误
  autoUpdater.on('error', (_info) => {
    dialog
      .showMessageBox({
        type: 'warning',
        title: '更新提示',
        message: '软件更新失败',
        buttons: ['网站下载', '取消更新'],
        cancelId: 1
      })
      .then((res) => {
        if (res.response == 0) {
          shell.openExternal('https://github.com/houdunwang/camera/releases')
        }
      })
  })

  // 监听下载进度
  autoUpdater.on('download-progress', (progress) => {
    win.webContents.send('downloadProgress', progress)
  })
}

// 监听下载进度
autoUpdater.on('download-progress', (progress) => {
  win.webContents.send('downloadProgress', progress)
})

contextBridge.exposeInMainWorld('api', {
	//下载进度条
  downloadProgress: (callback: (progress: any) => {}) => {
    ipcRenderer.on('downloadProgress', (_event, progress) => {
      callback(progress)
    })
  }
})

<script setup lang="ts">
import { ref } from 'vue'

//下载进度条
const progress = ref<any>(null)
window.api.downloadProgress((_progress: any) => {
  progress.value = _progress
})
</script>

<template>
  <main
    class="p-5 w-screen h-screen absolute z-30 flex flex-col justify-center shadow-inner bg-gray-100"
    v-if="progress"
  >
    <div class="flex justify-center">
      <img
        src="../assets/xj.jpg"
        alt=""
        class="w-[80px] h-[80px] object-cover rounded-full shadow-md"
      />
    </div>
    <h1 class="py-3 text-center font-bold opacity-60 text-sm font-mono">下载更新包</h1>
    <div class="">
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="parseInt(progress.percent)"
      />
    </div>
    <div class="mt-5 flex justify-center">
      <a
        href="https://github.com/houdunwang/camera/releases"
        target="_blank"
        class="bg-violet-600 py-2 px-4 rounded-md text-white text-sm hover:bg-violet-500"
        >官网下载</a
      >
    </div>
  </main>
</template>

{
  "name": "houdunren-camera",
  "version": "1.0.5",
  "homepage": "https://www.houdunren.com",
  "repository": "https://github.com/houdunwang/camera",
  "scripts": {
    "build:win": "npm run build && electron-builder --win --config --publish never",
    "build:mac-x86": "npm run build && electron-builder --mac --config --publish never",
    "build:mac-arm64": "npm run build && electron-builder --arm64 --mac --config --publish never",
    "build:linux": "npm run build && electron-builder --linux --config --publish never"
  },
} 

name: Build App
# permissions:
#   contents: write
on:
  push:
    tags:
      - v*

jobs:
  release:
    name: build and release electron app
    runs-on: ${{ matrix.os }}

    if: startsWith(github.ref, 'refs/tags/')
    strategy:
      fail-fast: false
      matrix:
        os: [windows-latest, macos-latest, ubuntu-latest]

    steps:
      - name: Check out git repository
        uses: actions/checkout@v3.0.0

      - name: Install Node.js
        uses: actions/setup-node@v3.0.0
        with:
          node-version: 16

      - name: Install Dependencies
        run: |
          npm i -g pnpm
          pnpm install

      - name: Build Electron App for windows
        if: matrix.os == 'windows-latest'
        run: pnpm run build:win
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Build Electron App for macos
        if: matrix.os == 'macos-latest'
        run: |
          pnpm run build:mac-x86
          pnpm run build:mac-arm64
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      # - name: Build Electron App for linux
      #   if: matrix.os == 'ubuntu-latest'
      #   run: |
      #     pnpm run build:linux-x86
      #     pnpm run build:linux-arm64
      # env:
      #   GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Cleanup Artifacts for Windows
        if: matrix.os == 'windows-latest'
        run: |
          npx del-cli "dist/*" "!dist/*.exe" "!dist/*.zip" "!dist/*.yml"

      - name: Cleanup Artifacts for MacOS
        if: matrix.os == 'macos-latest'
        run: |
          npx del "dist/*" "!dist/(*.dmg|*.zip|latest*.yml)"

      - name: Cleanup Artifacts for Linux
        if: matrix.os == 'ubuntu-latest'
        run: |
          npx del "dist/*" "!dist/(*.AppImage|latest*.yml)"

      - name: upload artifacts
        uses: actions/upload-artifact@v3.0.0
        with:
          name: ${{ matrix.os }}
          path: dist

      - name: release
        uses: softprops/action-gh-release@v1
        if: startsWith(github.ref, 'refs/tags/')
        with:
          files: 'dist/**'
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} 

pnpm add wallpaper@v5.0.1

import { IpcMainEvent, ipcMain } from 'electron'
import { createWriteStream } from 'fs'
import fetch from 'node-fetch'
import { pipeline } from 'node:stream'
import { promisify } from 'node:util'
import { resolve } from 'path'
import wallpaper from 'wallpaper'

ipcMain.on('setWallpaper', async (event: IpcMainEvent, url: string) => {
  const localFile = resolve(__dirname, '../../wallpaper/' + url.split('/').pop())
  const streamPipeline = promisify(pipeline)
  const response = await fetch(url)
  if (!response.ok) throw new Error(`unexpected response ${response.statusText}`)
  await streamPipeline(response.body!, createWriteStream(localFile))

  wallpaper.set(localFile, { screen: 'all', scale: 'auto' })
})