Electron的平替Tauri

咔咔咔咔咔咔fofofo
1,345 阅读10分钟

Electron的平替Tauri

经常写Electron的朋友肯定知道 , 随便写点东西打包之后非常的大,并且每个窗口都是一个新的进程，占据大量内存,即使特点也是诟病.

所以由Rust语言实现的Tauri 于 2022 年 6 月发布了,

Tauri 的前端实现也是基于 Web 系列语言，Tauri 的后端使用 Rust。Tauri 可以创建体积更小、运行更快、更加安全的跨平台桌面应用。

Electron 和 Tauri 之间的一些主要区别：

  1. 底层技术：

    • Electron： 使用 Chromium 作为底层渲染引擎，这是一个完整的浏览器引擎。这使得 Electron 具有强大的 Web 技术支持，但也导致了较大的二进制文件和较高的资源占用。
    • Tauri： 使用 Web 技术（通常是基于 Rust 的 WebView 组件）来构建用户界面，而不依赖完整的浏览器引擎。这可以减小应用的体积，并且在资源使用上相对较轻量。

  2. 语言：

    • Electron： 使用 JavaScript、HTML 和 CSS 进行应用程序的开发。主要的开发语言是 JavaScript。
    • Tauri： 允许使用多种语言，但其核心是用 Rust 编写的，开发者可以使用任何与 Rust 集成良好的语言（如 JavaScript、TypeScript、Python 等）来构建应用。

  3. 性能和资源占用：

    • Electron： 由于包含完整的浏览器引擎，可能在性能和资源占用方面较大。启动时间和内存占用可能相对较高。
    • Tauri： 由于采用了轻量级的 WebView 组件，Tauri 的性能和资源占用通常较为轻量。

  4. 构建和打包：

    • Electron： Electron 提供了一套完整的开发工具和打包工具，使得构建和打包相对简单。
    • Tauri： Tauri 通过使用 Rust 的工具链和一些辅助工具来构建和打包应用。这可能对不熟悉 Rust 的开发者来说有一些学习曲线。

  5. 生态系统：

    • Electron： 有一个庞大的社区和生态系统，丰富的插件和工具可以用于增强 Electron 应用的功能。
    • Tauri： Tauri 目前相对较新，社区和插件生态系统相对较小。这可能会在一些功能需求上受到限制。

  6. 目标用户群：

    • Electron： 适用于那些对于使用完整的浏览器引擎的 Web 技术有需求的应用。
    • Tauri： 更适用于对于性能和资源占用有较高要求、以及对 Rust 或其他编程语言有兴趣的开发者。

开始使用

预先准备

首先您需要安装 Rust 及其他系统依赖。 请记住，只有在开发 Tauri 应用时才需要此设置。 您程序的用户不需要进行下列操作。

Windows 中
  1. Microsoft Visual Studio C++ 生成工具

需要安装 Microsoft C++ 生成工具。 最简单的方法是下载 Visual Studio 2022 生成工具。 进行安装选择时，请勾选 "C++ 生成工具" 和 Windows 10 SDK。

PixPin_2023-12-18_10-05-20.png

  1. WebView2

Tauri 需要 WebView2 才能在 Windows 上呈现网页内容，所以您必须先安装 WebView2。 最简单的方法是从微软网站下载和运行常青版引导程序。

安装脚本会自动为您下载适合您架构的版本。 不过，如果您遇到问题 (特别是 Windows on ARM)，您可以自己手动选择正确版本。

  1. Rust

最后，请前往 www.rust-lang.org/zh-CN/tools… 来安装 rustup (Rust 安装程序)。 请注意，为了使更改生效，您必须重新启动终端，在某些情况下需要重新启动 Windows 本身。

或者，您可以在 PowerShell 中使用 winget 命令安装程序：

winget install --id Rustlang.Rustup
MacOS中
  1. CLang 和 macOS 开发依赖项

您将需要安装 CLang 和 macOS 开发依赖项。 为此，您需要在终端中执行以下命令：

xcode-select --install
  1. Rust

要在 macOS 上安装 Rust，请打开终端并输入以下命令：

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

快速开始

Tauri 兼容绝大多数前端工具栈。

PixPin_2023-12-15_16-00-33.png

官方文档推荐使用 [create-tauri-app]脚手架来创建 Tauri 项目，它支持原生 HMTL/CSS/Javascript，也支持其他前端框架，如 React、Vue、Svelte。文档推荐使用 Vite 来构建前端应用。

` yarn create tauri-app

创建的过程中，会提示输入项目名和选择一个包管理工具，其中 cargo 是 rust 的包管理工具，我们选择自己熟悉的即可：

接着是选择一个 UI 模板，这里我们选择使用 react：

安装好依赖后，启动项目：

yarn tauri dev

之后就是开发了 页面基本和开发vue一样没区别

打包应用只需要运行 build 命令即可：

yarn tauri build

打包完成后，会在 src-tauri/target/release/bundle 目录下生成相应的应用安装执行文件

PixPin_2023-12-18_13-46-55.png

整体构成

  1. Tauri 核心 (Tauri Crate):

    • tauri.conf.json: 一个配置文件，定义应用程序的各种属性和行为，如窗口样式、图标等。在编译时读取，用于生成配置结构体。
    • Cargo.toml: Rust 项目配置文件，其中包含了 Tauri 应用的元信息和依赖。
    • tauri-build: 应用 Tauri 宏的构建工具，用于在构建时应用宏以实现一些特殊功能，如 script 注入、图标压缩等。
    • tauri-macros: 通过 tauri-codegen 为上下文创建宏，处理器和命令 crate。
    • tauri-codegen: 嵌入、哈希和压缩资产，包括应用程序图标和系统托盘图标。在编译时解析 tauri.conf.json 并生成 Config 结构体。

  2. Tauri Runtime:

    • tauri-runtime: Tauri 核心的运行时部分，负责处理底层系统交互、脚本注入、更新流程等。
    • tauri-runtime-wry: 面向 WRY 的运行时，提供直接的系统级交互，如打印、监视器检测以及与窗口相关的任务。

  3. Tauri 工具库:

    • API (JavaScript/TypeScript): 为前端框架提供的 TypeScript 库，创建 CommonJS 和 ES Modules 的 JavaScript 端点，以便 WebView 可以调用和监听后端活动。
    • Bundler (Rust/Shell): 用于构建 Tauri 应用程序的库，检测或接收平台信息并生成相应的可执行文件。支持 macOS、Windows 和 Linux，并计划在未来支持移动平台。
    • cli.rs (Rust): 用于所有需要 CLI 的活动的 Rust 可执行文件，可在 macOS、Windows 和 Linux 上运行。
    • cli.js (JavaScript): 由 napi-rs 构建的 cli.rs 的包装器，用于为各个平台构建 npm 包。

  4. 创建工具:

    • create-tauri-app (JavaScript): 用于快速搭建新的 Tauri 应用项目的工具包，允许工程团队快速创建 Tauri 应用，并支持不同的前端框架。

  5. 附加工具:

    • tauri-action: 为 GitHub 上的所有平台构建 Tauri 二进制文件的 GitHub 工作流程。即使没有设置 Tauri，也允许创建基本的 Tauri 应用程序。
    • tauri-vscode: 通过增强 Visual Studio Code 界面提供功能的项目。
    • vue-cli-plugin-tauri: 允许在 vue-cli 项目中快速安装 Tauri。

  6. 上游速率:

    • TAO (窗口创建): Rust 中的跨平台应用程序窗口创建库，支持 Windows、macOS、Linux、iOS 和 Android。
    • WRY (WebView 渲染): Rust 中的跨平台 WebView 渲染库，支持 Windows、macOS 和 Linux。

进阶使用

调试web端可打开调试器进行调试,Windows 上使用 Ctrl + Shift + i 快捷方式 ，在 macOS 上使用 Command + Option + i

调试rust控制台 例如 tauridev。 您可以使用以下代码从 Rust 文件中将某些内容打印到该控制台

println!("Message from Rust: {}", msg);

有时你的 Rust 代码中可能会有错误，而 Rust 编译器可以给你很多信息。 例如，如果 tauri dev 崩溃，您可以在 Linux 和 macOS 上像这样重新运行它：

RUST_BACKTRACE=1 tauri dev

或者在Windows上可以这样：

set RUST_BACKTRACE=1 
tauri dev

Tauri 与 Rust 交互通信方式

rust端

rust 代码编写在/src-tauri/src/main.rs 文件下中定义的. 要创建一个命令，只需添加一个函数，并使用 #[tauri::command] 注释：

// 创建一个my_custom_command的方法，并且返回一个字符串
#[tauri::command]
fn my_custom_command(_str:String)->String{ 
    let _res_str = format!("接受参数为{}",_str);
    _res_str 
}
​

invoke_handler向外部暴露这个函数

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet,my_custom_command])//多个用逗号隔开
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

web端

在需要用的页面导入

import { invoke } from "@tauri-apps/api/tauri";
​
//使用
  const ckickEvent = async () => {
    let str = 'web字符串'
    let res=await invoke("my_custom_command", { str: str, });
​
    console.log(res,"===str===");
    
  }

结果

PixPin_2023-12-18_10-44-48.png

窗口菜单

以下操作都在/src-tauri/src/main.rs 文件下

创建菜单

要创建本机窗口菜单，请导入 Menu、Submenu、MenuItem 和 CustomMenuItem 类型。 MenuItem 枚举包含一系列特定平台的项（目前在 Windows 上没有实现）。 CustomMenuItem 允许创建自己的菜单项并为它们添加特殊的功能。

use tauri::{CustomMenuItem, Menu, MenuItem, Submenu};

创建 Menu 实例

    let quit = CustomMenuItem::new("caidan11".to_string(), "菜单1-1");
    let close = CustomMenuItem::new("caidan12".to_string(), "菜单1-2");
    let submenu = Submenu::new("菜单1", Menu::new().add_item(quit).add_item(close));
    let menu = Menu::new()
    .add_native_item(MenuItem::Copy)//将本机项添加到菜单。
    .add_item(CustomMenuItem::new("caidan2", "菜单2"))//将自定义菜单项添加到菜单中
    .add_submenu(submenu);//添加带有子菜单的条目

添加到所有窗口

fn main() {
    let quit = CustomMenuItem::new("caidan11".to_string(), "菜单1-1");
    let close = CustomMenuItem::new("caidan12".to_string(), "菜单1-2");
    let submenu = Submenu::new("菜单1", Menu::new().add_item(quit).add_item(close));
    let menu = Menu::new()
    .add_native_item(MenuItem::Copy)//将本机项添加到菜单。
    .add_item(CustomMenuItem::new("caidan2", "菜单2"))//将自定义菜单项添加到菜单中
    .add_submenu(submenu);//添加带有子菜单的条目
    
    tauri::Builder::default()
        .menu(menu)// 添加到所有
        // 监听 点击的菜单
        .on_menu_event(|event| {
            match event.menu_item_id() {
              "caidan2" => {
                // std::process::exit(0);
                println!("event caidan2");
              }
              "caidan11" => {
                // event.window().close().unwrap();
                println!("event caidan11");
              }
              "caidan12" => {
                // event.window().close().unwrap();
                println!("event caidan12");
              }
              _ => {}
            }
          })
        .invoke_handler(tauri::generate_handler![greet,my_custom_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Tauri2.0展望

2023 年 9 月 7 日 公布 了 未来的 发展路线.

实际上，Tauri 2.0 版本就是一次全新的移动端升级。但是，2.0 版本不仅仅局限于移动端，它还带来了许多其他的功能：

强大的插件系统：Tauri 的很多 API 现在都使用了更先进的插件系统。这不仅使得 Tauri 的代码更加模块化和易于维护，还使得插件系统对于开发者来说更加强大，能够轻松构建自己的插件。

Swift 和 Kotlin 插件支持：现在你可以用 Swift 和 Kotlin 编写专门针对平台的代码了。Tauri 自 1.0 版本以来一直提供了 Rust 和 JavaScript 代码之间的桥梁。在 Tauri 2.0 中，插件开发者将能够使用 Swift 和 Kotlin 编写代码，更加紧密地与他们正在为之开发的系统集成。

支持 iOS 和 Android：你将能够构建 Tauri 应用，并在 iOS 和 Android 设备上运行。

我们已经看到开发者们在 Tauri 2.0 的预发布版本上取得了一些惊人的成就，我们迫不及待地想要发布稳定版本，让每个人都能体验到这一切。

总结

建议前端的同学深入学习下Rust语言,Tauri 的核心是基于 Rust 的，因此对 Rust 语言的熟悉将是一个优势,可以更好地编写 Tauri 插件和处理底层操作系统交互,利用 Rust 插件扩展应用程序的功能,通过 Rust 插件，编写性能更高的底层代码，与 JavaScript/TypeScript 代码进行无缝集成,感受强大的Rust语言的能力.

avatar
文章
阅读
粉丝