【Tauri】(1):使用Tauri1.5版本,进行桌面应用开发,在windows,linux进行桌面GUI应用程序开发,可以打包成功,使用 vite 最方便

本文主要是介绍【Tauri】(1):使用Tauri1.5版本,进行桌面应用开发,在windows,linux进行桌面GUI应用程序开发,可以打包成功,使用 vite 最方便,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1,视频地址:

https://www.bilibili.com/video/BV1Pz421d7s4/

【Tauri】(1):使用Tauri1.5版本,进行桌面应用开发,在windows,linux进行桌面GUI应用程序开发,可以打包成功,使用 vite 最方便

2,官网网站

https://tauri.app/zh-cn/

3,在windows 和 linux 上安装

https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites

在windows 上需要安装 cpp 工具。
在linux 上,需要安装 webkit2

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \build-essential \curl \wget \libssl-dev \libgtk-3-dev \libayatana-appindicator3-dev \librsvg2-dev

然后安装rust 软件:

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh$ rustc --version
rustc 1.74.1 (a28077b28 2023-12-04)

4,先从 vite demo 开始

html 的demo 启动有问题:

https://tauri.app/zh-cn/v1/guides/getting-started/setup/vite

npm create tauri-app@latestNeed to install the following packages:create-tauri-app@3.13.3
Ok to proceed? (y) y
✔ Project name · demo
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScriptTemplate created! To get started run:cd demonpm installnpm run tauri dev

然后就可以执行:

  cd demonpm installnpm run tauri dev

在这里插入图片描述

5,通过 tauri::command 标记函数

https://tauri.app/v1/guides/features/command/

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
}fn main() {tauri::Builder::default().invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");
}

然后前端直接使用函数调用:

<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";const greetMsg = ref("");
const name = ref("");async function greet() {// Learn more about Tauri commands at https://tauri.app/v1/guides/features/commandgreetMsg.value = await invoke("greet", { name: name.value });
}
</script><template><form class="row" @submit.prevent="greet"><input id="greet-input" v-model="name" placeholder="Enter a name..." /><button type="submit">Greet</button></form><p>{{ greetMsg }}</p>
</template>

说明这个并不是 ajax 调用,而是直接调用 rust 的 函数。
类似java 的 jni 方式调用 c 函数。

6,运行结果

在这里插入图片描述
这个函数使用的 rust 处理的,但是前端 vue 项目进行调用的。

7,测试打包

npm run tauri build> demo@0.0.0 tauri
> tauri buildError You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.

修改配置文件:把 com.tauri.dev 修改成其他的就行。

..."bundle": {"active": true,"targets": "all","identifier": "com.tauri.my.demo",

然后就是一顿构建,编译:

  Compiling serialize-to-javascript v0.1.1Compiling tauri-codegen v1.4.2Compiling tauri-build v1.5.1Compiling glib v0.15.12Compiling gdkwayland-sys v0.15.3Compiling tauri-macros v1.4.3Compiling demo v0.0.0 (/data/home/test/tauriWorkspace/demo/src-tauri)Compiling pango v0.15.10Compiling cairo-rs v0.15.12Compiling atk v0.15.1Compiling javascriptcore-rs v0.16.0Compiling gdk-pixbuf v0.15.11Compiling soup2 v0.2.1Compiling gdk v0.15.4Compiling webkit2gtk v0.18.2Building [=======================> ] 449/453: webkit2gtk, gtk, tauri         

最后在文件夹:

demo/src-tauri/target/release
里面有二进制文件:

> tauri buildRunning beforeBuildCommand `npm run build`> demo@0.0.0 build
> vue-tsc --noEmit && vite buildvite v5.1.1 building for production...
✓ 19 modules transformed.
dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-BNZBj5Gh.css   1.40 kB │ gzip:  0.66 kB
dist/assets/index-CaOzi2KF.js   57.66 kB │ gzip: 23.27 kB
✓ built in 764msCompiling demo v0.0.0 (/data/home/test/tauriWorkspace/demo/src-tauri)Finished release [optimized] target(s) in 6.30sBundling demo_0.0.0_amd64.deb (/data/home/test/tauriWorkspace/demo/src-tauri/target/release/bundle/deb/demo_0.0.0_amd64.deb)Bundling demo_0.0.0_amd64.AppImage (/data/home/test/tauriWorkspace/demo/src-tauri/target/release/bundle/appimage/demo_0.0.0_amd64.AppImage)Error failed to bundle project: error running appimage.sh

虽然也有构建失败,但是已经生成了 二进制文件。 demo
只是没有打包成 AppImage 文件。

因为访问 github 网络不好:

https://blog.csdn.net/w13664606186/article/details/132858180

-rwxrwxr-x  1 test test  12M  210 22:57 demo

最后就是12 mb的 文件,包括了htm 。 和 二进制文件。确实特别的小,运行速度快。

这篇关于【Tauri】(1):使用Tauri1.5版本,进行桌面应用开发,在windows,linux进行桌面GUI应用程序开发,可以打包成功,使用 vite 最方便的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.