＜rust＞＜tauri＞＜GUI＞基于tauri和rust，编写一个二维码生成器

前言

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

环境配置

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

概述

本文是基于tauri和rust，实现一个二维码生成器，并在实时显示。图片支持下载（基于web）。

1、创建前端项目

如何创建前端项目，及集成tauri，可以参考之前的博文：
1、＜tauri＞＜rust＞＜GUI＞基于rust和tauri，在已有的前端框架上手动集成tauri示例
或者参考tauri的官网：
https://tauri.app/zh-cn/start/frontend/

本文不再赘述。

本文的目的，是基于tauri和rust，来生成二维码qrcode，其中，二维码的生成，使用rust来实现，我们需要安装一个rust库：

rust">cargo add qrcode

还需要安装一个图像处理库image：

rust">cargo add image

在Cargo.toml文件中如下：

qrcode = "0.14.1"
image = "0.25.5"

照例，我们先创建一个新的页面qrcode.html:

<div id="qrcodediv" class="qrcodediv"><div class="sec1"><label for="qrcodeinput">请输入二维码内容:</label><input id="qrcodeinput" type="text" placeholder="请输入内容" /></div><div class="sec2"><label for="qrcodesize">二维码尺寸:</label><select id="qrcodesize" name="qrcodesize"><option value="normal">Normal</option><option value="micro">Micro</option></select><select id="qrcodesizevalue" title="QR Code Size Value"></select></div><div class="sec3"><button id="geneqrcodebtn" type="button">生成二维码</button><img src="" id="qrcodeimg" alt="QR Code" /></div>
</div>

然后为其创建一个样式qrcode.css:

.app{display: flex;flex-direction: column;gap: 20px;
}
.qrcodediv {display: flex;flex-direction: column;gap: 20px;background-color: #ccc8c8;
}
.sec1{display: flex;flex-direction: row;margin-top: 10px;
}
.sec2 {display: flex;flex-direction: row;gap: 20px;
}
.sec3{display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.sec3 img {width: 200px;height: 200px;margin-top: 20px;margin-bottom: 20px;
}
.sec3 button {width: 80px;height: 40px;border:1px solid #302f2f;border-radius: 5px;
}
.sec3 button:hover {background-color: #81b8e6;color: #fff;
}

运行后，GUI显示效果如下：
在这里插入图片描述
看上去比较简单，但是具备功能即可。

2、二维码生成

在前文说过，二维码生成，是利用rust来实现，我们先导入qrcode：

rust">use qrcode::QrCode;
extern crate image as eximg;

然后我们创建一个二维码生成函数，并标记为tauri命令：

rust">#[tauri::command]
fn generate_qrcode(text:String,version:String,value:i16) -> Result<(),String> {let ver1 = match version.as_str() {"normal" => qrcode::Version::Normal(value),"micro" => qrcode::Version::Micro(value),_ => panic!("Unknown version type"),};let ver1_modebit = ver1.mode_bits_count();println!("mode is {}",ver1_modebit);//let code = QrCode::new(text).unwrap();let code2 = match QrCode::with_version(text, ver1, qrcode::EcLevel::L) {Ok(code) => code,Err(e) => {eprintln!("error:{}", e);return Err(format!("生成二维码失败,\n错误信息：{}", e));}};let data = code2.render::<eximg::Luma<u8>>().build();let res = match data.save("../qrcode.png") {Ok(()) => Ok(()),Err(e) => {eprintln!("error:{}",e);return  Err(format!("保存二维码失败,\n错误信息：{}", e));}};res
}

根据输入的二维码内容、尺寸格式设置，来生成相应的二维码内容，然后通过image库保存为png图片（也可以存为svg格式）。
然后，我们如果要在前端窗口显示生成的二维码图片，需要获取图片路径，具体如何显示图片，可以参考之前的博文：
＜tauri＞＜rust＞＜GUI＞基于rust和tauri的图片显示程序（本地图片的加载、显示、保存）