如何用JavaScript构建一个跨平台的桌面应用(使用Electron或Tauri)?

electron和Tauri均可使用javaScript开发跨平台桌面应用,但Electron基于Chromium和Node.js,体积大、生态成熟,适合快速开发;Tauri采用rust构建核心,体积小、性能高、安全性强,适合追求轻量和性能的项目。

如何用JavaScript构建一个跨平台的桌面应用(使用Electron或Tauri)?

构建跨平台桌面应用,Electron 和 Tauri 是目前最主流的两个选择。它们都能用 javascript(或前端技术)开发 windowsmacoslinux 应用,但设计理念和性能特点不同。下面分别介绍如何使用它们快速搭建一个基础桌面应用。

使用 Electron 快速创建桌面应用

Electron 让你用 htmlcss 和 JavaScript 构建桌面程序,背后是 Chromium 和 Node.js。适合熟悉 Web 开发的开发者。

步骤:

  • 初始化项目:
    创建文件夹并运行 npm init -y
  • 安装 Electron:
    npm install electron --save-dev
  • 创建主进程文件(main.js):

在项目根目录创建 main.js

立即学习Java免费学习笔记(深入)”;

const { app, BrowserWindow } = require('electron') <p>function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false } })</p><p>win.loadFile('index.html') }</p><p>app.whenReady().then(() => { createWindow()</p><p>app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) })</p><p>app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })</p>
  • 创建页面文件(index.html):

创建 index.html

<pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html>   <head>     <title>我的桌面应用</title>   </head>   <body>     <h1>Hello from Electron!</h1>   </body> </html> 
  • 配置启动脚本:
    在 package.json 中添加:
    "main": "main.js",<br><code>"scripts": { "start": "electron ." }
  • 运行应用:
    npm start

打包发布可用 electron-builderelectron-packager,生成各平台可执行文件。

使用 Tauri 构建更轻量的桌面应用

Tauri 使用 Rust 构建核心,前端仍可用 JS/HTML/CSS,但体积更小、安全性更高,适合追求性能和小巧的应用。

如何用JavaScript构建一个跨平台的桌面应用(使用Electron或Tauri)?

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台,一站式模型+应用平台

如何用JavaScript构建一个跨平台的桌面应用(使用Electron或Tauri)?35

查看详情 如何用JavaScript构建一个跨平台的桌面应用(使用Electron或Tauri)?

前提:

  • 安装 Rust(官网 rustup.rs)
  • node.js 环境

步骤:

  • 创建前端项目(如 Vite + react/vue 或纯 HTML):
    npm create vite@latest my-tauri-app -- --template vanilla
    进入目录并安装依赖:cd my-tauri-app &amp;&amp; npm install
  • 添加 Tauri:
    npm install @tauri-apps/cli --save-dev
    npx tauri init

Tauri 会生成 src-tauri 目录,包含 Rust 配置和主函数。

  • 开发时运行前端服务:
    在 package.json 添加:"dev": "vite"
    启动命令:npm run dev
  • 启动 Tauri 应用:
    npm install electron --save-dev0 —— 会打开桌面窗口加载本地服务
  • 打包应用:
    npm install electron --save-dev1 —— 生成各平台二进制文件,体积通常小于 5MB

Tauri 支持通过 invoke 调用 Rust 函数,实现文件操作、系统交互等原生功能,同时保持前端开发体验。

Electron 与 Tauri 的关键区别

  • 性能与体积:Tauri 更轻更快,每个应用自带 webview,不捆绑浏览器;Electron 捆绑 Chromium,包体积大(通常 >100MB)
  • 语言:Electron 主要用 JS/Node.js;Tauri 前端用 JS,后端逻辑推荐用 Rust
  • 安全性:Tauri 默认更安全,权限可控;Electron 需手动配置防止远程代码执行
  • 生态:Electron 插件丰富(如 auto-updater、crash-reporter);Tauri 生态较新但增长快
  • 调试:Electron 调试像网页;Tauri 需兼顾前端和 Rust 日志

选型建议:若追求开发速度和成熟生态,选 Electron;若重视性能、体积和安全,且愿意学习 Rust,Tauri 是更好选择。

基本上就这些,两种方式都能用 JavaScript 构建跨平台桌面应用,根据项目需求灵活选择。

上一篇
下一篇
text=ZqhQzanResources