使用 Tauri 构建高性能桌面应用 – wiki基地

使用 Tauri 构建高性能桌面应用：告别臃肿，拥抱原生

在桌面应用开发领域，我们常常需要在性能、跨平台兼容性和开发效率之间做出权衡。传统的 Electron 应用虽然拥有强大的跨平台能力，但其底层基于 Chromium 的特性也带来了资源占用高、体积臃肿等问题，这在一定程度上限制了其在对性能有严苛要求的场景下的应用。而 Tauri，作为一个相对较新的桌面应用开发框架，为我们提供了一个更高效、更轻量级的选择。

什么是 Tauri？

Tauri 是一个开源框架，用于构建基于 Web 技术的跨平台桌面应用。与 Electron 不同的是，Tauri 并不打包整个 Chromium 浏览器，而是利用操作系统自带的 Webview 组件（例如 Windows 上的 WebView2，macOS 上的 WKWebView，Linux 上的 WebKitGTK）作为渲染引擎。这种方式极大地减少了应用的体积和资源消耗，使其拥有接近原生应用的性能体验。

Tauri 的核心优势：

极致的性能： Tauri 应用的性能与原生应用相近。由于不再打包整个 Chromium，启动速度更快，内存占用更低，CPU 消耗也更少，即使运行复杂的 Web 应用也能保持流畅。
轻量级的体积： Tauri 应用的体积通常只有几兆到十几兆，远小于 Electron 应用的数百兆。这对于用户下载、安装和更新应用来说，都更加友好。
安全可靠： Tauri 提供了强大的安全机制，可以有效地防止 XSS 和其他 Web 安全漏洞。Tauri 应用运行在一个隔离的环境中，可以限制 Web 内容的访问权限，保护用户的隐私和数据安全。
灵活的跨平台能力： Tauri 可以轻松构建运行在 Windows、macOS 和 Linux 上的桌面应用。开发者无需为不同的平台编写不同的代码，即可实现跨平台部署。
丰富的 API： Tauri 提供了丰富的 API，用于访问操作系统底层的功能，例如文件系统、网络、系统通知等。开发者可以使用这些 API 来构建功能强大的桌面应用。
强大的开发工具链： Tauri 拥有完善的开发工具链，包括命令行工具、构建工具和调试工具。开发者可以使用自己熟悉的 Web 开发技术（例如 HTML、CSS、JavaScript）来构建 Tauri 应用。
社区支持： Tauri 拥有活跃的社区支持，开发者可以在社区中获取帮助、分享经验和参与项目贡献。

Tauri 的架构：

Tauri 应用主要由以下几个部分组成：

Frontend（前端）： 使用 Web 技术（HTML、CSS、JavaScript）构建的应用界面。
Backend（后端）： 使用 Rust 编写的程序，用于处理底层逻辑、访问操作系统 API 和与前端进行通信。
WebView： 操作系统提供的 Webview 组件，用于渲染前端界面。
Tauri Core： Tauri 框架的核心组件，负责管理应用生命周期、处理跨平台差异和提供 API。

前端和后端通过消息传递机制进行通信。前端可以通过 JavaScript 调用 Tauri 提供的 API，向后端发送消息。后端接收到消息后，执行相应的操作，并将结果返回给前端。

如何使用 Tauri 构建高性能桌面应用：

1. 环境准备：

*   **安装 Rust:** Tauri 是用 Rust 编写的，因此首先需要安装 Rust 编程语言。可以通过 Rust 官方网站下载并安装 Rust 工具链：[https://www.rust-lang.org/](https://www.rust-lang.org/)
*   **安装 Node.js 和 npm/yarn/pnpm:** Tauri 使用 Node.js 和包管理器来管理前端依赖。请确保已安装 Node.js 和其中一个包管理器。
*   **安装 Tauri CLI:** 使用 npm 安装 Tauri CLI：`npm install -g @tauri-apps/cli` (或者使用 yarn 或 pnpm)。
*   **安装 Webview 依赖:** 根据目标平台，安装相应的 Webview 依赖。例如，在 Windows 上需要安装 WebView2。

2. 创建 Tauri 项目：

使用 Tauri CLI 创建一个新的 Tauri 项目：

```bash
tauri init
```

在项目创建过程中，Tauri CLI 会询问一些问题，例如应用名称、窗口标题、前端框架等。根据自己的需求进行选择。你可以选择使用 Vanilla.js，React，Vue，Svelte 等流行的前端框架。

3. 目录结构：

Tauri 项目的目录结构如下：

```
my-tauri-app/
├── src/            # 前端代码
│   ├── index.html  # HTML 文件
│   ├── script.js   # JavaScript 文件
│   └── style.css   # CSS 文件
├── src-tauri/      # 后端代码
│   ├── src/        # Rust 代码
│   │   └── main.rs   # 主程序入口
│   ├── Cargo.toml  # Rust 包管理器配置文件
│   └── tauri.conf.json  # Tauri 配置文件
├── package.json    # npm 配置文件
└── ...
```

4. 编写前端代码：

在 `src` 目录下编写前端代码。可以使用 HTML、CSS 和 JavaScript 来构建应用界面。可以使用你熟悉的 Web 开发技术和前端框架。

例如，在 `src/index.html` 中添加一个简单的按钮：

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Tauri App</title>
  </head>
  <body>
    <button id="greet-button">Greet</button>
    <div id="greet-message"></div>

    <script src="script.js"></script>
  </body>
</html>
```

在 `src/script.js` 中添加 JavaScript 代码，用于响应按钮点击事件，并调用 Tauri API 向后端发送消息：

```javascript
const { invoke } = window.__TAURI__.tauri;

document.getElementById('greet-button').addEventListener('click', async () => {
  const message = await invoke('greet', { name: 'Tauri' });
  document.getElementById('greet-message').textContent = message;
});
```

5. 编写后端代码：

在 `src-tauri/src/main.rs` 中编写后端代码。可以使用 Rust 编程语言来处理底层逻辑、访问操作系统 API 和与前端进行通信。

例如，在 `src-tauri/src/main.rs` 中添加一个名为 `greet` 的函数，用于接收前端发送的消息，并返回一个问候语：

```rust
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

**注意：** 需要在 `Cargo.toml` 文件中添加 `tauri` 作为依赖项。

6. 配置 Tauri：

在 `src-tauri/tauri.conf.json` 文件中配置 Tauri 应用的各种属性，例如应用名称、窗口大小、安全策略等。

```json
{
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../src",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "my-tauri-app",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/[email protected]",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "com.example.my-tauri-app",
      "longDescription": "",
      "macOS": {
        "entitlements": null,
        "exceptionDomain": "",
        "frameworks": [],
        "providerShortName": null,
        "signingIdentity": null
      },
      "resources": [],
      "shortDescription": "",
      "targets": "all",
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "My Tauri App",
        "width": 800
      }
    ]
  }
}
```

7. 构建和运行应用：

使用 Tauri CLI 构建和运行应用：

```bash
tauri dev  # 开发模式
tauri build  # 构建发布版本
```

`tauri dev` 命令会启动一个开发服务器，并自动重新加载前端代码。`tauri build` 命令会将应用打包成一个可执行文件，可以分发给用户。

最佳实践：

优化前端代码： 减少 DOM 操作，避免不必要的重绘和回流，使用高效的算法和数据结构。
使用异步操作： 对于耗时的操作，使用异步操作（例如 async/await）来避免阻塞 UI 线程。
合理使用 Tauri API： 只在必要的时候才调用 Tauri API，避免频繁的跨进程通信。
进行性能测试： 在不同的平台和设备上进行性能测试，找到性能瓶颈并进行优化。
利用 Rust 的强大功能： 使用 Rust 的特性（例如零成本抽象、内存安全）来构建高性能的后端代码.

高级技巧：

插件开发： Tauri 允许开发者编写自定义插件，扩展应用的功能。
使用系统托盘： Tauri 可以创建系统托盘图标，方便用户管理应用。
集成原生 UI 组件： Tauri 允许开发者集成原生 UI 组件，例如菜单栏、对话框等。
使用 Webview 特性： 熟悉并利用各个平台 Webview 的特性，可以进一步提升应用的性能和体验。例如，可以利用 GPU 加速进行渲染。

Tauri vs Electron：

特性	Tauri	Electron
性能	接近原生应用	较低
体积	非常小	较大
安全性	更安全	相对较低
跨平台	优秀	优秀
开发语言	Rust (后端), Web 技术 (前端)	JavaScript, HTML, CSS
底层架构	系统 Webview 组件	Chromium

总结：

Tauri 是一个非常有潜力的桌面应用开发框架，它拥有高性能、轻量级、安全可靠等优点。对于需要构建高性能桌面应用的开发者来说，Tauri 是一个值得尝试的选择。虽然 Tauri 相对于 Electron 来说还比较年轻，但其社区正在快速发展，相信在未来会有更多的开发者加入到 Tauri 的行列中，共同推动 Tauri 的发展。通过本文的详细描述，希望能帮助你快速上手 Tauri，构建出令人惊艳的高性能桌面应用。拥抱 Tauri，告别臃肿，拥抱原生！

使用 Tauri 构建高性能桌面应用：告别臃肿，拥抱原生

发表评论 取消回复

发表评论取消回复