使用Rust+Tauri+Svelte创建桌面应用的教程与源码 - Jakub


随着 Rust 越来越受到关注，越来越多的人想要学习它，我决定创建另一个主要针对初学者的教程。使用 Rust 创建桌面应用程序的方法很少，而Tauri绝对是一种可以让您制作漂亮的 UI（HTML/JS/CSS）并在后台利用 Rust 功能的方法。由于 Tauri 允许您选择任何前端框架（或不选择），因此我创建了一个使用 Svelte 和 Bootstrap（通过Sveltestrap）的简单模板，为开发人员提供了一个很好的起点。为了演示如何使用它，我们将创建简单的密码生成器。
可以在这里找到完成的项目：https : //github.com/jbarszczewski/pass-gen-tutorial
 
创建项目
好的，这一步超级简单。你所要做的就是运行这个命令： degit jbarszczewski/tauri-svelte-template pass-gen-tutorial
或者，您可以转到https://github.com/jbarszczewski/tauri-svelte-template并单击Use this template按钮。
项目快速概览：

  • /src包含前端代码，主视图在App.svelte文件中定义。
  • /src-tauri 这里有“后端”Rust 代码。
  • README.md 提供如何使用 Tauri 的基本说明。

  
添加 Rust 命令
好的，我们要创建一个简单的命令，它将接受密码长度并返回随机字符串。我们将需要添加一个rand生成随机数的包。打开src-tauri/Cargo.toml并rand = "0.8.0"在依赖项下添加。此时运行yarn然后yarn tauri dev命令（从项目主目录）以“实时”查看更改。
注意：第一次构建可能需要一段时间，因为它是从头开始构建项目。
现在打开/src-tauri/src/commands.rs文件并将现有内容替换为以下内容：
use rand::Rng;

static CHARS: [char; 70] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's','t', 'u', 'v', 'w', 'x', 'y', 'z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z', '!','@','#','$','%','^','&','*'];

#[tauri::command]
fn generate_password(length: u32) -> String{
    let mut rng = rand::thread_rng();
    let mut result = String::new();
    for _x in 0..length {
        result.push(CHARS[rng.gen_range(0..70)]);
    }

    result
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn generates_string() {
        let result = generate_password(8);
        assert_eq!(result.len(), 8);
    }
}

现在让我们看看这段代码做了什么：

  1. 导入rand包。
  2. 使用可用于生成密码的字符创建数组。
  3. 定义generate_password接受密码长度为整数的新 Tauri 命令。
  4. 创建新的随机生成器和一个空字符串。
  5. 在“for”循环中，用CHARS数组中的字符填充字符串
  6. 返回包含密码的字符串。

此外，我们有一个单独的测试来检查新创建的密码是否具有适当的长度（cargo test从/src-tauri目录运行）。当然还有改进的余地，比如添加选项来选择要使用的字符类型（只有小写，没有符号等）并扩展测试以获得更好的覆盖率。但正如开头提到的，这只是一个演示模板的简单应用程序。
最后要做的是将导入的命令重命名main.rs为generate_password而不是标准，my_custom_command并且 Rust 代码已准备好使用！
 
修改 Svelte 组件
我们需要修改前端 Svelte 组件来调用我们的新命令。此处的更改实际上很简单：我们希望将 input 修改为滑块并将其值作为字符串传递给调用的命令（请记住，我们已经更改了默认名称）。打开App.svelte，让我们开始添加这些更改。
在<script>部分中用以下代码替换导入后的代码：
let input: string = '8';
let result: string = '';
const handleClick = async () => {
    result = await invoke('generate_password', {
        length: +input,
    });
};

区别在于：
  • 默认值 input
  • 将字符串转换为数字的命令和参数名称： +input

该<main>标签也看起来非常相似，我们更新文本和改变输入是一个range类型：
<Container>
    <Card class="mb-3">
        <CardHeader>
            <CardTitle>Password Generator</CardTitle>
        </CardHeader>
        <CardBody>
            <CardSubtitle>Generate random password</CardSubtitle>
            <CardText>Press 'Generate' button to create password with length: {input}.</CardText>
            <input
                type="range"
                id="exampleRange"
                bind:value="{input}"
                min="{1}"
                max="{32}"
                step="{1}"
            />
            <button color="primary" on:click="{handleClick}">Generate</button>
        </CardBody>
        <CardFooter> {#if result.length !== 0} {result} {:else} No result yet. {/if} </CardFooter>
    </Card>
</Container>

我们完成了！恭喜，您刚刚创建了您的第一个 Tauri 应用程序！