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安装Rustcurl --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主要基于以下几个关键技术：RustWeb技术Webview  整体结构大致长这样👇🏻在Tauri架构中，Rust应用程序是整个系统的核心，它提供了TauriAPI的实现。通过tauriapi让Rust应用程序与WebView和Web内容进行交互。WebView是一个通用的Web容器，通常基于底层平台的内置Web技术实现，例如：macOS上的WKWebView和Windows上的EdgeWebView。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和cocoawebview。这些Webview引擎为Tauri提供了不同的支持平台和不同的性能特征。  另外，Tauri提供了一组RustAPI，可以用于与Webview进行交互，例如：tauri::window:用于与当前窗口进行交互。tauri::event:用于发送事件到Webview。tauri::menu:用于在Webview中创建菜单。  除了使用RustAPI之外，我们还可以使用JavaScript代码与Webview进行交互。例如，我们可以使用以下代码在JavaScript代码中获取Webview的引用：const webview = window.tauri.promisified({  cmd: 'getWebview'});  当我们获取了Webview的引用之后，我们可以使用JavaScriptAPI来控制Webview的行为，例如：webview.addEventListener:监听Webview事件。webview.postMessage:向Webview发送消息。webview.executeJavaScript:在Webview中执行JavaScript代码。  通过使用这些API，我们可以实现高度自定义的UI界面，同时也可以方便地与Rust代码进行通信和交互。四、资源&文档Tauri官方文档-https://tauri.app/AwesomeTauri（精选的Tauri生态系统和社区中最好的东西，包含插件和应用，可以借鉴和学习）- http://github.com/tauri-apps/awesome-tauri。Tauriissues（Tauri问答）-http://github.com/tauri-apps/tauri/issuesTauridiscussions（Tauri讨论社区）-http://github.com/tauri-apps/tauri/discussionsRust编程语言基本语法学习-http://doc.rust-lang.org/book/crates.io（Rust生态的包管理网站）-http://doc.rust-lang.org/book/