【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建


文章目录

  • 前言
  • 一、搭建 Tauri 2.0 开发环境
  • 二、创建 Tauri 2.0 项目
    • 1.创建项目
    • 2.安装依赖
    • 4. 编译运行
  • 三、设置开发环境
  • 四、项目结构


前言

Tauri在Rust圈内成名已久,凭借Rust的可靠性,使用系统原生的Webview构建更小的App
以及开发人员可以灵活的使用各种前端框架而一战成名。

然而,这款年轻的框架却有着大量的问题待解决,在这种情况下,他竟然还出了2.0,想要支持安卓苹果端,在我看来步子还是跨的挺大的,有一个相当棘手的问题就是文档资料严重跟不上,大量内容需要用户主动去探索,并且出了问题也只能是自己解决。

不论如何,既然选择了Tauri,那就要解决这些麻烦。


本节内容应该是本系列文章内容的第一篇,介绍如何搭建Tauri 2.0的开发环境,以及创建Tauri 2.0 的项目。

Tauri 2.0目前还处于Alpha测试阶段,目前有很多东西尚未完善,功能极少,但可以确定的是,2.0版本是支持跨端应用开发的,由于对Tauri期待比较高,已经迫不及待想要上手体验了,我其中踩到的坑以及解决思路会写到这,供大家参考。

对于 Tauri 2.0 ,如何创建项目是一个很困难的问题,官方没有提供任何文档,默认创建的项目就是1.X的版本,如果你想体验Tauri的最新特性,那么就需要自己探索了,一些Issue中提到过如何创建2.0项目,但是别那么多的Issue淹没了,因此这里要确定创建2.0项目的方法。(希望正式发布的时候会方便点)

Tauri 2.0 目前有个相当离谱的坑就是依赖问题,pnpm能解决js或ts的依赖问题,但是cargo只能让依赖保持最新,并且还有缓存,寻找问题的原因变得极为困难,这就导致会出现一些莫名其妙的问题,因为Tauri版本与插件版本会出现不兼容问题。

本系列文章是非线性,一些要紧的内容会先发在前面,一些优先级比较低的内容会发在后面,最终会写一个目录帖告诉大家阅读顺序。(重要程序与优先级取决于我是否有空,以及是否有这样的例子。)

一、搭建 Tauri 2.0 开发环境

本教程默认你已经安装基本开发环境,如果你没有安装,请查看往期教程。

我当前的环境如下

软件版本
Nodejsv18.16.0
pnpm任意
rust1.70

由于Rust和Nodejs先前已有安装教程,这里就不多写了,本次只介绍安装Pnpm,Pnpm是一个更加好用的包管理工具,具体哪里好,建议百度一下,你就知道。安装较为简单

npm install pnpm -g

安装没有报错就说明安装成功。

二、创建 Tauri 2.0 项目

1.创建项目

Tauri 2.0 使用pnpm创建项目的命令如下

pnpm create tauri-app --alpha

官方也提供了其他方式创建项目,如果你有兴趣,可以去官网看看 ✈飞机票

执行那条命令,以下是输入的选项:

  1. 项目名:Tauri-Angular
  2. 前端语言:Typescript / JavaScript
  3. 包管理器:pnpm
  4. UI模板:Angular
  5. 是否初始化移动端: y

以上是我翻译和操作的结果,你可以适当选择,或者直接使用和我一样的,具体效果如下图。

2.安装依赖

按照提示,应该是依次执行

  cd tauri-angularpnpm install

4. 编译运行

接下来直接编译运行初始项目,看看效果

pnpm tauri dev

命令运行后有一个较长的编译过程

开始编译

编译完成后,效果如下

三、设置开发环境

无论是Tauri还是Rust,官方都建议使用VSCode来进行开发,同时对其支持也是相当完善,因此使用VSCode做开发。安装好VSCode后,只需要安装以下安装插件
在这里插入图片描述
只要安装这三款插件即可

四、项目结构

当前项目文件结构如下
在这里插入图片描述
在当前目录中,需要关心的,基本上只有

  • src:Angular前端源文件夹
  • src-tauri:Rust后端源文件夹

至于其他的,都是程序自动维护的,最好不要手动更改。
Angular前端文件
这个部分取决于你使用的是哪种前端,但本质上,还是前端那些东西,就不再赘述了。

但有一点是值得注意的

此按钮功能的实现是前后端互动实现的,因此查其代码


此时查看后端文件

在代码框中,有以下两个函数

#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
}#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_shell::init()).invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");
}

其中greet就是前端所调用的那个函数,而run是程序的入口,有以下需要注意的

  • .plugin(tauri_plugin_shell::init())注册了shell插件(必选)。
  • .invoke_handler(tauri::generate_handler![greet])注册了函数,使得前端可以调用。

也就是说,rust后端定义了command必须经过注册,前端才可以使用,代码编写顺序参考以上。

原定计划本节有安装环境配置,由于环境存在问题,在后续会给出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240725.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA 中 Tomcat 日志乱码

1、服务器输出乱码 修改 File -> settings -> Editor -> General ->Console 中,utf-8改为GBK,反之改成utf-8 2、Tomcat Localhost Log 或者 Tomcat Catalina Log乱码 进入Tomcat 中的conf文件中的logging.properties 哪个有问题改哪个&…

虚拟机的下载、安装(模拟出服务器)

下载 vmware workstation(收费的虚拟机) 下载vbox 网址:Oracle VM VirtualBox(免费的虚拟机) 以下选择一个下载即可,建议下载vbox,因为是免费的。安装的时候默认下一步即可(路径最好…

【数据安全】Java AES加密和解密

自我介绍 做一个简单介绍,酒架年近48 ,有20多年IT工作经历,目前在一家500强做企业架构.因为工作需要,另外也因为兴趣涉猎比较广,为了自己学习建立了三个博客,分别是【全球IT瞭望】,【…

Kubernetes 架构原则和对象设计

什么是 Kubernetes Kubernetes 是谷歌开源的容器集群管理系统 • 基于容器的应用部署、维护和滚动升级; • 负载均衡和服务发现; • 跨机器和跨地区的集群调度; • 自动伸缩; • 无状态服务和有状态服务; • 插件机制…

fba海派和传统海运的区别,亚马逊 FBA货物包装技巧—站斧浏览器

fba海派和传统海运的区别 1、美国FBA海派是什么? 美国FBA海派即将商品通过海洋运输的方式运送到美国亚马逊FBA仓库的服务。这种方式主要适用于大批量或大件商品,因为相比其他物流方式,海派具备成本低和运载量大的优势。 2、传统海运是什么…

编译opencv和opencv_contrib

1 下载源码 下载opencv源码https://github.com/opencv/opencv 下载opencv源码https://github.com/opencv/opencv_contrib 2 开始编译 构建需要下载ffmpeg的包,cmake构建时会自动下载,但是比较满,这里可以从下面链接直接下载 https://downloa…

ECMAScript基础入门:从语法到应用

在此之前我以及发布过关于JavaScript基础知识点大家也可以参考 大家有关于JavaScript知识点不知道可以去 🎉博客主页:阿猫的故乡 🎉系列专栏:JavaScript专题栏 🎉ajax专栏:ajax知识点 🎉欢迎关注…

C++ Qt开发:Charts折线图绘制详解

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QCharts折线图的常用方法及灵活运用。 折线图…

C++ map和vector向量使用方法

C map用法 C 中 map 提供的是一种键值对容器,里面的数据都是成对出现的,如下图:每一对中的第一个值称之为关键字(key),每个关键字只能在 map 中出现一次;第二个称之为该关键字的对应值。 map的使用 需要导入头文件 #include …

采用线性插值的方法 在n个坐标点的基础上 准备添加一个坐标点p 根据给出p的横坐标 计算出p的纵坐标 np.interp()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 采用线性插值的方法 在n个坐标点的基础上 准备添加一个坐标点p 根据给出p的横坐标 计算出p的纵坐标 np.interp() [太阳]选择题 下列选项正确的是: import numpy as np x np.arra…

[架构之路-264]:个性特征 - 到底什么才是工程师文化?

目录 前言: 一、三种类型的商业公司与生存法则 (1)运营或销售驱动型公司 (2)产品驱动型公司 (3)技术驱动型公司 二、工程师文化特征解读1 三、工程师文化特征解读2 (1&#…

解决Unity物体速度过快无法进行碰撞检测(碰撞检测穿透)

解决Unity物体速度过快无法进行碰撞检测(碰撞检测穿透) 一、解决碰撞检测穿透方法一Collision Detection碰撞检测总结: 二、解决碰撞检测穿透方法二 一、解决碰撞检测穿透方法一 首先我们知道只要是跟碰撞相关的基本都是离不开刚体 Rigidbod…

八大排序算法@直接插入排序(C语言版本)

目录 直接插入排序概念算法思想代码实现核心算法:直接插入排序的算法实现: 特性总结 直接插入排序 概念 算法思想 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中,直到所有的记录插入完为止,得到一个新…

「C/C++ 01」 深拷贝和浅拷贝

目录 一、概念 1. 浅拷贝 2. 深拷贝 3. 深浅拷贝问题 4. 总结 二、在C的类中实现深拷贝 1. 拷贝构造函数 中实现深拷贝 a. 自己开辟一个新空间,然后将内容拷贝到新空间 b. 借助构造函数来实现深拷贝 2. operator 中实现深拷贝 a. 自己开辟一个新空间,…

One Wire协议应用篇(c语言板)

一.项目简介 利用DS18B20实时检测温度并显示在LCD1602显示屏上,同时可以通过K1,K2,K3,K4设置最高温度和最低温度利用AT24C02可以实现掉电不丢失,最后当检测温度大于或小于最高温时,会在LCD1602显示屏上显示OV:H或OV:L。 二.准备材料 AT89C52、…

ESP32+LVGL笔记(6)-把712k的一二级汉字字库放在SPIRAM

文章目录 1.字库制作2.字库烧录到ESP32-S3的flash2.1 配置好分区文件2.2 汉字库文件烧录到ESP32的flash 3.将字库从 flash 拷贝到 SPIRAM3.1 工程配置中有关 SPIRAM 部分3.2 将汉字库从flash拷贝到SPIRAM的代码3.3 在进入lvgl之前调用函数 copyHZK_from_flash_to_SPIRAM 在前面…

Python入门知识点分享——(八)文件的open方法

学完了Python当中的数据类型,下一步我们来了解如何用Python语言打开文件并添加内容。 目录 file mode buffering encoding errors newline closefd opener 函数 打开文件需要用到open函数,完整的语法格式如下所示,为了演示方便&…

【Linux系统基础】(1)Linux基础命令全面详解

在计算机世界中,Linux操作系统以其稳定性、安全性和开源性而受到广大程序员和系统管理员的喜爱。然而,对于初学者来说,Linux的命令行界面可能会显得有些复杂和难以理解。本文将详细介绍一些常用的Linux基础命令,帮助你更好地理解和…

TLC2543(12位A/D转换器)实现将输入的模拟电压显示到数码管上

代码&#xff1a; #include <reg51.h> #define uchar unsigned char #define uint unsigned int// 数码管0-9 unsigned char seg[] {0x3F, 0x06, 0x5B, 0x4F, 0x66, 0x6D, 0x7D, 0x07, 0x7F, 0x6F}; sbit SDO P1^0; sbit SDI P1^1; sbit CS P1^2; sbit CLK P1^3; s…

【C语言】打印内存数据

C语言&#xff0c;用函数封装&#xff1a;16进制打印unsigned char *p指向的内存&#xff0c;长度为int l。16个字节&#xff0c;换一次行。16个字节用一个字符串缓存&#xff0c;一次打印。 以下是一个使用函数封装的C语言代码&#xff0c;用于以16进制格式打印unsigned char …