欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 手游 > <Rust><Tauri>RustGUI框架Tauri2.0体验,窗口页面的生成(本地js和Vite框架)

<Rust><Tauri>RustGUI框架Tauri2.0体验,窗口页面的生成(本地js和Vite框架)

2025/9/15 10:14:22 来源:https://blog.csdn.net/normer123456/article/details/143147767  浏览:    关键词:<Rust><Tauri>RustGUI框架Tauri2.0体验,窗口页面的生成(本地js和Vite框架)

前言
本专栏是关于tauri这个rustGUI库的一些实例合集,会讲解一些前端(javascript)和后端(rust)的功能实现的实例代码,但是请注意,本专栏专注实例实现,不关心非常具体的实现逻辑,即没有源代码的详细讲解。

环境配置
系统:windows
平台:visual studio code
语言:javascript、rust
库:tauri
版本:2.0

概述
本文是专栏的第二篇,主要是介绍下在新版Tauri2.0下如何创建rustGUI窗口,实现简单的前后端互联。
1、本地前端UI
2、基于vite框架的前端UI

系列博客链接
1、<Rust><GUI>rust语言GUI库tauri体验:前、后端结合创建一个窗口并修改其样式

需要注意的是,本文是建立在新的2.0版本上,下面是tauri2.0的改变:
tauri2.0 changelog截取:

Added
Added Mobile support.
Added multiwebview support behind the unstable feature flag. See WindowBuilder and WebviewBuilder for more information.
Added rustls-tls cargo feature flag
Added shadow option when creating a webview window,WebviewWindow::set_shadow method in Rust and equivalent API in JS.
Added tauri::Webview, tauri::WebviewBuilder, tauri::WebviewWindow, tauri::WebviewWindowBuilder structs in Rust and equivalent classes in Js. The old tauri::Window and tauri::WindowBuilder behaviors have moved to tauri::WebviewWindow and tauri::WebviewWindowBuilder.
Added tauri::scope::fs module
Added tauri::App/AppHandle::default_window_icon method.
Added tauri::ipc module with IPC primitives.
Added tauri::ipc::Channel type and equivalent JS Channel type to send data across the IPC.
Added incognito option when creating a webview window.
Added windowEffects option when creating a webview window and WebviewWindow::set_effects to try and change effects at runtime.

如果想要了解更详细的,可以参看官网:
https://tauri.app/zh-cn/blog/tauri-20/

下面我们将基于官网的指导示例,来创建一个简单tauri项目,以及运行生成窗口。

前排提示:
本文所基于的,是在windows系统上使用,工具是vscode,语言是rust,前端包括html、javascript,所以,你需要的前提条件,包括安装rust和vscode等。

接下来,我们将一步步介绍如何创建、运行一个tauri2.0的桌面项目。

本地前端UI

step1:打开vscode,并创建新的项目文件夹

mkdir tauri2-test
cd tauri2-test

然后先在这个文件夹内,创建一个ui文件夹,用于添加html前端代码:

tauri2-test>mkdir ui

然后,在创建的ui文件夹内,新建一个html文件,里面填充一些基本的代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>文档</title></head><body><h1>这是来自 Tauri 的欢迎!</h1></body>
</html>

以上步骤完成,先放置,以作备用。

step2:初始化一个tauri项目
我们先回到刚刚创建的项目文件夹tauri2-test下,输入以下指令:

tauri2-test>cargo tauri init

当然,输入这个指令有个前提,就是需要先安装Tauri CLI,指令如下:

cargo instal

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词