＜Rust＞＜Tauri＞RustGUI框架Tauri2.0体验，窗口页面的生成（本地js和Vite框架）

news/2024/10/26 15:16:33/

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

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

概述
本文是专栏的第二篇，主要是介绍下在新版Tauri2.0下如何创建rust GUI窗口，实现简单的前后端互联。
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>