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 2月 10 22:57 demo
最后就是12 mb的 文件,包括了htm 。 和 二进制文件。确实特别的小,运行速度快。