0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Tauri知识概览

jf_wN0SrCdH 来源: 浮之静 作者:lencx 2022-11-15 10:02 次阅读

最近在折腾 WA+ 项目,因为要实现一些随心所欲(想到哪是哪)的功能。就被 Tauri 摧残的不轻。查过很多相关资料,对 Tauri 也有了一些新的体会(认知有限,不保证完全正确,请自行判断)。

关于 WA+

WA+ = W(eb) + A(pp) + more...

哇,无限可能!

WA+[1] - Making a web page more like a desktop application is just the beginning, the possibilities are unlimited, up to your imagination!

Tauri 概览

利用操作系统提供的 WebView 来呈现界面,来避免打包体积过大。一般套壳空应用打包后的体积控制在 3M 左右。而 Electron[2] 会将整个 Chromium[3] 打包进应用(安装包体积几十兆起步)。

因为系统差异,所以使用自带 Webview 会存在兼容性问题,但是应该朝前看,IE 浏览器都被微软自家宣布死亡了。

相比 Electron 有更低的内存占用,更小的体积,更少的线程,系统调用等。了解更多 Tauri 基准测试[4]。

安装包是跨平台的,目前支持 Mac,Windows,Linux 等,未来也会支持 iOS/iPadOS 和 Android 等,跨平台打包可以使用官方提供的 Tauri GitHub Action[5],虽然是跨端,但是一些特定于平台的代码还是需要借助于插件或者自行实现,并在真机上进行功能验证,否则可能出现行为和预期不一致。

提供内置签名以确保应用自动更新时可以安全安装,相关配置请查看 Tauri Updater[6]。

使用 tauri icons[7] 命令生成自定义应用图标(要求:格式为 PNG 的正方形图片)。

应用更安全,Tauri 在架构层做了很多安全处理(比如:通过配置来约束 Tauri 访问系统文件,网络请求,剪贴板等)。

源代码更安全,Tauri 只提供二进制文件。而不是像 Electron 的 ASAR[8] 文件。

数据更安全,隔离模式会对前后端(Webview 和 Tauri Core)通信数据进行加密传输。

前端使用 HTML、CSS、JavaScript 来构建界面(也可以使用前端主流技术,如:vite[9],react[10],vue[11],svelte[12] 等)。后端目前使用 Rust,未来也可能会支持其他类型语言(如:Go、Nim、Python、Csharp 等)。

强大的系统交互能力,支持配置全局快捷键,系统菜单,系统托盘,文件读写,命令行,系统信息,剪贴板等。Rust 给 Tauri 带来了无限的想象力,Rust 可以做的事情,Tauri 理论上也可以做(欢迎自行尝试,可能也有做不了的)。

Tauri Window[13] 支持多种配置。磨砂透明背景,无边框功能则需要借助的两个插件(支持 Windows 和 macOS,Linux 暂不支持):

window-shadows[14] - 为窗口添加阴影。

window-vibrancy[15] - 为窗口配置磨砂效果。

支持创建多个窗口以及为新窗口脚本注入,但是脚本注入需要在 rust 端创建窗口,使用 WindowBuilder::new 中的 initialization_script 来加载脚本。

通过提供的 Tauri Command[16],可以从 Web 应用程序调用 Rust 函数。通过 Tauri Events[17](emit 和 listen)可以在前后端之间传递消息,它与 Tauri Command 有类似性。

...

综合来看,Tauri JS API[18] 确实提供了很多便捷 API 供前端使用,但是有些底层方法并未暴露,而 Tauri Rust API[19] 则要强大很多。

开发问题

资源 & 文档

Tauri doc[20] - 官方文档,第一参考资料,建议熟读,源码及 issues 可以作为补充。

Awesome Tauri[21] - 精选的 Tauri 生态系统和社区中最好的东西,包含插件和应用,可以借鉴和学习。

Tauri issues[22] - 质量很高的问题回答,可以解决开发中遇到的大量困惑或报错。如果未搜到,还可以自己上报,执行 cargo tauri info 或 npm run tauri info 可以查看平台和版本信息。

Tauri discussions[23] - 讨论社区

MDN doc[24] - 很权威的 Web 技术文档,包含 CSS,HTML,JavaScript。

Rust doc[25] - Rust 编程语言基本语法学习

npmjs[26] - 前端生态的包管理网站

crates.io[27] - Rust 生态的包管理网站

开发准备

编辑器推荐使用 Visual Studio Code[28],需要安装的插件:

Tauri[29] - 对 Tauri 命令和 tauri.conf.json JSON 验证提供支持。

rust-analyzer[30] - 插件提供了对 Rust 编程语言的支持。包含代码提示,类型定义,代码跳转等等。

crates[31] - 是 crates.io 依赖项的插件。旨在帮助开发人员在使用 Cargo.toml 时管理依赖项(鼠标悬停 crate 名称可以显示可用版本列表)。

常见问题

子窗口不能使用 __TAURI__ API

新创建的远程 URL 子窗口无法使用 Tauri API,因为这与 Tauri 架构安全是违背的,以下有两条相关 issues:

[bug] cant use window.TAURI with remote url[32]

[feat] Inject window.TAURI in allowed remote URLs[33]

简单概括为:任何与 IPC 相关的问题都触及到了 Tauri 核心,并不能快速解决此类问题,但在 v2,v3 或未来更高的版本会有所改进。

Tauri 不会在外部 URL 开的窗口上注入 Tauri API,如果项目没有本地资源,可以通过将 distDir 设置为远程 URL 来解决这个问题,或者在使用的运行时更改它。

但这种情况下只有一个外部 URL 能够访问 Tauri API,其实就是修改 tauri.conf.json 中配置的 build.devPath(开发环境) 和 build.distDir (生产环境)字段。

Brownfield vs Isolation 模式

Brownfield 模式[34]是使用 Tauri 的最简单、最直接的模式,因为它尽可能地与现有的前端项目兼容。但也并非完全兼容(API 未被浏览器广泛支持,Tauri 正在实现中的),请参阅 不兼容部分[35]。

Isolation 模式[36]下前端发送到 Tauri Core 之前会被注入的一个安全的应用程序拦截和修改传入的 IPC 消息(使用 iframe[37] 沙盒隔离,使用浏览器的 SubtleCrypto[38] 来对数据进行加密。

为了确保安全,每次运行应用时都会生成新的密钥),来避免被前端恶意调用。

总结:所以老项目想使用 Tauri 进行套壳,想快速上线,可以考虑 Brownfield 模式。使用 Isolation 模式则更加安全,通信时消息加解密相比于 Brownfield 模式会存在额外的开销成本,除非高性能要求,否则 AES-GCM 身份验证算法的成本几乎可以忽略不计。

评价 Tauri

在技术群,文章评论区也有一些朋友问过我:”如何看待 Tauri?“,我也只是业余折腾,写过几篇浅显的文章而已。

以我目前的了解来看,觉得它很可能成为下一代跨端(桌面,移动端)方案,但前提是它真的实现了比较易用的移动端绑定(目前还在计划中)。Web 的生态奠定了今天的互联网基础,前端技术又是层出不穷,快速迭代。而 Tauri 想做的事情就是实现 Webview 和系统之间的桥接层(站在巨人的肩膀)。

所以跨多少个端,提供什么样的能力是 Tauri 需要考虑的事情,开发应用功能是我们需要考虑的事情。Tauri 未提供的支持,我们也可以通过它的插件机制去扩展。






审核编辑:刘清

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HTML
    +关注

    关注

    0

    文章

    277

    浏览量

    34499
  • CSS
    CSS
    +关注

    关注

    0

    文章

    109

    浏览量

    14354
  • LINUX内核
    +关注

    关注

    1

    文章

    316

    浏览量

    21618
  • png
    png
    +关注

    关注

    0

    文章

    14

    浏览量

    4409

原文标题:一文读懂 Tauri

文章出处:【微信号:Rust语言中文社区,微信公众号:Rust语言中文社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    Stm32寄存器与库函数概览

    Stm32寄存器与库函数概览(摘自固件库使用手册)
    发表于 01-26 11:04

    AssetsLibrary框架详细解析—— 基本概览

    AssetsLibrary框架详细解析(一) —— 基本概览
    发表于 04-29 15:12

    EL显示器的发展历史概览

    EL显示器的发展历史概览
    发表于 06-03 06:13

    STM32中断应用概览

    目录一、启动文件简介二、RCC—使用 HSE/HSI 配置时钟1、RCC 主要作用—时钟部分2、RCC框图剖析—时钟树3、配置系统时钟实验三、STM32 中断应用概览1、异常类型2、NVIC 简介
    发表于 08-10 07:08

    ESP32的UART串口通信概览

    ESP32 之 ESP-IDF 教学(九)—— 串口通信(UART)文章目录ESP32 之 ESP-IDF 教学(九)—— 串口通信(UART)一、ESP32 的 UART 概览1、简介2、UART
    发表于 12-09 07:52

    低功耗数字VLSI设计:概览

    低功耗数字VLSI设计:概览:
    发表于 07-25 16:44 0次下载
    低功耗数字VLSI设计:<b class='flag-5'>概览</b>

    MEDICI的语法概览

    MEDICI 的语法概览 语句简介
    发表于 08-27 18:01 0次下载

    Apple平板iPad 概览

    Apple平板iPad 概览 规格: 尺寸:242.8
    发表于 02-01 11:26 1062次阅读

    机器学习概览

    机器学习概览
    发表于 09-07 11:11 4次下载
    机器学习<b class='flag-5'>概览</b>

    MSP430的路线图概览介绍

    MSP430 概览和路线图
    的头像 发表于 08-22 01:00 2700次阅读

    EF3器件概览

    电子发烧友网站提供《EF3器件概览.pdf》资料免费下载
    发表于 09-27 09:13 1次下载
    EF3器件<b class='flag-5'>概览</b>

    Eagle器件概览

    电子发烧友网站提供《Eagle器件概览.pdf》资料免费下载
    发表于 09-27 09:22 3次下载
    Eagle器件<b class='flag-5'>概览</b>

    SALEAGLE FPGA器件概览

    电子发烧友网站提供《SALEAGLE FPGA器件概览 .pdf》资料免费下载
    发表于 09-27 09:16 0次下载
    SALEAGLE FPGA器件<b class='flag-5'>概览</b>

    SALELF 2系列FPGA器件概览

    电子发烧友网站提供《SALELF 2系列FPGA器件概览.pdf》资料免费下载
    发表于 09-26 15:08 1次下载
    SALELF 2系列FPGA器件<b class='flag-5'>概览</b>

    模拟输出及架构概览

    模拟输出及架构概览
    发表于 11-04 09:52 3次下载
    模拟输出及架构<b class='flag-5'>概览</b>