导读:本文将带领大家重新观察 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 :
Tauri App
你可以注意到,在锚点处显示图像,处理链接行为。
请注意,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),但我没有采取任何措施来减少会自动添加到模板中的板条箱数量。
编译:洛逸 作者:Eoin Patrick 参考: https://thenewstack.io/tauri-mixing-javascript-with-rust-for-gui-desktop-apps/
本文为 @ 场长 创作并授权 21CTO 发布,未经许可,请勿转载。
内容授权事宜请您联系 webmaster@21cto.com或关注 21CTO 公众号。
该文观点仅代表作者本人,21CTO 平台仅提供信息存储空间服务。