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

机构师

于 2024-07-16 15:18:07 发布

阅读量1.3k

点赞数 11

文章标签： rust 开发语言后端 tauri GUI

本文链接：https://blog.csdn.net/normer123456/article/details/140457048

版权

前言
本文是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 functions
      const { 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库第一，的确是有道理的。

机构师

关注

11
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式

前言本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。环境配置系统：windows平台：visual studio code语言：rust、javascript、html、css库：tauri概述本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
复制链接

扫一扫