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

环境配置

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

窗口示例

首先我们来看官方示例tauri官方给出了一个新手教程教导你如何快速创建并显示一个窗口当然这是最简单的窗口不过这个样例基本上涉及了tauri的整个原理。

首先tauri是前后端结合的一种实现它的页面创建、显示是使用的前端语言你可以使用当前的任意前端语言来编写页面布局比如

我对前端编程不是很熟悉因此选择了第一个即原生的javascript结合html和css来编写页面。

首先在你的项目文件夹下创建一个新文件夹可以命名为ui然后在ui文件夹下新建一个html文件里面添加一些基本的内容

!DOCTYPE

/html以上内容相信懂前端的朋友会很熟悉如果你用浏览器运行这段代码其显示如下

所以你应该了解了tauri所谓的GUI其实就是和网页显示是一样的只是封装成了窗口程序。

这就是前端和后端的结合前端使用的是html和js后端呢使用的则是rust。

好了我们按照例程新建了html文件暂且先放着然后我们要在项目路径下创建rust文件。

对于初学者来说官方建议使用tauri

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

cargo

init当你运行这个指令时tauri会让你“回答”几个问题我们按照例程所示一一填写即可。

2、窗口标题就是生成的窗口的title你可以输入一个自定义名称后面也可以再修改

3、前端页面文件所在位置输入你之前创建的ui文件夹路径可以和官方一样使用…/ui这个路径也可以根据你自己创建的文件夹路径来填写

4、开发环境时路径和3一致

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

回答完问题后tauri会自动创建一个包含rust代码的文件夹通常文件夹名称默认为src-tauri其目录层级如下

#![cfg_attr(not(debug_assertions),

windows_subsystem

tauri::Builder::default().run(tauri::generate_context!()).expect(error

while

}main函数是rust程序的进入点tauri在此创建窗口的初始化程序。

如果你这直接运行使用cargo

会得到一个和之前的网页所示一样画面的窗口画面。

首次编译时间可能会比较长

以上是最简单的示例程序基本上窗口是用html布局实现的还没有涉及rust代码下面看一下如何在html中调用rust函数来实现某些功能比如实现文本内容的更改。

我们首先在main.rs中创建一个函数

}这里greet是rust中的普通函数但是为其添加了#[tauri::command]宏这样一来greet函数就可以与js进行交互了。

但是还需要让tauri知道这个函数所以需要注册它

main()

{tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect(error

while

}如上在原先的main函数里增加了一条.invoke_handler()函数配合Generate_handler![]宏来注册greet函数。

这样就可以在前端代码里调用rust的函数功能了。

!DOCTYPE

/titleDocument/title/headbodyh1

idheaderWelcome

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

#[tauri::command]

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

HelloWorld

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

HelloWorld

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

build:

../tau-ui,withGlobalTauri:true}如上在这个json文件里为build选项添加withGlobalTauri参数并将其设为true。

tauri-apps/api包但在目前的初学者教程里不涉及这么复杂的内容。

再次运行程序

以上实现的是官方的示例程序下面我们来作一下扩展我们为页面添加一个按钮以及一条标签然后点击按钮后标签显示相应的内容标签的内容由rust的函数提供。

#[tauri::command]

sendstring()-String{来自rust的字符串.to_string()

}然后注册到tauri

{tauri::Builder::default().invoke_handler(tauri::generate_handler![greet,sendstring]).run(tauri::generate_context!()).expect(error

while

idp1hello,rust/p然后为按钮的点击事件绑定一个脚本函数

button

onclickrecvstring()按钮1/buttonfunction

recvstring(){var

elemdocument.getElementById(p1);invoke(sendstring,{}).then((response){elem.innerHTMLresponse;})}然后再次运行程序

点击按钮

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

tauri的优点就是页面布局感觉要方便很多但目前我还没有去测试tauri的通讯比如websocket等不过从体验上来说tauri在github上排名rust