您的位置:首页 > 汽车 > 新车 > <Rust><GUI>rust语言GUI库tauri体验:前、后端结合创建一个窗口并修改其样式

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

2024/10/14 4:38:47 来源:https://blog.csdn.net/normer123456/article/details/140457048  浏览:    关键词:<Rust><GUI>rust语言GUI库tauri体验:前、后端结合创建一个窗口并修改其样式

前言
本文是rust语言下的GUI库:tauri来创建一个窗口的简单演示,主要说明一下,使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等,所以,这也是一个专栏,将包括tauri库的多个方面。
在这里插入图片描述

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

概述
本文是tauri库系列博文的第一篇,主要是简单实现一个窗口程序并成功运行,当然,这是基于官方的示例,事实上官方给出的上手例程非常详细,不过,本文在官方示例的基础上,将会做一些修改和延伸。

窗口示例

首先我们来看官方示例,tauri官方给出了一个新手教程,教导你如何快速创建并显示一个窗口,当然,这是最简单的窗口,不过,这个样例基本上涉及了tauri的整个原理。
首先,tauri是前后端结合的一种实现,它的页面创建、显示是使用的前端语言,你可以使用当前的任意前端语言来编写页面布局,比如:
在这里插入图片描述
我对前端编程不是很熟悉,因此选择了第一个即原生的javascript结合html和css来编写页面。
首先,在你的项目文件夹下,创建一个新文件夹,可以命名为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>

以上内容,相信懂前端的朋友会很熟悉,如果你用浏览器运行这段代码,其显示如下:
在这里插入图片描述
所以,你应该了解了,tauri所谓的GUI其实就是和网页显示是一样的,只是封装成了窗口程序。这就是前端和后端的结合,前端使用的是html和js,后端呢,使用的则是rust。
好了,我们按照例程,新建了html文件,暂且先放着,然后我们要在项目路径下,创建rust文件。
对于初学者来说,官方建议使用tauri cli来管理rust代码,所以你需要先安装tauri cli:

cargo install tauri-cli

等待安装完成,然后来创建一个tauri下的rust项目:

cargo tauri init

当你运行这个指令时,tauri会让你“回答”几个问题,我们按照例程所示一一填写即可。
1、应用名称:输入你自定义的名字即可
2、窗口标题:就是生成的窗口的title,你可以输入一个自定义名称,后面也可以再修改
3、前端页面文件所在位置:输入你之前创建的ui文件夹路径,可以和官方一样使用"…/ui"这个路径,也可以根据你自己创建的文件夹路径来填写
4、开发环境时路径:和3一致
5、使用什么命令来开发前端:暂时不填
6、使用什么命令来构建前端:暂时不填

以上6个问题,填前4个就行,5、6暂时不填,因为涉及后期使用其他命令来开发前端的程序,但暂时你可能还不会或者不需要这样复杂的命令。
在这里插入图片描述

回答完问题后,tauri会自动创建一个包含rust代码的文件夹,通常文件夹名称默认为src-tauri,其目录层级如下:
在这里插入图片描述
我们先打开src文件夹下的main.rs文件,其内部代码如下:

 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]fn main() {
tauri::Builder::default().run(tauri::generate_context!()).expect("error while running tauri application");
}

main函数是rust程序的进入点,tauri在此创建窗口的初始化程序。
如果你这直接运行,使用cargo tauri dev
会得到一个和之前的网页所示一样画面的窗口画面。(首次编译时间可能会比较长)
在这里插入图片描述
以上是最简单的示例程序,基本上窗口是用html布局实现的,还没有涉及rust代码,下面看一下如何在html中调用rust函数来实现某些功能,比如实现文本内容的更改。
我们首先在main.rs中创建一个函数:

#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}!", name)
}

这里,greet是rust中的普通函数,但是为其添加了#[tauri::command]宏,这样一来,greet函数就可以与js进行交互了。但是,还需要让tauri知道这个函数,所以需要注册它:

fn main() {tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");
}

如上,在原先的main函数里增加了一条.invoke_handler()函数,配合Generate_handler![]宏来注册greet函数。这样,就可以在前端代码里调用rust的函数功能了。
将之前的index.html代码修改一下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><h1 id="header">Welcome from Tauri!</h1><script>// access the pre-bundled global API functionsconst { invoke } = window.__TAURI__.tauri// now we can call our Command!// You will see "Welcome from Tauri" replaced// by "Hello, World!"!invoke('greet', { name: 'World' })// `invoke` returns a Promise.then((response) => {window.header.innerHTML = response})</script></body>
</html>

到此,都是官方提供的代码,对于前端的API调用,我不是很熟悉,但是我也不用管它,直接照做就行,目的是引用rust的函数,在上面的代码里,invoke后面的参数,第一个greet表示函数名,第二个是函数的参数名:

#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}!", name)
}

invoke返回的是一个Pormise,据我粗浅的了解,Promise是一个异步操作,但这里并没有使用异步关键词,而是使用then来取得反馈response,关于前端,目前了解尚不多,所以此处我只关心其结果,根据官方示例,response就是函数greet运行后的输出,在此处的示例代码中,输出应该是:

Hello,World

然后将Hello,World传给当前页面的id为header的标签,即修改标签的内容为:
Hello,World

但是,需要注意的是,如果要rust中的注册函数起作用,需要修改一下tauri.conf.json文件的内容:

"build": {"beforeBuildCommand": "","beforeDevCommand": "","devPath": "../tau-ui","distDir": "../tau-ui","withGlobalTauri":true}

如上,在这个json文件里,为build选项添加withGlobalTauri参数,并将其设为true。
这是一个临时办法,在以后会使用 @tauri-apps/api包,但在目前的初学者教程里,不涉及这么复杂的内容。

再次运行程序:
在这里插入图片描述
以上,实现的是官方的示例程序,下面我们来作一下扩展,我们为页面添加一个按钮以及一条标签,然后点击按钮后,标签显示相应的内容,标签的内容由rust的函数提供。
所以,我们在main.rs中再添加一个函数:

#[tauri::command]
fn sendstring()->String{"来自rust的字符串".to_string()
}

然后注册到tauri:

fn main() {tauri::Builder::default().invoke_handler(tauri::generate_handler![greet,sendstring]).run(tauri::generate_context!()).expect("error while running tauri application");
}

然后,我们在index.html文件中添加一个按钮和标签:

  <button id="btn1" onclick="">按钮1</button><p id="p1">hello,rust</p>

然后为按钮的点击事件绑定一个脚本函数:

 <button id="btn1" onclick="recvstring()">按钮1</button>
 function recvstring(){var elem=document.getElementById("p1");invoke('sendstring',{}).then((response)=>{elem.innerHTML=response;})}

然后再次运行程序:
在这里插入图片描述
点击按钮:
在这里插入图片描述
成功的执行了rust中注册的函数。

综上,tauri的使用体验,如果熟悉前端开发,我觉得还是不错的,因为虽然其后端使用的是rust,但是这仅在你的js无法满足开发的时候,我们就可以利用rust的强大功能来编写需要的函数,但是如果你要制作比较简单的程序,那么仅是js就完全满足开发了,就和开发网页程序是一样的,只是tauri封装成了桌面程序。

相比于iced以及egui这类rust的GUI库,我觉得 tauri的优点就是页面布局,感觉要方便很多,但目前我还没有去测试tauri的通讯,比如websocket等,不过,从体验上来说,tauri在github上排名rust gui库第一,的确是有道理的。

版权声明:

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

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