导读：本文将带领大家重新观察 Tauri，这个能使用任何前端框架并联合 Rust 内核构建桌面应用程序的应用框架。

我们将使用 Tauri 2.0 测试版为大家进行详细介绍。

在 2022 年 1 月，Tauri 的第一次出现，我们对它的评测总结是一个使用任何前端框架与Rust 核心构建桌面应用程序的框架。

由于 Rust 语言在过去两年半中人气显著飙升，我们认为值得再次回顾 Tauri — — 尤其是它最近刚推出了 2.0 版本。

Tauri 的宣传语是“构建一个优化、安全且独立于前端的应用程序，用于多平台部署”，这在以前是可以理解的，但更多的部署目标使其与我最近发布的其他应用产品更加一致。

使用Tauri 最大的优势，是能够让熟悉Web 开发的工程师能够构建桌面和移动应用程序。

我们能获得 Rust 的安全性，同时也能获得 Web 开发的熟悉度和灵活性。

--Tauri

接下来，我们将尝试构建一个可以在 Mac 上完整运行的 UI 应用程序，看看在实践的道路是否变得更顺畅。

Tauri 已经发布了多个版本，仍然称自己为“工具包（Toolkit）”，这对开发者来说仍然是准确的。

从概念上讲，Tauri 充当静态 Web 主机。因此Tauri 可与 Rust 包和系统的原生 Web 视图配合使用，输出一个中等尺寸的可执行应用程序。

所以通过使用Tauri，在理论上我们既能获得 Rust 的安全性，又能获得 Web 开发的熟悉度和灵活性。

Tauri 的入门路线看起来更新颖一些，采用现在流行的单行开始。在此之前，我怀疑我自己的环境 Rust 安装的版本比较旧，所以我应该更新它。

先开始进行说明：

最后，它会提醒你启动新的 shell 或获取 env 文件。我注意到这一切都有了新的更友好的口音——因为 Rust 现在很流行！

好的，现在我应该可以使用 Tauri 单行代码了：

注意，我们已经进入 Tauri 2.0 的测试阶段。

模板安装选项可识别工具包的更多变化性质。我可以使用 .NET，但为了获得更通用的视图层，我将使用 JavaScript。显然，Rust 也是可用的。

我保留了稍旧的 npm / node 组合，并构建了相关模板：

然后，我们在开发环境中运行模板：

这将构建我们开始所需的所有软件包。第一次需要几分钟。这些将是 Rust 与操作系统窗口对话的方式。

最后，它会启动应用程序。如下图：

因此，我们启动并弹出一个应用程序，并将其作为标准 Mac 应用程序出现在我的托盘中。

好的，让我们看看它是如何构成的。在深入研究之前，请注意，点击图标会启动一个浏览器页面，在文本框中输入您的姓名并按下按钮会显示问候语：

这将有助于我们稍后解决 Rust 问题。代码结构与 Web 应用程序的预期一致：

我选择了原始的 JavaScript，在模板中会得到一个非常原始的index.html ：

  
    
    
    
    
    
  
  
    

      
Welcome to Tauri!


      

        
          
        


        
          
        
      



      
Click on the Tauri logo to learn more about the framework

      

        
          Greet
      



      

    

  

你可以注意到，在锚点处显示图像，处理链接行为。

请注意，JavaScript 在main.js中，窗口本身上的应用程序标题不是在此处定义的。

我们有一个非常“古老”的form表单中输入文本的方法。所以我们必须处理该表单以提取输入的名字，并将结果放在 final 中。

以下，是 main.js 的内容：

const { invoke } = window.__TAURI__.core;
let greetInputEl;
let greetMsgEl;

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
  greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
}
window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
document.querySelector("#greet-form").addEventListener("submit", (e) => {   e.preventDefault();
   greet();
});
});

选择活动元素并向表单按钮添加事件监听器后，我们运行一个函数来处理输入并将其粘贴到输出段落中。这里需要用到一些 Rust，因此我们了解了它的工作原理。

如果我们回到生成区域的主目录，我们会注意到有 src-tauri 的新目录：

其中在 main.rs中的src中，有一些就是 Rust 代码：

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
fn main() {
tauri::Builder::default()
  .plugin(tauri_plugin_shell::init())
  .invoke_handler(tauri::generate_handler![greet])
  .run(tauri::generate_context!())
  .expect("error while running tauri application");
}

我们能够看到 JavaScript 中的invoke调用如何到达处理字符串的Rustgreet函数。这很好，因为我们可以访问Tauri为我们管理的Rust函数。（我们还需要告诉构建器greet函数。）

最后显示的文件是控制窗口本身的 JSON 配置，tauri.conf.json：

{
  "productName": "thenewstack",
  "version": "0.0.0",
  "identifier": "com.tauri.dev",
  "build": { "frontendDist": "../src" },
  "app": { "withGlobalTauri": true, "windows": [
   {
     "title": "thenewstack",
     "width": 800,
     "height": 600
   }
  ],
  "security": { "csp": null } },
  "bundle": { "active": true,
  "targets": "all",
  "icon": [
    "icons/32x32.png",
    "icons/128x128.png",
    ...  ]
}
}

为了确保我们理解了所有内容，让我们设定一个可识别的目标，并给新游客打印欢迎消息。

我们把上面的窗口目标改小一点，并加上一个唯一的标识符：

{  ...   "identifier": "io.thenewsatck",  ...  "app" : {    "windows": [      {        "title": "Welcome to TheNewStack",        "width": 600,        "height": 200
      }     ...   },   ...  }}

然后我们适当地修改消息代码。这将强制构建检查更改。

最后，我们运行完整的构建过程，看看它对可执行文件都做了什么。

这也需要时间，因为这是首次构建和编译。

结果会产生一个 dmg 和一个 app 文件。我们将应用程序移动到应用程序文件夹中，就可以将其作为普通的 Mac 应用程序执行了：

该应用程序的大小仍然有点大（10.7 MB），但我没有采取任何措施来减少会自动添加到模板中的板条箱数量。

结论

我认为使用模板我们可以很快从零开始成为佼佼者，尽管允许使用一系列 JavaScript 框架的灵活性确实让一切变得更加复杂。我想知道更有主见的方法是否会更好。

但总的来说，我认为 Tauri 仍然是一个非常可靠的解决方案，可以流畅创建桌面应用程序，而不用担心窗口内部问题。

编译：洛逸

作者：Eoin Patrick

参考：

https://thenewstack.io/tauri-mixing-javascript-with-rust-for-gui-desktop-apps/