一、簡介

Tauri 是一個跨平台 GUI 架構，與 Electron 的思想基本類似。都是屬于跨平台技術的解決方案

優缺點快速分析

我們一般會把tauri作為 Electron 的替代方案，electron優點咱們不看，這裡就提兩個electron比較明顯的問題：

安裝包大小。Electron 應用程式需要内置 Chromium 渲染引擎和 Node.js 環境，導緻項目安裝包很大。
資源占用。Electron 占用較高的 CPU 和記憶體資源，作為小型的工具類項目應用，使用者體驗會不太友好。
啟動時間稍顯長。

Tauri 作為一種使用 Rust 和 Web 技術棧建構跨平台桌面應用的架構。這裡也分析一下它的幾個優點和缺點：

優點

高性能：Tauri 使用 Rust 語言編寫底層代碼，具有記憶體安全、高性能和并發性等優點。
跨平台支援：Tauri 支援多個平台，如 Windows、macOS 和 Linux，可以幫助開發者輕松地建構跨平台的應用。
小安裝包：由于 Tauri 應用程式使用原生控件和 Web 技術結合的方式，是以安裝包相對較小。
啟用時間較短。
安全性：使用作業系統的原生 GUI 控件來建立應用程式界面，進而提高了應用程式的可通路性和安全性。

缺點

學習成本：由于 Tauri 使用 Rust 和 Web 技術進行開發，是以需要具備一定的 Rust 和 Web 開發經驗，對于新手開發者來說可能需要一定的學習成本。
社群規模：相比于其他架構，Tauri 的社群規模還相對較小，可能需要開發者自行解決一些問題。
可維護性：Tauri 尚處于快速發展階段，可能存在 API 變動和不穩定的情況。以及webview也會有一些本身自帶的相容性問題等等。

對比Tauri和Electron

總的來說，Tauri 是一種非常有潛力的架構，它可以幫助開發者快速建構高性能、跨平台的桌面應用。但是，它也存在一些學習成本和可維護性等方面的問題，需要開發者在選型的時候有更多的思考。

二、使用教程

2.1 環境準備（以mac環境為例）

其他環境的可以參考官方教學文檔，在此不做贅述

安裝 CLang 和 macOS 開發依賴項

xcode-select --install

安裝Rust

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

2.2 建構項目

使用 pnpm 建立項目

pnpm create tauri-app

選擇完你熟悉的項目配置後，執行提示的内容，運作項目，會自動在桌面彈出初始化的視窗

2.3 項目構成

dist：web項目打包編譯目錄
src：vue前端頁面代碼（渲染程序）
src-tauri：rust相關（主程序）

2.4 完善項目配置

完成項目内容後，我們可以在 tauri.conf.json 檔案中配置 Webview 的選項，包括 Webview 庫的版本、視窗大小、視窗樣式、視窗标題、使用者代理字元串等。

2.5 打包

pnpm tauri build

直接執行打包會直接報個錯

将tauri.conf.js的預設配置修改為build

再次執行打包就好了，然後直接安裝使用

到此為止，我們體驗了一把使用 Tauri 開發桌面端應用的流程。可以感覺到，它對前端開發者是比較友好的，但是如果想深入掌握它，需要學習 Rust。

三、整體構成

Tauri主要基于以下幾個關鍵技術：

Rust
Web技術
Webview

整體結構大緻長這樣

在 Tauri 架構中，Rust 應用程式是整個系統的核心，它提供了 Tauri API 的實作。通過tauri api讓 Rust 應用程式與 WebView 和 Web 内容進行互動。
WebView 是一個通用的 Web 容器，通常基于底層平台的内置 Web 技術實作，例如：macOS 上的 WKWebView 和 Windows 上的 Edge WebView。WebView 用于加載 Web 内容，使其可以顯示在原生桌面應用程式中。
Web 内容是在 WebView 中加載的 HTML、CSS 和 JavaScript 代碼。Tauri 可以加載遠端 Web 内容，也可以加載本地 Web 内容，例如打包在原生應用程式中的 Web 資源。

通過這個架構，Tauri 提供了一種快速建立跨平台原生桌面應用程式的方法，充分利用了 Rust 的性能和 Web 技術的靈活性。那麼，接下來簡單講一下這三塊都有哪些内容。

3.1 Rust

語言 Tauri的核心是使用 Rust 語言編寫的。在 Tauri 中，Rust 代碼用于調用本地作業系統的 API，實作應用的後端邏輯，并與前端 Web 技術進行互動。Rust的一些主要特性包括：
記憶體安全：Rust 的所有權系統可以有效避免記憶體洩漏和空指針等問題，確定程式在運作時不會發生崩潰。
線程安全：Rust 的并發模型允許開發者編寫線程安全的代碼，可以在多核處理器上并行執行，提高應用的性能。
高性能：Rust 的編譯器會在編譯時進行優化，生成的二進制檔案具有很好的性能表現。
易于與其他語言互動：Rust 支援與其他語言進行互動，例如與 JavaScript 進行互動，這在 Tauri 中非常重要。
除了上述特性，Rust 還有其他很多特性和優點，如代碼可讀性、錯誤處理、模式比對等，這些特性在 Tauri 中也會得到充分的發揮。

總之，Tauri 的 Rust 代碼是實作其核心功能的關鍵，使用 Rust 可以有效避免一些常見的安全漏洞，并且可以保證應用具有高性能、可靠性和擴充性。

庫的使用

Tauri 使用了多個 Rust 庫，主要包括以下幾個方面：

底層平台庫：Tauri 使用了多個底層平台庫，包括 winapi（Windows 平台）、cocoa（macOS 平台）、gtk（Linux 平台）等，這些庫提供了與作業系統互動的接口，使得 Tauri 可以在不同的平台上實作一緻的行為，達到抹平差異的目的。
Webview 庫：Tauri 使用了多個 Webview 庫，包括 webview, wry, cef, tao, nwjs 等，不同的平台使用不同的 Webview 庫。這些庫提供了在 Rust 代碼中嵌入 Webview 的能力，使得 Tauri 可以在桌面應用中內建 Web 技術。
異步程式設計庫：Tauri 使用了 async-std 庫來實作異步程式設計。這個庫提供了基于 async/await 的異步程式設計模型，使得 Tauri 可以使用 Rust 的強類型和安全性，同時又能夠處理異步操作。
序列化和反序列化庫：Tauri 使用了 serde 庫來進行資料的序列化和反序列化。這個庫提供了基于屬性宏的序列化和反序列化方式，使得 Tauri 可以友善地在 JavaScript 和 Rust 之間傳遞資料。
日志庫：Tauri 使用了 env_logger 庫來進行日志記錄。這個庫提供了一種靈活的日志記錄方式，使得 Tauri 可以在開發和調試時友善地記錄日志。
其他庫：除了上述庫之外，Tauri 還使用了其他一些 Rust 庫，包括 lazy_static（懶加載靜态變量庫）、serde_json（JSON 序列化和反序列化庫）、walkdir（周遊目錄和檔案庫）等，這些庫提供了豐富的功能，使得 Tauri 可以實作更加複雜的功能。

3.2 Web

在Tauri中，Web技術主要用于兩個方面：一是建立應用程式的UI界面，二是通過Webview與Rust代碼通信。

先看看建立界面：我們可以使用HTML、CSS和JavaScript來建立應用程式的UI界面，也能夠內建目前所有Web項目裡頭（包括React、Vue、Angular等等）。

接下來看看如何讓Webview與Rust代碼通信。

定義Tauri事件

可以寫在main.rs裡

#[tauri::command]
fn hello(name: String) -> String {
  format!("Hello, {}!", name)
}

fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![hello])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

在上面的代碼中，我們定義了一個hello函數，并使用tauri::command宏将其注冊為一個Tauri事件。該函數接受一個名為name的字元串參數，并傳回一個格式化的問候語

在JavaScript代碼中發送事件

在JavaScript代碼中，我們可以使用window.tauri.invoke方法來發送一個Tauri事件。例如，我們可以編寫以下代碼來調用Rust中的hello事件：

window.tauri.invoke('hello', { name: 'Alice' })
  .then(response => {
    console.log(response); // 輸出 "Hello, Alice!"
  });

3.3 Webview

在Tauri中，Webview是負責渲染應用程式UI的核心元件。具體來說，Webview是一個用于顯示網頁内容的視窗，類似于浏覽器中的标簽頁。Tauri使用Webview作為應用程式的UI引擎，并使用Rust和JavaScript代碼來控制UI的行為。

Tauri使用了一些第三方的Webview引擎，例如：webview、wry 和 cocoa webview。這些Webview引擎為Tauri提供了不同的支援平台和不同的性能特征。

另外，Tauri提供了一組Rust API，可以用于與Webview進行互動，例如：

tauri::window: 用于與目前視窗進行互動。
tauri::event: 用于發送事件到Webview。
tauri::menu: 用于在Webview中建立菜單。

除了使用Rust API之外，我們還可以使用JavaScript代碼與Webview進行互動。例如，我們可以使用以下代碼在JavaScript代碼中擷取Webview的引用：

const webview = window.tauri.promisified({
  cmd: 'getWebview'
});

當我們擷取了Webview的引用之後，我們可以使用JavaScript API來控制Webview的行為，例如：

webview.addEventListener: 監聽Webview事件。
webview.postMessage: 向Webview發送消息。
webview.executeJavaScript: 在Webview中執行JavaScript代碼。

通過使用這些API，我們可以實作高度自定義的UI界面，同時也可以友善地與Rust代碼進行通信和互動。

四、資源 & 文檔

Tauri官方文檔 - https://tauri.app/
Awesome Tauri（精選的 Tauri 生态系統和社群中最好的東西，包含插件和應用，可以借鑒和學習） - http://github.com/tauri-apps/awesome-tauri。
Tauri issues（Tauri問答）- http://github.com/tauri-apps/tauri/issues
Tauri discussions（Tauri讨論社群） - http://github.com/tauri-apps/tauri/discussions
Rust 程式設計語言基本文法學習- http://doc.rust-lang.org/book/
crates.io（Rust生态的包管理網站） - http://doc.rust-lang.org/book/

來源:微信公衆号:大轉轉FE

出處:https://mp.weixin.qq.com/s/dxb3SxAv1u02qwxXCmnolQ

Tauri：跨平台探索之旅