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

news2025/1/16 1:08:15


文章目录

  • 前言
  • 一、搭建 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-angular
  pnpm 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.coloradmin.cn/o/1331748.html

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

相关文章

WARNING: HADOOP_SECURE_DN_USER has been replaced by HDFS_DATANODE_SECURE_USER.

Hadoop启动时警告,但不影响使用,强迫症的我还是决定寻找解决办法 WARNING: HADOOP_SECURE_DN_USER has been replaced by HDFS_DATANODE_SECURE_USER. Using value of HADOOP_SECURE_DN_USER.原因是Hadoop安装配置于root用户下,对文件需要进…

Linux---基础操作命令

内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…

一文详解SpringBoot 定时任务(cron表达式)

IDE:IntelliJ IDEA 2022.2.3 x64 操作系统:win10 x64 位 家庭版 JDK: 1.8 文章目录 一、如何开启一个SpringBoot定时任务?二、cron表达式详解2.1 语法格式2.2 符号解析2,2.1 通用符号: , - * /2.2.2 专有符号:?L w 2.3…

【JAVA】分布式链路追踪技术概论

目录 1.概述 2.基于日志的实现 2.1.实现思想 2.2.sleuth 2.2.可视化 3.基于agent的实现 4.联系作者 1.概述 当采用分布式架构后,一次请求会在多个服务之间流转,组成单次调用链的服务往往都分散在不同的服务器上。这就会带来一个问题:…

异常处理和单元测试python

一、实验题目 异常处理和单元测试 二、实验目的 了解异常的基本概念和常用异常类。掌握异常处理的格式、处理方法。掌握断言语句的作用和使用方法。了解单元测试的基本概念和作用。掌握在Python中使用测试模块进行单元测试的方法和步骤。 三、实验内容 编程实现如下功能&a…

跨平台Markdown编辑软件Typora mac功能介绍

Typora mac是一款跨平台的Markdown编辑器,支持Windows、MacOS和Linux操作系统。它具有实时预览功能,能够自动将Markdown文本转换为漂亮的排版效果,让用户专注于写作内容而不必关心格式调整。Typora Mac版除了支持常见的Markdown语法外&#x…

网站被CC攻击了怎么办?CC攻击有什么危害

网络爆炸性地发展,网络环境也日益复杂和开放,同时各种各样的恶意威胁和攻击日益增多,其中网站被CC也是常见的情况。 CC攻击有什么危害呢? 被CC会导致: 1.访问速度变慢:网站遭受CC攻击后,由于…

模式识别与机器学习(十一):Bagging

1.原理 Bagging [Breiman, 1996a] 是井行式集成学习方法最著名的代表.从名字即可看出,它直接基于自助采样法(bootstrap sampling)。给定包含m 个样本的数据集,我们先随机取出一个样本放入采样集中,再把该样本放回初始数据集,使得…

高频知识汇总 | 【操作系统】面试题汇总(万字长博通俗易懂)

前言 这篇我亲手整理的【操作系统】资料,融入了我个人的理解。当初我在研习八股文时,深感复习时的困扰,网上资料虽多,却过于繁杂,有的甚至冗余。例如,文件管理这部分,在实际面试中很少涉及&…

《PySpark大数据分析实战》-18.什么是数据分析

📋 博主简介 💖 作者简介:大家好,我是wux_labs。😜 热衷于各种主流技术,热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员(PCTA)、TiDB数据库专家(PCTP…

展望2023年CSDN博客之星评选

目录 1 前言2 博客的意义3 人工智能对博客的影响4 AI 技术下的成长与分享5 技术的探索6 博客之星评选对于技术人的激励作用7 结语 1 前言 当我们回顾过去,博客不仅仅是一种记录生活、分享经验的方式,更是一个见证自我成长与进步的平台。站在2023年度 CS…

Python算法例25 落单的数Ⅲ

1. 问题描述 给出2n2个非负整数元素的数组,除其中两个数字之外,其他每个数字均出现两次,找到这两个数字。 2. 问题示例 给出[1,2,2,3,4,4,5,3]&#xff0c…

SpringIOC之AbstractMessageSource

博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

nodejs+vue+微信小程序+python+PHP计算机网络在线考试系统-计算机毕业设计推荐

信息数据的处理完全依赖人工进行操作, 所以电子化信息管理的出现就能缓解以及改变传统人工方式面临的处境,一方面可以确保信息数据在短时间被高效处理,还能节省人力成本,另一方面可以确保信息数据的安全性,可靠性&…

el-tree lazy懒加载(进阶版)

2023.12.22今天我学习了el-tree如何实现懒加载&#xff0c;效果如&#xff1a; 代码如下&#xff1a; 懒加载的使用不需要用:data <template><div><el-tree:props"props":load"loadNode"lazynode-key"id"show-checkbox/><…

新版IDEA中Git的使用(一)

说明&#xff1a;本文介绍如何在新版IDEA中使用Git 创建项目 首先&#xff0c;在GitLab里面创建一个项目&#xff08;git_demo&#xff09;&#xff0c;克隆到桌面上。 然后在IDEA中创建一个项目&#xff0c;项目路径放在这个Git文件夹里面。 Git界面 当前分支&Commit …

Pinely Round 3 (Div. 1 + Div. 2)(A~D)(有意思的题)

A - Distinct Buttons 题意&#xff1a; 思路&#xff1a;模拟从&#xff08;0,0&#xff09;到每个位置需要哪些操作&#xff0c;如果总共需要4种操作就输出NO。 // Problem: A. Distinct Buttons // Contest: Codeforces - Pinely Round 3 (Div. 1 Div. 2) // URL: https…

Leetcode—1962.移除石子使总数最小【中等】(最大堆做法)

2023每日刷题&#xff08;六十八&#xff09; Leetcode—1962.移除石子使总数最小 实现代码 class Solution { public:void downAdjustHeap(vector<int>& arr, int low, int high) {int i low, j i * 2 1;while(j < high) {if(j 1 < high && arr…

7.3电话号码的字母组合(LC17-M)

算法&#xff1a; 数字到字母要映射&#xff0c;可以用map&#xff0c;也可以用二维数组&#xff0c;或者直接用一个字符串 这里用字符串&#xff0c;键入的数字对应字符串的索引 String[] numString {"", "", "abc", "def", &quo…

前端开发有了 Next.js,还需要后端开发吗 ?

前言 在迅速变化的Web开发领域&#xff0c;选择正确的工具和框架对于打造优秀的用户体验至关重要。Next.js&#xff0c;作为React框架的佼佼者&#xff0c;因其前后端流畅集成而受到广泛欢迎。这就引出了一个有趣的问题&#xff1a;我们真的需要Next.js的后端功能吗&#xff1f…