Tauri:rust前端框架,平替electron

前端潮流速递 : 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。

hevc?url=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FQHNaOzcBaE9cOFDmJFZM1Q0vYc9jpnUvPYtLGnfdHicJLnia2u5QpgSwgYVapMTHcySd6FZ1mDMEeweuHOSvIq4Q%2F640%3Fwx_fmt%3Dpng%26from%3Dappmsg%26tp%3Dwxpic%26wxfrom%3D5%26wx_lazy%3D1%26wx_co%3D1&type=png

 

  1. WebView2

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

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

  1. Rust

最后,请前往 https://www.rust-lang.org/zh-CN/tools/install 来安装 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 兼容绝大多数前端工具栈

hevc?url=https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FQHNaOzcBaE9cOFDmJFZM1Q0vYc9jpnUv0quGzWmSlYd0kRqOn72wx1ktrEVqlicHWY74HAuHojO7UkWlpHRG7vA%2F640%3Fwx_fmt%3Dpng%26from%3Dappmsg%26tp%3Dwxpic%26wxfrom%3D5%26wx_lazy%3D1%26wx_co%3D1&type=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 
  • 17
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Tauri 中,`App::handle`、`tauri::Builder::default()` 和 `tauri::WindowBuilder::new` 是三个重要的 API,它们分别用于处理应用程序的事件、构建 Tauri 应用程序和创建窗口。 ### App::handle `App::handle` 方法用于处理 Tauri 应用程序的事件。Tauri 是一个基于 Rust 和 Web 技术栈的框架,运行在基于 Chromium 内核的 WebView 中。`App::handle` 方法会监听应用程序的事件,例如启动、关闭、最小化、最大化等,并且可以根据这些事件来执行相应的操作。 以下是一个简单的示例,使用 `App::handle` 方法监听应用程序的启动事件,并在启动时打印一条消息: ```rust fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![my_custom_handler]) .run(tauri::generate_context!()) .expect("failed to run app"); } #[tauri::command] fn my_custom_handler() { println!("My Tauri app has started!"); } ``` ### tauri::Builder::default() `tauri::Builder::default()` 方法用于构建 Tauri 应用程序。在构建 Tauri 应用程序时,可以定义应用程序的窗口、菜单、打印机、文件选择器等属性。使用 `tauri::Builder::default()` 方法可以获取一个默认的构建器实例,你可以在此基础上进行进一步的配置。 以下是一个简单的示例,使用 `tauri::Builder::default()` 方法构建一个窗口: ```rust fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![my_custom_handler]) .run(tauri::generate_context!()) .expect("failed to run app"); } #[tauri::command] fn my_custom_handler() { let window = tauri::WindowBuilder::new() .title("My Tauri App") .build() .unwrap(); window.show().unwrap(); } ``` ### tauri::WindowBuilder::new `tauri::WindowBuilder::new` 方法用于创建窗口。在创建窗口时,可以定义窗口的标题、大小、位置、图标等属性。使用 `tauri::WindowBuilder::new` 方法可以获取一个默认的窗口构建器实例,你可以在此基础上进行进一步的配置。 以下是一个简单的示例,使用 `tauri::WindowBuilder::new` 方法创建一个窗口: ```rust fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![my_custom_handler]) .run(tauri::generate_context!()) .expect("failed to run app"); } #[tauri::command] fn my_custom_handler() { let window = tauri::WindowBuilder::new() .title("My Tauri App") .width(800) .height(600) .build() .unwrap(); window.show().unwrap(); } ``` 以上三个 API 是 Tauri 应用程序开发中的重要组成部分,通过它们可以构建 Tauri 应用程序,并且对应用程序的事件进行处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值