＜tauri＞＜rust＞＜GUI＞基于rust和tauri，在已有的前端框架上手动集成tauri示例

前言
本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。

环境配置
系统：windows 10
平台：visual studio code
语言：rust、javascript
库：tauri2.0

概述
本文使用vite构建一个前端页面，实现简单的计算器功能，然后使用tauri集成前端，实现桌面端的计算器窗口，并使用rust后端进行计算器的功能计算，然后返回前端。

1、创建前端页面

前端框架有很多，本文是基于一个常用的vite框架，来创建一个前端项目，使用原始模板，即不使用vue3或者react这样的前端模板，而是vite框架下，原生的javascript和html。
我们打开visual studio code，如果你有现成的根文件夹，直接打开，或者创建一个新的根文件夹：

mkdir tauri
cd tauri

然后初始化一个vite项目：

npm create vite@latest

初始化时，将需要填写一个基本信息：
在这里插入图片描述
如上图，项目名称自定义，前端框架选原生，语言选js。然后会在你的根文件夹下生成一个项目：

我们可以先看一下这个前端页面运行起来的效果，但这之前还需要安装以下npm包：

cd vitepro
npm install
npm run dev

在这里插入图片描述
这里是vite提供的模板示例，是一个计数器，点击网页下端的按钮，计数值会改变。
但我们需要的是一个计算器界面，所以需要对代码进行修改。先看一下vite提供的示例代码的结构：

如上图所示，main.js是主函数入口，counter.js才是计数功能模块。

main.js源码

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'document.querySelector('#app').innerHTML = `<div><a href="https://vite.dev" target="_blank"><img src="${viteLogo}" class="logo" alt="Vite logo" /></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" /></a><h1>Hello Vite!</h1><div class="card"><button id="counter" type="button"></button></div><p class="read-the-docs">Click on the Vite logo to learn more</p></div>
`setupCounter(document.querySelector('#counter'))

其中，setupCounter是由counter.js中导出的模块。官方提供的这个示例比较简单，我们希望稍作修改，首先是将app这个div的内容提取出来，写在单独的html文件中，可以将其命名为template.html

<div><a href="https://vite.dev" target="_blank"><img src="${viteLogo}" class="logo" alt="Vite logo" /></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" /></a><h1>Hello Vite!</h1><div class="card"><button id="counter2" type="button"></button></div><p class="read-the-docs">Click on the Vite logo to learn more</p></div>

然后将template.html放在public文件夹中，方便调用。
接着修改main.js，以便于获取template.html中的内容：

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'async function loadTemplate(path,divid) {const response = await fetch(path);const template = await response.text();document.querySelector(divid).innerHTML = template.replace('${viteLogo}', viteLogo).replace('${javascriptLogo}', javascriptLogo);setupCounter(document.querySelector('#counter'))
}loadTemplate('./template.html','#app')

此处，使用fetch来获取本地html文件的内容，效果是一致的。接着，我们修改template.html的页面，设计一个简单的计算器布局，此处是前端程序，比较简单，代码如下，可以参考，也可以直接去使用人工智能生成。
template.html

<label for="history">历史:</label><input type="text" class="history" id="history" disabled><label for="display">实时:</label><input type="text" class="display" id="display" disabled><div class="buttons"><button class="button" id="clearbtn" >C</button><button class="button" id="squarebtn">X²</button><button class="button" id="backbtn">←</button><button class="button operator" id="mulbtn"  >*</button><button class="button" id="sevenbtn" >7</button><button class="button" id="eightbtn" >8</button><button class="button" id="ninebtn" >9</button><button class="button operator" id="divbtn" >/</button><button class="button" id="fourbtn" >4</button><button class="button" id="fivebtn" >5</button><button class="button" id="sixbtn" >6</button><button class="button operator" id="addbtn" >+</button><button class="button" id="onebtn" >1</button><button class="button" id="twobtn" >2</button><button class="button" id="threebtn" >3</button><button class="button operator" id="subbtn" >-</button><button class="button" id="zerobtn" >0</button><button class="button" id="dotbtn" >.</button><button class="button equal" id="equalbtn" >=</button></div>

上面的代码在网页上看起来如下：
在这里插入图片描述
注意，页面布局还需要配合css样式：
global.css

body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #ffffff;
}
.app {background-color: #73b4f1;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;
}
.display {height: 30px;text-align: right;margin-bottom: 10px;padding: 10px;font-size: 18px;border: 1px solid #e7adad;border-radius: 5px;
}
.history{height: 30px;text-align: right;margin-bottom: 10px;padding: 10px;font-size: 18px;border: 1px solid #e7adad;border-radius: 5px;
}
.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;
}
.button {padding: 20px;font-size: 18px;border: none;border-radius: 5px;background-color: #f0f0f0;cursor: pointer;
}
.button:hover {background-color: #ddd;
}
.button.operator {background-color: #ff9500;color: white;
}
.button.operator:hover {background-color: #e08900;
}
.button.equal {background-color: #34c759;color: white;grid-column: span 2;
}
.button.equal:hover {background-color: #2da94f;
}

页面布局写好了，就需要为按钮实现功能了，这部分需要写在js中，我们将修改counter.js的代码，为其中添加以下函数：
1、清除函数
2、数字输入函数
3、计算函数（加减乘除以及平方）
4、退格函数
以上是本文将要实现的计算器功能，当然只是简单的实现，并非是一个完整的计算器功能，本文的目的是通过这个小的计算器程序来说明tauri集成前端的示例。
counter.js

let currentInput='';
let previousInput='';
let operator=null;
let predisplay=''
let calflag=false;// 导出一个函数，用于在输入框中添加数字
export function appendnumber(element,number,display,history) {// 给元素添加点击事件element.addEventListener('click',() =>{///如果连续输入，则直接拼接currentInput += number;///输入值将实时显示在输入框内display.value = currentInput;///判断是否进行了计算，如果进行了计算，则历史值清空，显示新的实时输入if (calflag){history.value = currentInput;calflag=false;} else {history.value =history.value + number;}})} 
// 导出一个函数，用于在元素上添加功能符号的点击事件
export  function appendOperator(element,op,display,history) {// 为元素添加点击事件element.addEventListener('click',() => {///如果点击了功能符号，但计算完成标记存在，则不进行任何回应if (calflag){return;}///如果多次点击功能符号而不是输入下一个数值，则切换功能符号if (currentInput === '') {operator = op;history.value =previousInput + ' ' + operator;return;};///如果前次输入值不为空，则直接计算结果if (previousInput !== '') {//calculate();insidecalculate();}operator = op;previousInput = currentInput;display.value = previousInput;history.value =currentInput + ' ' + operator;predisplay=display.value;currentInput = '';})}function insidecalculate(){if (currentInput === '' || previousInput === '') return;let result;const prev = parseFloat(previousInput);const current = parseFloat(currentInput);switch (operator) {case '+':result = prev + current;break;case '-':result = prev - current;break;case '*':result = prev * current;break;case '/':result = prev / current;break;default:return;}currentInput = result.toString();
}// 导出一个函数，用于计算
export function calculate(element,display,history) {// 给element添加点击事件监听element.addEventListener('click',()=>{// 如果currentInput或previousInput为空，则返回if (currentInput === '' || previousInput === '') return;let result;// 将previousInput和currentInput转换为浮点数const prev = parseFloat(previousInput);const current = parseFloat(currentInput);// 根据operator的值进行计算switch (operator) {case '+':result = prev + current;break;case '-':result = prev - current;break;case '*':result = prev * current;break;case '/':result = prev / current;break;default:return;}// 将计算结果转换为字符串，赋值给currentInputcurrentInput = result.toString();// 将计算结果添加到history中history.value =history.value + '=' + currentInput + '\n';// 将计算结果显示在display中display.value = currentInput;// 将display的值赋值给predisplaypredisplay=display.value;// 将operator置为nulloperator = null;// 将previousInput置为空previousInput = '';// 将currentInput置为空currentInput='';// 将calflag置为truecalflag=true;})}// 导出一个函数，用于清除显示
export function clearDisplay(element,operator,display,history) {// 为element添加点击事件监听器element.addEventListener('click',()=>{// 将currentInput设置为空字符串currentInput = '';// 将operator设置为nulloperator = null;// 将previousInput设置为空字符串previousInput = '';// 将display的值设置为空字符串display.value = '';// 将predisplay设置为空字符串predisplay='';// 将history的值设置为空字符串history.value='';})
}// 导出一个函数，用于返回上一个输入的字符
export function backLast(element,display,history) {// 给element添加点击事件element.addEventListener('click',()=>{// 如果calflag为falseif (!calflag) {// 将currentInput的最后一个字符删除currentInput = currentInput.slice(0, -1);// 将删除后的currentInput赋值给display的valuedisplay.value = currentInput;// 将history的最后一个字符删除history.value = history.value.slice(0, -1);} else {// 将currentInput的最后一个字符删除currentInput = currentInput.slice(0, -1);// 将删除后的currentInput赋值给display的valuedisplay.value = currentInput;}})
}// 导出一个函数，用于计算平方
export function squarenumber(element,display,history) {// 给element元素添加点击事件element.addEventListener('click',()=>{// 将currentInput的值平方currentInput = Math.pow(currentInput,2);// 将平方后的值显示在display元素中display.value = currentInput;// 将计算过程添加到history元素中history.value = history.value + '^2' + '=' + currentInput + '\n';// 将previousInput和currentInput的值重置为空previousInput = '';currentInput='';// 将calflag的值设置为truecalflag=true;})
}

然后在main.js中导入上述函数：

import { appendnumber,appendOperator,calculate,clearDisplay,backLast,squarenumber } from './counter.js'

2、tauri集成

完成了前端页面后，我们现在来手动集成tauri。tauri的官网提供了详细的步骤，在我们上面创建的项目文件夹vitepro下，安装Tauri 的 CLI 工具：

npm install -D @tauri-apps/cli@latest

安装完成后，node包文件夹下显示tauri库：
在这里插入图片描述
还是在当前项目文件夹的根目录下，我们使用tauri的cli工具，初始化一个tauri，使其包含在我们已经创建好的前端项目中：

npx tauri init

运行后，会让你填写几个问题：

✔ What is your app name? · vitepro
✔ What should the window title be? · vitepro
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? ›
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ..
✔ What is the url of your dev server? · http://localhost:5173
✔ What is your frontend dev command? · npm run dev    
✔ What is your frontend build command? · npm run build

由于我们是集成在vite构建的前端项目中，所以url可以使用默认的

http://localhost:5173

初始化完成后，可以看到项目文件夹下会多出一个src-tauri文件夹：
在这里插入图片描述
此时，我们可以使用：

npx tauri dev

来运行一下看看：
在这里插入图片描述
看起来还可以，不过默认的窗口尺寸并不匹配，我们可以修改一下窗口参数。
在src-tauri文件夹下，有一个配置文件：tauri.conf.json，其中有个app参数，修改其中的windows项，将窗口宽度设置为400。

 "app": {"windows": [{"title": "vitepro","width": 400,"height": 600,"resizable": true,"fullscreen": false}],"security": {"csp": null}},

修改后如下：
在这里插入图片描述
看起来要好多了，事实上，窗口还可以美化，但是本文暂不再赘述。

3、后端函数替代

现在，我们想把之前在javascript中的函数功能放到rust中实现，再通过接口在前端调用，实现前后端的数据通讯。此处，tauri提供了两种方法，一种是使用javascript API库，另一个是使用withGlobalTauri这个配置，实现预构建API。
1、如果使用javascript API，那么需要先安装@tauri-apps/api：
使用

npm install @tauri-apps/api

指令安装api库，安装完成后调用invoke函数：

import { invoke } from '@tauri-apps/api/core'

2、如果使用withGlobalTauri配置，那么，需要修改tauri.conf.json文件中的build项：

{"build": {..."withGlobalTauri": true},

添加withGlobalTauri，并设置为true。这里省略了其他参数的设置。
然后在js中调用：

const invoke = window.__TAURI__.invoke

其中，invoke函数的参数有三个，第一个是要调用的函数名，第二个是函数的参数（如果有的话），第三个是一个可选项（一个headers参数，用于操作http请求和响应的接口）
如果要在前端调用rust，首先你需要在rust中编写好函数，然后才能在前端使用，在tauri初始化的src-tauri文件夹中，我们打开lib.rs文件，添加一个函数：

#[tauri::command]
fn greet(name:&str) -> String {format!("hello,this is from rust msg,your name is {}!",name)
}

注意到，这里函数被标记了，使用#[tauri::command]来表明这是一个可以被前端使用的rust函数，但是这还不够，还需要将这个函数传递给构建列表：

pub fn run() {tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).setup(|app| {if cfg!(debug_assertions) {app.handle().plugin(tauri_plugin_log::Builder::default().level(log::LevelFilter::Info).build(),)?;}Ok(())}).run(tauri::generate_context!()).expect("error while running tauri application");
}

注意上面代码中的invoke_handler，标记的函数通过它来传递。我们来测试一下，为前端添加一个文本标签，然后程序运行后，显示一个从rust函数传递过来的字符串。
我们先修改template.html，添加一个新标签：

    <div id="titlediv" class="titlediv"><p id="titlep">等待rust传递的字符：</p></div>

设置一下背景色，以做区分。先看下效果：
在这里插入图片描述
现在我们还没有调用rust的函数，所以只显示设定的内容。

然后在main.js中，我们来修改这个标签，将其内容替换为从rust函数获取的字符串：

const titlep=document.getElementById('titlep');const greeting=await invoke('greet');titlep.innerHTML +=greeting;console.log(greeting);

同时修改一下rust端的函数：

#[tauri::command]
fn greet() -> String {format!("hello,这里是rust数据!")
}

再次运行：
在这里插入图片描述
说明是正确的从前端调用了rust的函数，并获取了返回的内容。
现在，我们尝试将之前的计算函数写到rust中，然后前端这边点击相应按钮时，调用rust函数，并返回结果。
以等号的功能为例，原先的等号功能的核心逻辑是：

 // 根据operator的值进行计算switch (operator) {case '+':result = prev + current;break;case '-':result = prev - current;break;case '*':result = prev * current;break;case '/':result = prev / current;break;default:return;}

我们就将这段替换掉，先在rust中新建一个calculate_rs函数：

#[tauri::command]
fn calculate_rs(current_input:f32,previous_input:f32,operator:&str
) -> f32 {match operator {"+" => current_input + previous_input,"-" => current_input - previous_input,"*" => current_input * previous_input,"/" => current_input / previous_input,_ => 0.0,}
}

这个函数就是根据输入数字和计算符返回相应结果，当然这里比较简单，没有进行错误处理。
在js中调用此函数来计算：

 const cal=await invoke('calculate_rs',{currentInput:current,previousInput:prev,operator:operator})

4、实例演示

上面介绍了代码，下面来看一下动态演示：

tauri简单计算器程序演示

5、源代码

https://download.csdn.net/download/normer123456/90354147