Tauri：跨平臺探索之旅
一、簡介
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 | sh2.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/
