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

news2024/11/24 6:49:57

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@latest

Need 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 · TypeScript

Template created! To get started run:
  cd demo
  npm install
  npm run tauri dev

然后就可以执行:

  cd demo
  npm install
  npm 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/command
  greetMsg.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 build

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

最后在文件夹:

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

> tauri build

     Running beforeBuildCommand `npm run build`

> demo@0.0.0 build
> vue-tsc --noEmit && vite build

vite 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 764ms
   Compiling demo v0.0.0 (/data/home/test/tauriWorkspace/demo/src-tauri)
    Finished release [optimized] target(s) in 6.30s
    Bundling 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 。 和 二进制文件。确实特别的小,运行速度快。

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

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

相关文章

Educational Codeforces Round 135 (Rated for Div. 2)C. Digital Logarithm(思维)

文章目录 题目链接题意题解代码 题目链接 C. Digital Logarithm 题意 给两个长度位 n n n的数组 a a a、 b b b&#xff0c;一个操作 f f f 定义操作 f f f为&#xff0c; a [ i ] f ( a [ i ] ) a [ i ] a[i]f(a[i])a[i] a[i]f(a[i])a[i]的位数 求最少多少次操作可以使 …

电路设计(16)——纪念馆游客进出自动计数显示器proteus仿真

1.设计要求 设计、制作一个纪念馆游客进出自动计数显示器。 某县&#xff0c;有一个免费参观的“陶渊明故里纪念馆”&#xff0c;游客进出分道而行&#xff0c;如同地铁有确保单向通行的措施。在入口与出口处分别设有红外检测、声响、累加计数器装置&#xff0c;当游人进&#…

fast.ai 机器学习笔记(一)

机器学习 1&#xff1a;第 1 课 原文&#xff1a;medium.com/hiromi_suenaga/machine-learning-1-lesson-1-84a1dc2b5236 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自机器学习课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这些笔记将继续更…

【蓝桥杯省赛真题23】python水仙花数 青少年组蓝桥杯比赛python编程省赛真题解析

目录 python水仙花数 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python水仙花数 第十二届蓝桥杯青少年组python比赛省赛真题 一、题目要求…

【ES6】模块化

nodejs遵循了CommonJs的模块化规范 导入 require() 导出 module.exports 模块化的好处&#xff1a; 模块化可以避免命名冲突的问题大家都遵循同样的模块化写代码&#xff0c;降低了沟通的成本&#xff0c;极大方便了各个模块之间的相互调用需要啥模块&#xff0c;调用就行 …

年底总结:野生码农与辉煌的2023

目录 始于兴趣终与坚持成于热爱2024 flag 始于兴趣 那是在遥远的2018年&#xff0c;我从机械行业跨入IT领域&#xff0c;当时觉得写代码非常酷的事&#xff0c;而且开发出来的功能可以提高机械制造效率&#xff0c;那种成就感油然而生。展望着未来&#xff0c;我觉得自己或许正…

8.【CPP】Vector(扩容问题||迭代器失效问题简述迭代器的种类)

vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的&#xff0c;而且它的大小会被容器自…

大数据Doris(六十五):基于Apache Doris的数据中台2.0

文章目录 基于Apache Doris的数据中台2.0 一、​​​​​​​架构升级

117.乐理基础-五线谱-音值组合法(二)

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;116.乐理基础-五线谱-音值组合法&#xff08;一&#xff09;-CSDN博客 分母大于等于八的所有拍号的音值组合法&#xff0c;对于这些大于等于八的&#xff0c;可以用一句话来形容&#xff0c;那就是叫做&#xff0c…

骑砍战团MOD开发(44)-可编程渲染管线shader编程

一.可编程渲染管线 在GPU进行3D模型投射到2D平面过程中,渲染管线算法对开发者开放,目前支持的编程语言有OpenGL的ARB语言(pp文件),Direct3D的HLSL高级shader编程语言(fx文件). Direct3D提供一下API实现程序加载shader着色器文件: D3DXCreateEffectFromFile(gDevice,"fxfn…

使用 MinIO 超级充电 TileDB 引擎

MinIO 是一个强大的主要 TileDB 后端&#xff0c;因为两者都是为性能和规模而构建的。MinIO 是一个单一的 Go 二进制文件&#xff0c;可以在许多不同类型的云和本地环境中启动。它非常轻量级&#xff0c;但也具有复制和加密等功能&#xff0c;并且提供与各种应用程序的集成。Mi…

分享76个时间日期JS特效,总有一款适合您

分享76个时间日期JS特效&#xff0c;总有一款适合您 76个时间日期JS特效下载链接&#xff1a;https://pan.baidu.com/s/1s7tPGT_ItK7dNK5_qbZkug?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…

java基础(2) 面向对象编程-java核心类

面向对象 面向对象对应的就是面向过程&#xff0c; 面向过程就是一步一步去操作&#xff0c;你需要知道每一步的步骤。 面向对象的编程以对象为核心&#xff0c;通过定义类描述实体及其行为&#xff0c;并且支持继承、封装和多态等特性 面向对象基础 面向对象编程&#xff0…

C++进阶(十四)智能指针

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、为什么需要智能指针&#xff1f;二、内存泄漏1、 什么是内存泄漏&#xff0c;内存泄漏的危…

探索现代Web前端开发框架:选择最适合你的工具

在当今快速发展的Web开发领域&#xff0c;前端开发框架的选择显得尤为关键。这些框架可以帮助我们更高效地构建出交互性强、性能卓越的用户界面。本文将带你了解几个当前最受欢迎的Web前端开发框架&#xff0c;并帮助你根据自己的需求选择最合适的工具。 1. React React由Fac…

前端面试题——JS实现反转链式表

前言 反转单向链表就是将整个单链表的数据进行倒序的过程。 例如&#xff0c;如果反转之前的单链表是0->1->2->3&#xff0c;那么反转之后的单链表应该是3->2->1->0。这个操作通常是通过改变链表中每个节点的指针方向来实现的&#xff0c;即让每个节点的指…

【经验】PIC16F877A串口发送字符串问题

PIC16F877A串口发送&#xff0c;查询方式&#xff0c;就为了调出这个费了我一天时间&#xff0c;原来是串口芯片电压问题&#xff0c;现总结如下&#xff1a; 1、注意232串口芯片供电电压&#xff0c;有5V和3.3V的 2、注意TXD、RXD接线&#xff0c;单片机的TXD接232芯片的R2O…

docker镜像命令

1、查看docker版本详情 docker version 2、查看本地所有镜像 docker images 名词解释&#xff1a;REPOSITORY - 镜像仓库源TAG - 镜像的标签&#xff08;就是版本号标识&#xff09;IMAGE ID - 镜像的idCREATED - 镜像创建时间SIZE - 镜像大小 3、可选项 在执行基础命令时…

代码随想录day19--二叉树的应用7

LeetCode235.二叉搜索树的最近公共祖先 题目描述&#xff1a; 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、…

问题:A注册会计师必须在期中实施实质性程序的情形是()。 #学习方法#其他

问题&#xff1a;A注册会计师必须在期中实施实质性程序的情形是&#xff08;&#xff09;。 A&#xff0e;甲公司整体控制环境不佳 B&#xff0e;将期中实质性程序所获证据与期末数据进行比较 C&#xff0e;评估的认定层次重大错报风险很高 D&#xff0e;没有把握通过在期中…