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

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

2025-03-23 11:03:12 前端知识 前端哥 769 677 我要收藏

前言
本专栏是关于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
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/24258.html
标签
rust
评论
发布的文章

【Linux笔记】基础IO(上)

2025-03-27 13:03:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
浏览器升级提示:您的浏览器版本较低,建议您立即升级为知了极速浏览器,极速、安全、简约,上网速度更快!立即下载
复制成功!