＜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;
    }

    // 将计算结果转换为字符串，赋值给currentInput
    currentInput = result.toString();
    // 将计算结果添加到history中
    history.value =history.value + '=' + currentInput + '\n';
    // 将计算结果显示在display中
    display.value = currentInput;
    // 将display的值赋值给predisplay
    predisplay=display.value;

    // 将operator置为null
    operator = null;
    // 将previousInput置为空
    previousInput = '';
    // 将currentInput置为空
    currentInput='';
    // 将calflag置为true
    calflag=true;
  })
    
}

// 导出一个函数，用于清除显示
export function clearDisplay(element,operator,display,history) {

    // 为element添加点击事件监听器
    element.addEventListener('click',()=>{
      // 将currentInput设置为空字符串
      currentInput = '';
      // 将operator设置为null
      operator = null;
      // 将previousInput设置为空字符串
      previousInput = '';
      // 将display的值设置为空字符串
      display.value = '';
      // 将predisplay设置为空字符串
      predisplay='';
      // 将history的值设置为空字符串
      history.value='';
    })
}

// 导出一个函数，用于返回上一个输入的字符
export function backLast(element,display,history) {
  // 给element添加点击事件
  element.addEventListener('click',()=>{
    // 如果calflag为false
    if (!calflag) {
      // 将currentInput的最后一个字符删除
      currentInput = currentInput.slice(0, -1);
      // 将删除后的currentInput赋值给display的value
      display.value = currentInput;
      // 将history的最后一个字符删除
      history.value = history.value.slice(0, -1);
    } else {
      // 将currentInput的最后一个字符删除
      currentInput = currentInput.slice(0, -1);
      // 将删除后的currentInput赋值给display的value
      display.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的值设置为true
    calflag=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