一听到“电脑端小程序”这个说法，第一反应是“小程序不是手机上用的吗？”这其实是混淆了“运行平台”和“开发框架”的概念。手机上的小程序，本质上是基于微信、支付宝这类超级App的容器环境运行的轻量应用。而“电脑端小程序”，通常指两件事：一是把手机小程序直接移植到PC微信里运行，二是用前端技术（比如Electron、Tauri、NW.js）给Windows或macOS做一个小而美的桌面工具。今天咱们就重点聊后者——怎么用前端技术，给自己或团队做一个真正能双击打开、装在电脑上的小程序。

一、先搞清楚你需要的到底是哪种“电脑端小程序”

如果你只是想让微信小程序在电脑上能打开，那其实什么都不用做——PC版微信已经支持大部分小程序直接运行，只是屏幕适配可能有点别扭。但如果你想要的是一个独立的、不依赖微信的桌面工具，那就要选对技术路线。举个例子：你想做一个公司内部用的“文件批量重命名工具”，或者一个“截图贴图工具”，这种需求用Electron最顺手。但如果你只是想把一个网页包装成桌面应用，那Tauri可能更轻量。别一上来就“我要做小程序”，先问自己：这个工具需要访问本地文件系统吗？需要调用系统级API（比如快捷键、托盘图标、通知）吗？如果答案是“是”，那就跳进桌面端开发的世界。

二、选工具链：Electron vs Tauri，别盲目跟风

现在最火的两个选择是Electron和Tauri。Electron的好处是生态成熟，文档全，遇到问题随便一搜就有答案。坏处是打包出来的应用体积大（一个Hello World就要100多MB），内存占用也高。Tauri是后起之秀，用Rust做底层，前端随便你用Vue、React还是Svelte，打包体积小（几MB到十几MB），性能更好。但Tauri的坑也明显：它调用系统API的能力虽然强，但需要写Rust代码，如果你对Rust不熟，光是配置环境就能劝退一半人。我的建议是：如果你只是为了做一个内部工具，团队里只有前端开发者，那就老老实实用Electron，省心。如果你追求极致体积，并且愿意花一周时间啃Rust基础，Tauri会让你很爽。举个例子，我去年用Tauri做了一个“Markdown笔记工具”，打包后只有8MB，而同样的功能用Electron做出来是120MB，差别肉眼可见。

三、从零搭建一个Electron项目，像讲课一样拆解每一步

咱们以Electron为例，因为上手最快。假设你已经装了Node.js，打开终端，先创建一个空文件夹：mkdir my-desktop-app && cd my-desktop-app。然后初始化项目：npm init -y。接着安装Electron：npm install electron --save-dev。这时候你会看到一个package.json文件，手动在里面加一行脚本："start": "electron ."。然后创建入口文件main.js，写下面这段核心代码：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 允许渲染进程使用Node.js
      contextIsolation: false // 关闭上下文隔离（注意：生产环境建议开启）
    }
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

再创建一个index.html，随便写点内容，比如<h1>我的第一个桌面小程序</h1>。然后在终端运行npm start，如果一切顺利，你会看到一个窗口弹出来。到这里，你已经完成了一个最简单的桌面应用。但别急着高兴，这里有几个坑要提前说：nodeIntegration和contextIsolation的设置直接影响安全性，如果你在开发内部工具（不面向外部用户），可以暂时关掉隔离，这样写代码方便。但如果你打算分发给别人用，一定要开启隔离，用preload.js来暴露安全的API。

四、让小程序真正“有用”：集成文件操作和系统托盘

光能显示网页不算什么，桌面端小程序的核心价值是访问本地资源。比如你想做一个“图片压缩工具”，用户拖入一张图片，程序自动压缩并保存。在Electron里，你可以用dialog.showOpenDialog让用户选择文件，用fs模块读写文件。举个例子，在main.js里添加一个IPC通信：

const { ipcMain, dialog } = require('electron');

ipcMain.handle('select-file', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
  });
  return result.filePaths[0];
});

然后在渲染进程（你的HTML页面）里，通过window.electronAPI调用这个方法。这里要注意，如果你开启了contextIsolation，就需要在preload.js里用contextBridge暴露接口：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  selectFile: () => ipcRenderer.invoke('select-file')
});

这样你的前端代码就能安全地调用系统对话框了。再比如系统托盘，很多小工具需要常驻后台，比如一个“剪贴板历史管理器”。在main.js里创建Tray对象：

const { Tray, Menu } = require('electron');
let tray = new Tray('icon.png');
const contextMenu = Menu.buildFromTemplate([
  { label: '显示窗口', click: () => mainWindow.show() },
  { label: '退出', click: () => app.quit() }
]);
tray.setContextMenu(contextMenu);

这样你的应用就能最小化到系统托盘里，点击图标弹出菜单。很多用户喜欢这种“不打扰”的体验，尤其是在做效率工具时。

五、打包和分发：别让你的小程序卡在“只能自己用”

开发完了，怎么给别人用？Electron官方推荐electron-builder或electron-forge。以electron-builder为例，安装：npm install electron-builder --save-dev，然后在package.json里添加：

"build": {
  "appId": "com.example.myapp",
  "productName": "我的小程序",
  "directories": { "output": "dist" },
  "win": { "target": "nsis" },
  "mac": { "target": "dmg" }
}

运行npx electron-builder，等几分钟，你就能在dist文件夹里看到一个安装包。这里有个常见问题：打包后应用打不开，报错“找不到模块”。这通常是因为你在代码里用了__dirname或require了相对路径，打包后路径变了。解决办法是用app.getAppPath()获取应用根目录，或者把资源文件放在static文件夹里，用process.resourcesPath引用。还有一个容易被忽略的点：如果你用了原生模块（比如node-pty、sharp），打包时需要重新编译，用electron-rebuild工具搞定。

六、一个真实案例：我做的“截图OCR工具”踩过的坑

去年我给自己做了一个桌面小工具：按下快捷键截图，自动识别图片中的文字并复制到剪贴板。技术选型是Electron + Tesseract.js。刚开始一切顺利，但打包后发现问题：Tesseract.js需要加载语言包文件，打包后路径不对。折腾了两天才解决——把语言包放到extraResources里，然后在代码里用path.join(process.resourcesPath, 'tessdata')引用。还有一个坑：快捷键注册。Electron的globalShortcut只能在主进程注册，但截图功能需要隐藏窗口并捕获全屏，这里涉及到主进程和渲染进程的复杂通信。最终方案是：主进程监听快捷键，然后通过BrowserWindow.getAllWindows()[0].webContents.send('capture')通知渲染进程，渲染进程再用desktopCapturer获取屏幕流。这个流程听起来简单，但实际调试时发现desktopCapturer在Windows上需要设置enableRemoteModule: true（虽然不推荐，但为了功能只能妥协）。所以如果你也想做类似工具，建议先用robotjs或screenshot-desktop这类第三方库来截图，避免踩desktopCapturer的坑。

七、对比一下：什么时候用Tauri更划算？

如果你对应用体积有执念，或者你的工具需要频繁调用系统API（比如文件监控、进程管理），Tauri是更好的选择。同样做一个“文件同步工具”，Tauri打包后不到10MB，而Electron轻松破百。但代价是：你需要写Rust。举个例子，在Tauri里监听文件变化，前端代码调用invoke('watch_folder', { path: '/users/xxx' })，然后在Rust端用notify库实现：

#[tauri::command]
fn watch_folder(path: String) -> Result<(), String> {
    let (tx, rx) = std::sync::mpsc::channel();
    let mut watcher = notify::recommended_watcher(move |res| {
        match res {
            Ok(event) => tx.send(event).unwrap(),
            Err(e) => eprintln!("watch error: {:?}", e),
        }
    }).map_err(|e| e.to_string())?;
    watcher.watch(Path::new(&path), RecursiveMode::Recursive).map_err(|e| e.to_string())?;
    // 这里需要把事件发回前端，实际用tauri的Event API
    Ok(())
}

这比Electron的fs.watch复杂，但性能更好，而且不会因为Node.js的事件循环阻塞而漏掉文件变化。如果你团队里有Rust开发者，或者你愿意学，Tauri的回报率很高。

八、给你的小程序加点“独特性”：自定义窗口和快捷键

很多桌面工具看起来像“套壳网页”，就是因为窗口样式太普通。Electron允许你隐藏默认标题栏，自己画一个：在BrowserWindow里设置frame: false，然后在前端用CSS实现拖拽区域（-webkit-app-region: drag）和关闭按钮。这样你的应用看起来就像原生的一样。再比如快捷键，除了globalShortcut，你还可以用Menu的accelerator属性给菜单项绑定快捷键，或者用webContents的before-input-event事件监听组合键。我个人喜欢把Ctrl+Shift+F设为“快速搜索”功能，类似于Spotlight，这样用户在任何窗口都能呼出你的工具。

最后说一点：别想着一步到位做一个“完美”的桌面小程序。先做出一个能解决你当前痛点的最小版本，比如“一键重命名文件”或者“定时提醒喝水”，然后根据实际使用反馈迭代。桌面端开发的乐趣就在于，你做出来的东西是真正“属于你自己”的工具，不用受限于任何平台的规则。