desktop-app by popup-studio-ai/bkit-claude-code
npx skills add https://github.com/popup-studio-ai/bkit-claude-code --skill desktop-app一份关于使用 Web 技术(HTML、CSS、JavaScript)开发桌面应用的指南。使用单一代码库同时支持 Windows、macOS 和 Linux。
| 框架 | 层级 | 推荐 | 使用场景 |
|---|---|---|---|
| Tauri | Tier 2 | ⭐ 首选 | 轻量级 (3MB),Rust 安全性 |
| Electron | Tier 3 | 支持 | 成熟的生态系统,类似 VS Code 的应用 |
AI-Native 推荐 : Tauri
- 年增长率 35%
- 内存占用 20-40MB,而 Electron 为 200-400MB
- 通过 Tauri 2.0 支持移动端 (iOS/Android)
- Rust 后端 = 内存安全
生态系统推荐 : Electron
- 成熟的工具链
- Node.js 集成
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Starter → Tauri (v2) [Tier 2]
- 比 Electron 设置更简单
- 输出包更小 (~3MB vs ~150MB)
Dynamic → Tauri + auto-update [Tier 2]
- 包含服务器集成,自动更新
- 更低的内存占用
Enterprise → Tauri [Tier 2] 或 Electron [Tier 3]
- Tauri 用于性能和安全性
- Electron 用于复杂的 Node.js 集成
# 使用 electron-vite 创建(推荐)
npm create @electron-vite/create my-electron-app
cd my-electron-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
my-electron-app/
├── src/
│ ├── main/ # 主进程 (Node.js)
│ │ └── index.ts # 应用入口点,窗口管理
│ ├── preload/ # 预加载脚本
│ │ └── index.ts # 渲染器↔主进程桥梁
│ └── renderer/ # 渲染器进程 (Web)
│ ├── src/ # React/Vue 代码
│ └── index.html # HTML 入口点
├── resources/ # 应用图标,资源
├── electron.vite.config.ts # 构建配置
├── electron-builder.yml # 部署配置
└── package.json
┌─────────────────────────────────────────────────────┐
│ Electron 应用 │
├─────────────────────────────────────────────────────┤
│ 主进程 (Node.js) │
│ - 系统 API 访问(文件、网络等) │
│ - 窗口创建/管理 │
│ - 菜单、托盘管理 │
├─────────────────────────────────────────────────────┤
│ 预加载脚本 (桥梁) │
│ - 安全的主进程↔渲染器通信 │
│ - 仅暴露特定 API │
├─────────────────────────────────────────────────────┤
│ 渲染器进程 (Chromium) │
│ - Web UI (React, Vue 等) │
│ - DOM 访问 │
│ - 无法直接访问 Node.js API(安全性) │
└─────────────────────────────────────────────────────┘
// src/main/index.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import { join } from 'path';
let mainWindow: BrowserWindow | null = null;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false,
},
});
// 开发模式:加载 Vite 服务器
if (process.env.NODE_ENV === 'development') {
mainWindow.loadURL('http://localhost:5173');
mainWindow.webContents.openDevTools();
} else {
// 生产环境:加载构建后的文件
mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
}
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// IPC:处理来自渲染器的请求
ipcMain.handle('read-file', async (event, filePath) => {
const fs = await import('fs/promises');
return fs.readFile(filePath, 'utf-8');
});
// src/preload/index.ts
import { contextBridge, ipcRenderer } from 'electron';
// 安全暴露给渲染器的 API
contextBridge.exposeInMainWorld('electronAPI', {
// 读取文件
readFile: (filePath: string) => ipcRenderer.invoke('read-file', filePath),
// 保存文件对话框
saveFile: (content: string) => ipcRenderer.invoke('save-file', content),
// 应用版本
getVersion: () => process.env.npm_package_version,
// 平台
platform: process.platform,
});
// 类型定义(供渲染器使用)
declare global {
interface Window {
electronAPI: {
readFile: (path: string) => Promise<string>;
saveFile: (content: string) => Promise<void>;
getVersion: () => string;
platform: NodeJS.Platform;
};
}
}
// src/renderer/src/App.tsx
import { useState } from 'react';
function App() {
const [content, setContent] = useState('');
const handleOpenFile = async () => {
const result = await window.electronAPI.readFile('/path/to/file.txt');
setContent(result);
};
return (
<div className="app">
<h1>我的 Electron 应用</h1>
<p>平台: {window.electronAPI.platform}</p>
<button onClick={handleOpenFile}>打开文件</button>
<pre>{content}</pre>
</div>
);
}
export default App;
// src/main/menu.ts
import { Menu, app, shell } from 'electron';
const template: Electron.MenuItemConstructorOptions[] = [
{
label: '文件',
submenu: [
{ label: '新建文件', accelerator: 'CmdOrCtrl+N', click: () => {} },
{ label: '打开', accelerator: 'CmdOrCtrl+O', click: () => {} },
{ type: 'separator' },
{ label: '退出', role: 'quit' },
],
},
{
label: '编辑',
submenu: [
{ label: '撤销', role: 'undo' },
{ label: '重做', role: 'redo' },
{ type: 'separator' },
{ label: '剪切', role: 'cut' },
{ label: '复制', role: 'copy' },
{ label: '粘贴', role: 'paste' },
],
},
{
label: '帮助',
submenu: [
{
label: '文档',
click: () => shell.openExternal('https://docs.example.com'),
},
],
},
];
// 添加 macOS 应用菜单
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' },
],
});
}
export const menu = Menu.buildFromTemplate(template);
// src/main/tray.ts
import { Tray, Menu, nativeImage } from 'electron';
import { join } from 'path';
let tray: Tray | null = null;
export function createTray() {
const icon = nativeImage.createFromPath(join(__dirname, '../../resources/icon.png'));
tray = new Tray(icon.resize({ width: 16, height: 16 }));
const contextMenu = Menu.buildFromTemplate([
{ label: '打开', click: () => {} },
{ type: 'separator' },
{ label: '退出', role: 'quit' },
]);
tray.setToolTip('我的应用');
tray.setContextMenu(contextMenu);
}
# 前提条件:需要安装 Rust
# 从 https://rustup.rs 安装
# 创建 Tauri 项目
npm create tauri-app my-tauri-app
cd my-tauri-app
# 安装依赖
npm install
# 启动开发服务器
npm run tauri dev
my-tauri-app/
├── src/ # 前端 (React, Vue 等)
│ ├── App.tsx
│ └── main.tsx
├── src-tauri/ # Tauri 后端 (Rust)
│ ├── src/
│ │ ├── main.rs # 主入口点
│ │ └── lib.rs # 命令定义
│ ├── tauri.conf.json # Tauri 配置
│ └── Cargo.toml # Rust 依赖
├── public/
└── package.json
// src-tauri/src/lib.rs
use tauri::command;
#[command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
#[command]
async fn read_file(path: &str) -> Result<String, String> {
std::fs::read_to_string(path)
.map_err(|e| e.to_string())
}
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet, read_file])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
// src/App.tsx
import { invoke } from '@tauri-apps/api/core';
function App() {
const [greeting, setGreeting] = useState('');
const handleGreet = async () => {
const result = await invoke('greet', { name: 'World' });
setGreeting(result as string);
};
const handleReadFile = async () => {
try {
const content = await invoke('read_file', { path: '/path/to/file.txt' });
console.log(content);
} catch (error) {
console.error(error);
}
};
return (
<div>
<button onClick={handleGreet}>打招呼</button>
<p>{greeting}</p>
</div>
);
}
// Web: 不可能(用户必须直接选择)
// Desktop: 自由访问
// Electron
const fs = require('fs');
fs.writeFileSync('/path/to/file.txt', 'content');
// Tauri
await invoke('write_file', { path: '/path/to/file.txt', content: 'content' });
在 Web 上不可能但在桌面上可能的事情:
- 系统托盘图标
- 全局快捷键
- 原生通知
- 拖放(文件路径访问)
- 完整的剪贴板控制
- 原生菜单
Web: 需要 Service Worker,功能有限
Desktop: 默认支持离线工作
⚠️ 服务器集成功能必须处理离线情况!
# electron-builder.yml
appId: com.example.myapp
productName: My App
directories:
buildResources: resources
files:
- '!**/.vscode/*'
- '!src/*'
- '!electron.vite.config.*'
mac:
artifactName: ${name}-${version}-${arch}.${ext}
target:
- dmg
- zip
icon: resources/icon.icns
win:
artifactName: ${name}-${version}-${arch}.${ext}
target:
- nsis
icon: resources/icon.ico
linux:
target:
- AppImage
- deb
# 执行构建
npm run build:mac
npm run build:win
npm run build:linux
// src/main/updater.ts
import { autoUpdater } from 'electron-updater';
autoUpdater.checkForUpdatesAndNotify();
autoUpdater.on('update-available', () => {
// 通知有可用更新
});
autoUpdater.on('update-downloaded', () => {
// 重启以应用更新
autoUpdater.quitAndInstall();
});
# 为当前平台构建
npm run tauri build
# 输出位置
# macOS: src-tauri/target/release/bundle/dmg/
# Windows: src-tauri/target/release/bundle/msi/
# Linux: src-tauri/target/release/bundle/appimage/
□ 决定本地数据存储方法 (SQLite, JSON 文件等)
□ 决定是否需要云同步
□ 考虑平台特定的 UI 指南 (macOS, Windows)
□ 规划键盘快捷键
□ 设计菜单结构
□ 支持深色/浅色模式
□ 处理窗口调整大小
□ 处理平台特定的 UI 差异(窗口控件位置等)
□ 不要直接暴露 Node.js API(使用 contextBridge)
□ 加载外部 URL 时的安全处理
□ 加密敏感数据存储
□ 代码签名 (macOS 公证, Windows 签名)
□ 设置自动更新
□ 应用商店提交(如果需要)
| 库 | 用途 |
|---|---|
| electron-store | 本地设置/数据存储 |
| electron-updater | 自动更新 |
| electron-log | 日志记录 |
| better-sqlite3 | SQLite 数据库 |
| 库 | 用途 |
|---|---|
| tauri-plugin-store | 设置存储 |
| tauri-plugin-sql | SQLite 支持 |
| tauri-plugin-log | 日志记录 |
| tauri-plugin-updater | 自动更新 |
"使用 Electron + React 设置一个 [应用描述] 应用项目。
- 使用 electron-vite
- 支持系统托盘
- 设置自动更新"
"实现文件打开/保存功能。
- 使用原生文件对话框
- 保存最近文件列表
- 支持拖放"
"创建 electron-builder 配置。
- macOS: DMG + 公证
- Windows: NSIS 安装程序
- 自动更新服务器集成"
每周安装量
93
仓库
GitHub 星标数
443
首次出现
Jan 29, 2026
安全审计
安装于
gemini-cli87
codex87
opencode87
github-copilot85
cursor83
amp77
A guide for developing desktop apps using web technologies (HTML, CSS, JavaScript). Support Windows, macOS, and Linux simultaneously with a single codebase.
| Framework | Tier | Recommendation | Use Case |
|---|---|---|---|
| Tauri | Tier 2 | ⭐ Primary | Lightweight (3MB), Rust security |
| Electron | Tier 3 | Supported | Mature ecosystem, VS Code-like apps |
AI-Native Recommendation : Tauri
- 35% YoY growth
- 20-40MB memory vs Electron's 200-400MB
- Mobile support (iOS/Android) via Tauri 2.0
- Rust backend = memory safety
Ecosystem Recommendation : Electron
- Mature tooling
- Node.js integration
- Proven at scale (VS Code, Slack)
Starter → Tauri (v2) [Tier 2]
- Simpler setup than Electron
- Smaller output bundles (~3MB vs ~150MB)
Dynamic → Tauri + auto-update [Tier 2]
- Includes server integration, auto-update
- Lower memory footprint
Enterprise → Tauri [Tier 2] or Electron [Tier 3]
- Tauri for performance and security
- Electron for complex Node.js integration
# Create with electron-vite (recommended)
npm create @electron-vite/create my-electron-app
cd my-electron-app
# Install dependencies
npm install
# Start development server
npm run dev
my-electron-app/
├── src/
│ ├── main/ # Main process (Node.js)
│ │ └── index.ts # App entry point, window management
│ ├── preload/ # Preload script
│ │ └── index.ts # Renderer↔Main bridge
│ └── renderer/ # Renderer process (Web)
│ ├── src/ # React/Vue code
│ └── index.html # HTML entry point
├── resources/ # App icons, assets
├── electron.vite.config.ts # Build configuration
├── electron-builder.yml # Deployment configuration
└── package.json
┌─────────────────────────────────────────────────────┐
│ Electron App │
├─────────────────────────────────────────────────────┤
│ Main Process (Node.js) │
│ - System API access (files, network, etc.) │
│ - Window creation/management │
│ - Menu, tray management │
├─────────────────────────────────────────────────────┤
│ Preload Script (Bridge) │
│ - Safe main↔renderer communication │
│ - Expose only specific APIs │
├─────────────────────────────────────────────────────┤
│ Renderer Process (Chromium) │
│ - Web UI (React, Vue, etc.) │
│ - DOM access │
│ - No direct Node.js API access (security) │
└─────────────────────────────────────────────────────┘
// src/main/index.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import { join } from 'path';
let mainWindow: BrowserWindow | null = null;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false,
},
});
// Dev mode: Load Vite server
if (process.env.NODE_ENV === 'development') {
mainWindow.loadURL('http://localhost:5173');
mainWindow.webContents.openDevTools();
} else {
// Production: Load built files
mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
}
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// IPC: Handle requests from renderer
ipcMain.handle('read-file', async (event, filePath) => {
const fs = await import('fs/promises');
return fs.readFile(filePath, 'utf-8');
});
// src/preload/index.ts
import { contextBridge, ipcRenderer } from 'electron';
// APIs to safely expose to renderer
contextBridge.exposeInMainWorld('electronAPI', {
// Read file
readFile: (filePath: string) => ipcRenderer.invoke('read-file', filePath),
// Save file dialog
saveFile: (content: string) => ipcRenderer.invoke('save-file', content),
// App version
getVersion: () => process.env.npm_package_version,
// Platform
platform: process.platform,
});
// Type definitions (for use in renderer)
declare global {
interface Window {
electronAPI: {
readFile: (path: string) => Promise<string>;
saveFile: (content: string) => Promise<void>;
getVersion: () => string;
platform: NodeJS.Platform;
};
}
}
// src/renderer/src/App.tsx
import { useState } from 'react';
function App() {
const [content, setContent] = useState('');
const handleOpenFile = async () => {
const result = await window.electronAPI.readFile('/path/to/file.txt');
setContent(result);
};
return (
<div className="app">
<h1>My Electron App</h1>
<p>Platform: {window.electronAPI.platform}</p>
<button onClick={handleOpenFile}>Open File</button>
<pre>{content}</pre>
</div>
);
}
export default App;
// src/main/menu.ts
import { Menu, app, shell } from 'electron';
const template: Electron.MenuItemConstructorOptions[] = [
{
label: 'File',
submenu: [
{ label: 'New File', accelerator: 'CmdOrCtrl+N', click: () => {} },
{ label: 'Open', accelerator: 'CmdOrCtrl+O', click: () => {} },
{ type: 'separator' },
{ label: 'Quit', role: 'quit' },
],
},
{
label: 'Edit',
submenu: [
{ label: 'Undo', role: 'undo' },
{ label: 'Redo', role: 'redo' },
{ type: 'separator' },
{ label: 'Cut', role: 'cut' },
{ label: 'Copy', role: 'copy' },
{ label: 'Paste', role: 'paste' },
],
},
{
label: 'Help',
submenu: [
{
label: 'Documentation',
click: () => shell.openExternal('https://docs.example.com'),
},
],
},
];
// Add macOS app menu
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' },
],
});
}
export const menu = Menu.buildFromTemplate(template);
// src/main/tray.ts
import { Tray, Menu, nativeImage } from 'electron';
import { join } from 'path';
let tray: Tray | null = null;
export function createTray() {
const icon = nativeImage.createFromPath(join(__dirname, '../../resources/icon.png'));
tray = new Tray(icon.resize({ width: 16, height: 16 }));
const contextMenu = Menu.buildFromTemplate([
{ label: 'Open', click: () => {} },
{ type: 'separator' },
{ label: 'Quit', role: 'quit' },
]);
tray.setToolTip('My App');
tray.setContextMenu(contextMenu);
}
# Prerequisite: Rust installation required
# Install from https://rustup.rs
# Create Tauri project
npm create tauri-app my-tauri-app
cd my-tauri-app
# Install dependencies
npm install
# Start development server
npm run tauri dev
my-tauri-app/
├── src/ # Frontend (React, Vue, etc.)
│ ├── App.tsx
│ └── main.tsx
├── src-tauri/ # Tauri backend (Rust)
│ ├── src/
│ │ ├── main.rs # Main entry point
│ │ └── lib.rs # Command definitions
│ ├── tauri.conf.json # Tauri configuration
│ └── Cargo.toml # Rust dependencies
├── public/
└── package.json
// src-tauri/src/lib.rs
use tauri::command;
#[command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
#[command]
async fn read_file(path: &str) -> Result<String, String> {
std::fs::read_to_string(path)
.map_err(|e| e.to_string())
}
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet, read_file])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
// src/App.tsx
import { invoke } from '@tauri-apps/api/core';
function App() {
const [greeting, setGreeting] = useState('');
const handleGreet = async () => {
const result = await invoke('greet', { name: 'World' });
setGreeting(result as string);
};
const handleReadFile = async () => {
try {
const content = await invoke('read_file', { path: '/path/to/file.txt' });
console.log(content);
} catch (error) {
console.error(error);
}
};
return (
<div>
<button onClick={handleGreet}>Greet</button>
<p>{greeting}</p>
</div>
);
}
// Web: Not possible (user must select directly)
// Desktop: Free access
// Electron
const fs = require('fs');
fs.writeFileSync('/path/to/file.txt', 'content');
// Tauri
await invoke('write_file', { path: '/path/to/file.txt', content: 'content' });
Things impossible on web but possible on desktop:
- System tray icon
- Global shortcuts
- Native notifications
- Drag and drop (file path access)
- Full clipboard control
- Native menus
Web: Requires Service Worker, limited
Desktop: Works offline by default
⚠️ Server integration features must handle offline!
# electron-builder.yml
appId: com.example.myapp
productName: My App
directories:
buildResources: resources
files:
- '!**/.vscode/*'
- '!src/*'
- '!electron.vite.config.*'
mac:
artifactName: ${name}-${version}-${arch}.${ext}
target:
- dmg
- zip
icon: resources/icon.icns
win:
artifactName: ${name}-${version}-${arch}.${ext}
target:
- nsis
icon: resources/icon.ico
linux:
target:
- AppImage
- deb
# Execute build
npm run build:mac
npm run build:win
npm run build:linux
// src/main/updater.ts
import { autoUpdater } from 'electron-updater';
autoUpdater.checkForUpdatesAndNotify();
autoUpdater.on('update-available', () => {
// Notify update available
});
autoUpdater.on('update-downloaded', () => {
// Restart to apply update
autoUpdater.quitAndInstall();
});
# Build for current platform
npm run tauri build
# Output locations
# macOS: src-tauri/target/release/bundle/dmg/
# Windows: src-tauri/target/release/bundle/msi/
# Linux: src-tauri/target/release/bundle/appimage/
□ Decide local data storage method (SQLite, JSON file, etc.)
□ Decide if cloud sync is needed
□ Consider platform-specific UI guidelines (macOS, Windows)
□ Plan keyboard shortcuts
□ Design menu structure
□ Support dark/light mode
□ Handle window resizing
□ Handle platform-specific UI differences (window control positions, etc.)
□ Don't expose Node.js APIs directly (use contextBridge)
□ Security handling when loading external URLs
□ Encrypt sensitive data storage
□ Code signing (macOS Notarization, Windows Signing)
□ Set up auto-update
□ App Store submission (if needed)
| Library | Purpose |
|---|---|
| electron-store | Local settings/data storage |
| electron-updater | Auto-update |
| electron-log | Logging |
| better-sqlite3 | SQLite database |
| Library | Purpose |
|---|---|
| tauri-plugin-store | Settings storage |
| tauri-plugin-sql | SQLite support |
| tauri-plugin-log | Logging |
| tauri-plugin-updater | Auto-update |
"Set up a [app description] app project with Electron + React.
- Use electron-vite
- Support system tray
- Set up auto-update"
"Implement file open/save functionality.
- Use native file dialogs
- Save recent file list
- Support drag and drop"
"Create electron-builder configuration.
- macOS: DMG + notarization
- Windows: NSIS installer
- Auto-update server integration"
Weekly Installs
93
Repository
GitHub Stars
443
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli87
codex87
opencode87
github-copilot85
cursor83
amp77
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装