0x00 开篇
上周我们写了一个短视频解析小工具，但是运行起来是一个“黑框”，那本篇文章将介绍一个 Rust 的 GUI 框架来给这个小工具“穿上衣服”。本篇文章涉及到的 GUI 框架是 Tauri和FLTK-rs。我先会做一个简单的入门介绍，然后再使用它们来包装这个短视频解析的小工具。本文并不会详细介绍 Tauri 和 FLTK-rs 的使用教程。其实 Rust 到目前为止已经出现很多 GUI 框架了，还有 iced 等等。本篇文章的阅读时间大约 12 分钟。
0x01 认识 Tauri
Tauri 类似于 Electron ，但是 Tauri 使用系统自带的网页渲染器，没有将 chromium 打进包内，所以打出包大小的体积非常小。在 Windows 上 Tauri 基于 Microsoft Edge 和 Chromium 的 WebView2（Windows 11预装，Windows 10 最新版已预装，Windows 7 可以额外下载运行时）。在Linux 和 macOS 上使用的是 WebKit。
Tauri 的界面使用 Html 、js、css来构建，支持 Vue、React 等框架。具体的业务实现逻辑使用 Rust来构建。
0x02 创建 Tauri 项目
准备工作
- 系统：Windows 11 64位
- WebView2：系统预装
- pnpm
- rust
- VSCode
创建项目
通过命令 pnpm create tauri-app 创建项目。
我这里习惯选择了 vue-ts UI 模板，可以根据自己的喜好来选择。最终项目目录如下：
然后执行命令pnpm install安装依赖，使用命令pnpm tauri dev 就是运行项目了。首次编译项目会非常慢。
在 Rust 的 main.rs 中，我们所有给前端页面的接口都需要通过tauri::generate_handler!来"注册"。
tauri::Builder::default() .invoke_handler(tauri::generate_handler![get_dy_info]) .run(tauri::generate_context!()) .expect("error while running tauri application");
前端页面需要使用 invoke() 方法来调用 Rust 的函数。注意：所有给前端的 Rust 函数都是异步返回的。
let info = await invoke("get_dy_info", { input: input.value })
我们将上一篇文章的源码稍微改动下。
Coding中...请等待...
最终效果
打包分发
首先我们要先修改tauri.conf.json 中的 identifier, 改为 com.tauri.build，然后执行命令
pnpm tauri build。
首次构建会下载 wix。当然还可以对安装包进行一些自定义的优化，详见官方文档。另外，Tauri暂不支持 portable 模式，俗称绿色版。
0x03 认识 FLTK-rs
再来了解下另一个 GUI 框架。FLTK （The Fast Light Tool Kit）是一个跨平台的轻量级GUI库，支持 Linux、Windows、MacOS。如果你觉得 Tauri 有点重或者是不熟悉前端语法，那我推荐你使用这个库，使用起来也非常简单，仅仅导入一个 crate 就可以了。
fltk = { version = "1.3.19", features = ["fltk-bundled"] }
0x04 使用 fltk-rs
简单使用
几行代码，一个窗口就可以创建。下面的代码就是创建一个窗口了。
use fltk::{app, prelude::*, window::Window}; fn main() { let app = app::App::default(); let mut wind = Window::new(100, 100, 800, 300, "hello Rust!"); wind.end(); wind.show(); app.run().unwrap(); }
移植代码，Coding中...请等待...
最终效果
说实话除了丑一点，其它还好。
0x05 小结
本篇文章主要来探讨 Rust GUI 框架目前的可行性。在桌面跨平台 GUI 方便，目前面对Flutter 、electron 等框架，Rust 还有很长的路要走。如果目前真需要用 Rust 做一些小工具，我推荐使用 tauri 。
0x06 参考资料
Tauri 官方文档：https://tauri.app/zh-cn/v1/guides/
