1.初识Tauri

2024-02-18 01:28
文章标签 初识 tauri

本文主要是介绍1.初识Tauri,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 一、前言
    • 二、基本认识
    • 三、js与rust通信
    • 四、构建应用


一、前言

原文以及后续文章可点击查看:初识Tauri。

Tauri是一款比较新的跨平台桌面框架,也是我目前最喜欢的一个框架,其官网为:Tauri

它的作用其实和Electron很像:使用Web前端技术开发桌面软件。

但不同之处在于,Electron是可以通过纯粹前端技术进行开发,也就是你只需要懂htmljscss,就可以使用它来开发软件了。

Tauri则不同,除了这些基础的,你还需要懂rust这门开发语言才行,所有js不支持的本地功能,你都可以使用rust来自行扩展。

虽然这看上去比electron更麻烦了,就开发体验来说,我觉得tauri比electron要好得多,你几乎不需要任何其它配置就可以直接进行开发使用、并且只要你熟悉rust语言,就能非常方便的任意扩展本地功能集。

如果想要在electron框架中自定义扩展本地功能集,你大概率是需要写C++代码、然后再将两者进行绑定的,相比之下electron可能还更麻烦一点。

虽然tauri在开发本地应用的体验上比electron要好上不少,但缺点也是显而易见的:

  1. 你需要学会使用rust语言,这提升了开发者的使用门槛。
  2. tauri出现的较晚,各种文档、资料目前都较少,这进一步提高了门槛。
  3. tauri跨平台兼容性较差,这是它生成的可执行文件只有几兆的根本原因:它使用了是系统自带的webview。

但不管怎么说,时代始终是在向前发展的,我相信未来这些问题都会被相继解决的。

学习tauri开发应用还有一个很重要的因素:tauri还将支持移动端开发,而electron只支持PC端开发。

也就是说,将来tauri可能真的能实现一套代码、全平台运行,而且使用的还是前端的技术,相比于另一个目前积极开发、试图一套代码全平台运行、但目前依旧生态薄弱的flutter,我甚至觉得tauri会更加有前景。

二、基本认识

官方教程一般都是对有一定经验的开发者所写的,所以基本不可能用大白话去写教材,这也就导致新手其实是很难段时间看懂的。

进入tauri主页后,你基本就只需要关注左上角的两个菜单:

image-20240202094001621

第一个是官方写的入门教材文档、用于前期的学习。

而第二个这是tauri中各种配置、可用api,用于后期快速查阅。

本文首先来看看第一个,点进去后可以看到下图所示的内容:

image-20240202094347121

首先第一个是准备开发环境,然后第二个是如何快速使用各种前端技术框架在tauri中构建本地应用。

这里我就不挨着按官方文档来了,简单来说你想要使用tauri框架,你就得先安装好rust开发环境,没有安装的可以参考文章:初识rust

如果你目前是正常安装的windows10及之后的电脑,那么默认就已经安装了WebView2,不用理会,否则,你需要自行安装该组件:Microsoft Edge WebView2。

这个组件就是tauri在windows平台所利用的本地浏览器功能,因为tauri直接调用的它,而不是像electron中那样会直接将整个浏览器的核心功能打包进最终的安装包内,所以能使得它的体积非常小巧。

所以网上才会有这样的说法:每安装一个使用electron开发的程序,都相当于在你的电脑上多安装了一个浏览器。

至于linux、mac平台,过程是差不多的,可以自行探索。

为了能让大家能够更加清楚的认识到tauri框架是如何工作的,这里我将从零搭建一个tauri的基本开发环境,这里的前提时你对rust语言比较熟悉。

从后面开发,我将直接使用vue3进行开发,如果你对vue3不熟悉,可以参考文章:vue初识。

tauri自带了一个命令行工具,名字为tauri-cli,我们需要先用rust中的cargo工具将其安装:

cargo install tauri-cli

注意:该步骤仅针对想要了解tauri框架是如何工作、并原因自己亲手实践的人,如果你仅仅只是想要见识一些,那么这一步并不是必要的。

因为后文我们会直接使用前端的npm工具进行管理、tauri官方已经推出了现成的框架可以让我们直接使用,正常开发项目中不需要用到这里安装的tauri-cli

安装完成后,我可以任意新建一个文件夹,比如我新建的文件夹名为test,然后在该文件内使用tauri-cli提供的命令来初始化一个rust项目:

cargo tauri init

然后会让你选择项目配置:

image-20240202102101028

最后最后两个用不着,要删除默认值留空白后按Enter,只需要填前面四个选项:

  1. 应用名
  2. 窗口标题
  3. 前端代码位置
  4. 服务器启动的位置

后两个位置一定要相同,并且一般都是rust代码的上一级目录,所以前面要添加../

然后下一步我们就可以创建一个src文件夹了,也就是上面所填的,并在其中创建一个index.html文件作为我们的主窗口所使用的前端页面:

image-20240202102921355

然后从命令行进入src-tauri文件夹,运行命令cargo tauri dev启动应用:

image-20240202103104355

等待其编译完毕,就可以看到窗口成功的被启动了。

三、js与rust通信

仅仅像上面这样启动起来还是不够的,前端都是使用js代码写的,而现在后端我们使用的则是rust代码。

为了能扩展js本地功能,我们就需要让js调用rust代码。

想要实现这一点,需要执行下面三个步骤:

首先是在tauri的配置文件中启动js调用rust代码的能力:

image-20240202103512044

只要将该配置项写上即可:"withGlobalTauri": true

然后第二步,在rust代码中注册想要被js代码使用的函数:

image-20240202103855063

正常写rust中的函数即可,唯一需要注意的是,如果你想要你的函数被js调用,那么必须在前面添加一个宏:#[tauri::command]

写了函数后还需要注册,注册的方式就是在main函数中调用invoke_handler函数,该函数的参数由tauri::generate_handler!这个官方提供的宏来产生。

这个宏可接收的是一个数组,其中的所有元素都是使用了#[tauri::command]的函数,你只需要将函数名挨个填入进去即可注册函数成功。

然后来到第三步,就是js代码中调用该函数:

image-20240202104502398

首先从tauri挂载的全局对象tauri中取出其提供的invoke函数:

const { invoke } = window.__TAURI__.tauri

然后使用该函数来调用我们前面在rust中注册的函数:

    invoke('hello_tauri', { name: 'World' });

它的第一个参数是函数名,第二个参数就是函数的参数对象,因为前面我函数中写的参数名为name,所以这里的对象{}中存放的就也是一个name键对应其值为"world"

由于它返回的是一个promise对象,想要取出其值可以用await,但这里不是在异步函数中,所以无法使用,只能暂时使用该对象上的then函数得到返回值:

invoke('hello_tauri', { name: 'World' }).then((response) => {console.log(response)});

此时运行程序,按F12打开控制台,就能看到调用成功、成功得到了rust函数的返回值:

image-20240202105030444

上面是js代码调用rust函数的过程,rust同样也是可以调用js代码的,只不过得需要依靠“事件”,这个后文我会提及,因为纯js代码没有类型提示写起来还是太过难受了。

四、构建应用

开发完毕后,我们需要将其构建为可执行文件分发给其它人使用。

那么首先第一步,你需要修改本项目的标识符:

image-20240202110451186

这个标识符可以任意,不过一般为本项目的名字,或者类似这样的路径com.test,和java中包的路径很像。

然后你就可以运行命令:

cargo tauri build

首次构建的话,这个过程会比较漫长,慢慢等待即可:

image-20240202110657130

构建完成后,它还会自动帮我们生成安装包,不过这个需要你有“梯子”去下载相应的工具,否则会失败,但这并不影响软件的正常使用:

image-20240202111247808

比如我这里第一个msi类型的安装包就构建成功了,并且显示出来了路径,但第二个nist安装包就构建失败了。

这些在你前期学习都无所谓的,不愿管,直接来到目录src-tauri\target\release中,可以看到项目同名的可执行文件,双击它即可运行:

image-20240202111500737

并且直接将其发给其它人也是能够直接使用的,但要注意,如果对方电脑上没有安装WebView2,那么就运行不起来,需要先下载的WebView2

但这并不需要你担心,刚才提到的那个安装包会自动对用户环境进行检测,如果发现目标计算机上没有安装,那么它会自动引导用户去安装。

所以真正分发应用的时候,还是建议你分发它构建好的安装包:

image-20240202111751917

至于如何配置它,我会在后面的文章对其进行详细介绍。

原文以及后续文章可点击查看:初识Tauri。

这篇关于1.初识Tauri的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/719613

相关文章

Linux操作系统 初识

在认识操作系统之前,我们首先来了解一下计算机的发展: 计算机的发展 世界上第一台计算机名叫埃尼阿克,诞生在1945年2月14日,用于军事用途。 后来因为计算机的优势和潜力巨大,计算机开始飞速发展,并产生了一个当时一直有效的定律:摩尔定律--当价格不变时,集成电路上可容纳的元器件的数目,约每隔18-24个月便会增加一倍,性能也将提升一倍。 那么相应的,计算机就会变得越来越快,越来越小型化。

docker学习系列(一)初识docker

在第一版本上线之后公司,我们决定将之前使用的开源api文档项目转移到本公司的服务器之上,之前用的是showdoc,showdoc利用的是php技术,作为java程序员表示需要快速部署php环境以及apach容器都需要时间,所以采用第二种方法,即利用docker进行快速部署(虽然学习成本也不比php少)。 一、docker简介 docker的官网是https://www.docker.com,

框架template初识

框架初识 框架就是一个别人帮我们搭好的舞台,造好了很多现成的工具供我们使用,让开发过程更快速、简洁。 Gin框架介绍 Gin 是一个用 Go (Golang) 编写的 HTTP Web 框架。 Gin是一个用Go语言编写的web框架。它是一个类似于martini 但拥有更好性能的API框架, 由于使用了 httprouter,速度提高了近40倍。 第一个Gin示例 package mai

【数据结构】--初识泛型

1. 包装类 在Java中,由于基本类型不是继承自Object,为了在泛型代码中可以支持基本类型,Java给每个基本类型都对应了一个包装类型。 1.1 基本数据类型和对应的包装类 除了 Integer 和 Character, 其余基本类型的包装类都是首字母大写。 1.2 (自动)装箱和(自动)拆箱 装箱(装包): 把 基本数据类型 变为 包装类类型 的过程 叫做装箱。 反汇编指

初识Linux · 进度条

目录 前言: 1 缓冲区和回车换行 2 进度条 前言: 我们目前学习了些许知识,已经足够支持我们写一个非常非常小的项目了,即进度条,相信大家都有过下载游戏,等待游戏更新完成的时候,那么此时就有一个进度条,代表着游戏的更新进度,那么我们今天就来模拟实现这个过程,在此之前,我们需要一些预备知识。 1 缓冲区和回车换行 回车换行?是的,你没有看错,相信不少人对换行有一定的误解,我们

Linux初识线程

前言 前面在介绍进程的时候,说过进程的内核表述是"进程是承担资源分配的基本实体",但是我们至今都没有介绍如何理解他?本期我们就会介绍! 目录 前言 一、再谈地址空间和页表 1、OS对物理内存的管理 • 为什么4KB是OS进行I/O的基本单位? 2、再谈页表 • 二级页表 • 如何找到一个变量的所有字节? • 虚拟地址是如何转为物理地址的? • 理解动态内存管理 • 为什么对

初识命名空间

1.创建两个命名空间 ip netns add host1 ip netns add host2 2.  查看命名空间 ip netns ls 3 、 创建veth ip -netns host1 link add veth0 type veth peer name host1-peer 4、 查看命名空间接口  ip -netns host1 address 5、 把hos

Linux进程初识:OS基础、fork函数创建进程、进程排队和进程状态讲解

目录 1、冯诺伊曼体系结构 问题一:为什么在体系结构中存在存储器(内存)? 存储单元总结: 问题二:为什么程序在运行的时候,必须把程序先加载到内存? 问题三:请解释,从你登录上qq开始和某位朋友聊天开始,数据的流动过程。 2、操作系统 2.1操作系统的概念: 我们首先要明白什么是管理: 2.2为什么要有操作系统? 2.3操作系统如何保证稳定和安全呢?(利用系统调用函数解决)

初识string(一)and内存管理

对类和对象的补充:缺省参数在函数定义中从右向左依次赋值,如果从右向左有一个参数没有赋值缺省参数,则左边的变量就不能在赋缺省参数,类中的变量可以赋缺省参数并且没有限制。 在类定义中我们总是看到函数后加const。这其实是调用常量类对象或类对象的意思。 一、引言 俗话说“工欲善其事,必先利其器。”一门语言创造的初衷一定是为了交流和记录重要的事。计算机语言肯定也不例外,虽然计算机语言创造的初衷单纯

数据可视化01-初识echart

1、echart官网 http://echarts.baidu.com/index.html 2、echart特性 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性