桌面应用

桌面应用是运行在桌面操作系统上的应用程序。使用JavaScript进行桌面应用开发可以实现跨平台开发，提高开发效率。

1. Electron

Electron是GitHub开发的开源框架，用于使用HTML、CSS和JavaScript构建跨平台桌面应用。

核心特点

  • 跨平台：一套代码可以在Windows、macOS和Linux平台上运行
  • 基于Web技术：使用熟悉的Web技术开发
  • 原生功能访问：可以访问原生桌面功能
  • 活跃的社区：有活跃的社区和大量的第三方库
  • 自动更新：内置自动更新功能

快速开始

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

# 创建项目结构
mkdir electron-app
cd electron-app
npm init -y

# 创建主进程文件
mkdir src
touch src/main.js src/index.html

# 配置package.json
json 
// package.json
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "My Electron app",
  "main": "src/main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "keywords": ["electron", "desktop"],
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^25.0.0"
  }
}
javascript 
// src/main.js (主进程)
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('src/index.html');

  // 打开开发者工具
  // mainWindow.webContents.openDevTools();
}

app.whenReady().then(() => {
  createWindow();

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
html 
<!-- src/index.html (渲染进程) -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Electron!</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f0f0f0;
    }
    h1 {
      color: #333;
    }
    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <p>This is a desktop application built with Electron.</p>
  <button onclick="console.log('Button clicked!')">Click Me</button>
</body>
</html>
javascript 
// src/preload.js (预加载脚本)
// 预加载脚本可以访问Node.js API和DOM
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency]);
  }
});

运行应用

bash 
# 运行开发版本
npm start

打包应用

bash 
# 安装Electron Forge
npm install --save-dev @electron-forge/cli
npx electron-forge import

# 打包应用
npm run package

# 创建安装包
npm run make

2. NW.js (原Node-WebKit)

NW.js是Intel开发的开源框架，用于使用HTML、CSS和JavaScript构建跨平台桌面应用。

核心特点

  • 跨平台：一套代码可以在Windows、macOS和Linux平台上运行
  • 基于Web技术：使用熟悉的Web技术开发
  • Node.js集成：可以直接在渲染进程中使用Node.js API
  • 原生功能访问：可以访问原生桌面功能

快速开始

bash 
# 下载NW.js
# 从官方网站下载对应平台的NW.js

# 创建项目结构
mkdir nw-app
cd nw-app

# 创建package.json
json 
// package.json
{
  "name": "nw-app",
  "version": "1.0.0",
  "description": "My NW.js app",
  "main": "index.html",
  "window": {
    "title": "Hello NW.js",
    "width": 800,
    "height": 600
  }
}
html 
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello NW.js!</title>
</head>
<body>
  <h1>Hello, NW.js!</h1>
  <p>This is a desktop application built with NW.js.</p>
  <script>
    // 可以直接使用Node.js API
    const fs = require('fs');
    console.log('Node.js version:', process.version);
  </script>
</body>
</html>

运行应用

bash 
# 将项目文件复制到NW.js目录
cp -r * /path/to/nwjs/

# 运行应用
/path/to/nwjs/nw .

3. Tauri

Tauri是一个现代的桌面应用框架，用于使用Web技术和Rust构建跨平台桌面应用。

核心特点

  • 跨平台：一套代码可以在Windows、macOS和Linux平台上运行
  • 轻量级：应用体积小，资源占用低
  • 安全：使用Rust作为后端，提供更好的安全性
  • 原生性能：接近原生应用的性能
  • Web技术：使用熟悉的Web技术开发

快速开始

bash 
# 安装Tauri CLI
npm install -g @tauri-apps/cli

# 创建项目
npm create vite@latest tauri-app -- --template vanilla
cd tauri-app
npm install

# 初始化Tauri
npx tauri init

# 运行开发版本
npm run tauri dev

# 构建生产版本
npm run tauri build

4. Neutralinojs

Neutralinojs是一个轻量级的跨平台桌面应用框架，用于使用Web技术构建桌面应用。

核心特点

  • 超轻量级：应用体积很小（只有几MB）
  • 跨平台：一套代码可以在Windows、macOS和Linux平台上运行
  • Web技术：使用熟悉的Web技术开发
  • 低资源占用：内存和CPU占用低
  • 简单API：提供简单易用的API

快速开始

bash 
# 安装Neutralinojs CLI
npm install -g @neutralinojs/neu

# 创建项目
neu create myapp
cd myapp

# 运行开发版本
neu run

# 构建生产版本
neu build

5. 桌面应用开发最佳实践

5.1 性能优化

  • 减少资源占用：优化内存和CPU使用
  • 懒加载：按需加载资源和组件
  • 使用Web Workers：将耗时任务放在Web Workers中执行
  • 优化渲染：减少重渲染，使用CSS动画替代JavaScript动画

5.2 用户体验

  • 遵循平台设计指南：遵循Windows、macOS和Linux的设计指南
  • 响应式设计：适配不同屏幕尺寸
  • 键盘导航：支持键盘导航
  • ** accessibility**：确保应用可访问

5.3 安全性

  • 使用最新版本：使用框架的最新版本，修复安全漏洞
  • 输入验证：验证用户输入，防止注入攻击
  • 安全通信：使用HTTPS进行通信
  • 权限管理：最小化应用权限

5.4 打包和分发

  • 自动化构建：使用自动化工具进行构建和打包
  • 签名应用：签名应用，提高安全性和可信度
  • 自动更新：实现自动更新功能，确保用户使用最新版本
  • 多平台支持：支持多个桌面平台

6. 桌面应用案例

6.1 Visual Studio Code

Visual Studio Code是微软开发的跨平台代码编辑器，使用Electron构建。

6.2 Slack

Slack是团队协作工具，使用Electron构建。

6.3 Discord

Discord是聊天应用，使用Electron构建。

6.4 Figma

Figma是设计工具，使用Electron构建。

6.5 GitHub Desktop

GitHub Desktop是GitHub的桌面客户端，使用Electron构建。

学习资源

最后更新：2026-02-08