fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Tauri
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://tauri.app/
GitHub:https://github.com/tauri-apps/tauri
网站描述:使用Web前端构建更小,更快,更安全的桌面应用

tauri并非前端框架,而是一个rust框架。所以,要使用这个框架,还需要懂一定的rust开发。当然,如果你只需要将纯前端的代码进行打包,完全可以使用这个框架。



简介

Tauri 是一个框架,用于为所有主要桌面平台构建小巧、快速的二进制文件。开发人员可以集成任何可编译为 html、JS 和 css 的前端框架,以构建他们的用户界面。应用程序的后端是一个基于 Rust 的二进制文件,带有一个前端可以与之交互的 api。

Tauri 应用程序的用户界面目前在 macOS 和 Windows 上利用 tao 作为窗口处理库,在 Linux 上通过 Tauri 团队孵化和维护的 WRY 利用 WebKit、Windows上的 WebView2 和 Linux 上的 WebKitGTK 创建一个统一的系统 webview(和其他好东西,如菜单和任务栏)接口。


特性:

  • 无本地主机
  • 安全模式的自定义协议
  • 动态超前编译(dAoT)与功能树摇动
  • 功能性地址空间布局随机化
  • 运行时对函数名和信息进行 OTP salting
  • CSP 注入

为什么使用 tauri

  • 原始Tauri应用程序的打包大小小于3 MB,比Electron的大小小140 MB。
  • 内存占用小于使用相同代码库构建的Electron应用程序的大小的一半。
  • 安全是Tauri的头等大事,我们正在不断创新。
  • 遗憾的是,底层是 Chromium 的使用者(例如Electron)无法获得 FLOSS(自由/开源软件) 许可。


技术细节

tauri 具有五个主要组成部分:

  • 用于创建,开发和构建应用程序的Node.js CLI
  • Rust Core,用于绑定到底层WEBVIEW并提供可摇树优化的API
  • Rust Bundler用于制造最终的二进制文件
  • Webview的Rust绑定
  • Webview低层库,用于创建和与操作系统“本机” Webview交互

Tauri应用程序中的用户界面目前在macOS上使用Cocoa / WebKit,在Linux上使用gtk-webkit2,在Windows上通过Edge使用MSHTML(IE10 / 11)或Webkit。 Tauri基于MIT许可的进行工作,即webview。


tauri 与 electron 的对比

TauriElectron
MacOS 的包大小0.6 MB47.7 MB
MacOS 的内存消耗13 MB34.1 MB
接口服务提供VariesChromium
后台绑定RustNode.js (ECMAScript)
底层引擎C/C++V8 (C/C++)
自由/开源软件YesNo
多线程YesNo
字节码传递YesNo
可以显示PDFYesNo
多窗口SoonYes
GPU 访问YesYes
自动更新SoonYes (1)
跨平台YesYes
自定义 APP 图标YesYes
Windows 包YesYes
MacOS 包YesYes
Linux 包YesYes
iOS 包SoonNo
Android 包SoonNo
支持本地 web 服务YesYes
没有本地服务选项YesNo
桌面文件盒SoonNo

Notes

  1. Electron在Linux上没有本地自动更新程序,但由electron-packager提供

环境搭建

以下为 macOS 为例子, Tauri是一个多语言系统,因此需要大量工具。

系统依赖项:

$ brew install gcc

使用 brew 下载 gcc 依赖

node 运行环境:

此框架的运行需要 node 12 以上的环境:

nvm install 12
nvm use 12

使用 nvm 下载 node 12

Rustc and Cargo 包管理

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

这条命令时需要梯子才能下好的
下载的时候一路回车即可
完成后,关闭终端,打开后查看

grewer@Grewer-2 ~ % rustc --version
rustc 1.42.0 (b8cedc004 2020-03-09)

Tauri 打包工具

$ cargo install tauri-bundler --force

此命令的下载也建议使用梯子,不然会比较慢

至此, 此框架的基础环境都已经搭建完成


使用(无缝融合进现有的项目)

首先你需要一个 web 项目, 可以是 react-create-app 或者 vue-cli 创建的项目,也可以是任意的 web 项目

在项目中下载 tauri:

yarn add tauri
# 或者
npm install tauri

下载完成后,在当前项目的目录下,使用命令

tauri init

之后, 你的项目下会出现一个目录 src-tauri,再根据你的 web 项目启动时的端口修改文件 src-tauri/tauri.conf.json:

 "build": {
    "distDir": "../build", //打包后的路径
    "devPath": "http://localhost:8080", // 此为 dev 启动时的url
    "beforeDevCommand": "",
    "beforeBuildCommand": ""
  },

现在启动项目:

"dev": "tauri dev",

第一次启动的时候会有点慢,要加载一些东西,后面就快了很多了。


链接: https://fly63.com/nav/3595

more>>
相关栏目
Materialize
基于Material Design的现代响应式前端框架
官网GitHub
Element UI
一套基于 Vue 2.0 的桌面端组件库
官网GitHub
Material Design(MDB)
领先的Bootstrap UI套件之一
点击进入
Muse-UI
基于 Vue2.0 的 Material Design UI 库
官网GitHub
sb-admin
基于Bootstrap简约美观的后台管理模板
官网GitHub
Vue-Access-Control
Vue权限管理解决方案
官网GitHub
RmlUI
桌面端GUI开发框架
官网GitHub
kitty-ui
基于 Vue + Element 实现的权限管理系统
点击进入GitHub
vue-multiselect
Vue.js 打造的下拉组件
官网GitHub
Structor
先进的React GUI编辑器
点击进入GitHub
lulu ui
基于jQuery,针对PC网站,兼容IE7+的前端UI框架
官网GitHub
Ant Design
是一个致力于提升『用户』和『设计者』使用体验的中台设计语言
官网GitHub
vue-design-system
一个用于基于 Vue.js 构建 UI 设计系统的开源工具
官网GitHub
Element Plus
基于 Vue 3,面向设计师和开发者的组件库
官网GitHub
vue-blu
基于Vuejs和Bulma开发的开源UI组件库
官网GitHub
TDesign
开源的企业级设计体系
官网GitHub

手机预览