使用Rust+Tauri+Svelte建立桌面應用的教程與原始碼 - Jakub

banq發表於2021-07-15
Rust原始碼

隨著 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 應用程式！



 

相關文章