tauri的一些基本工作-小萌小筑

Rust作为去年年末勉强学完的语言，真是让人爱不释脑。但到现在确实也没有靠她做什么项目。tauri作为各方面（至少我认为）都吊打Electron的存在，产品到文档也是优雅得不像话，入门示例基本也可以管中窥豹，特在此记录一些基本工作以便日后CV。

反观后端，各个库都像《青铜时代》里竭尽全力搔首弄姿的机器母猫，每个**上脑的backender都付出了沉痛的代价。

创建或集成

tauri项目既可以从0开始创建也可以集成到已有项目。

从0开始，就像创建vite项目一样

npm create tauri-app@latest

或者用Cargo

cargo install create-tauri-app --locked
cargo create-tauri-app
npm run tauri dev

国服清华代理奥，最喜欢的包管理器，直接展示连招
[source.crates-io]
replace-with = 'mirror'

[source.mirror]
registry = "sparse+https://mirrors.tuna.tsinghua.edu.cn/crates.io-index/"

集成到已有项目
1. 安装tauri Cli
```
npm install --save-dev @tauri-apps/cli
```
  此时package.json可以有tauri的scripts，方便我们未来dev、build
```
"scripts": {
  "tauri": "tauri"
}
```
2. 初始化
```
npm run tauri init
npm run tauri dev
```
  回答一些简单的问题，便也完成了tauri的集成。

最终都是在项目根路径生成一个src-tauri文件夹，文件夹中存放一个Rust项目，暂时仅需关注的有tauri.conf.json和src/main.rs两个文件。

前端请求

Gpt-4解开了我的疑惑

在 tauri 中使用 axios 或 ajax 无法直接获取 HTTP 请求内容的原因主要是因为 tauri 使用了 Webview 来呈现应用程序界面，而 Webview 是一个轻量级的浏览器窗口，它的工作方式与传统的 Web 浏览器相似，但受到了一些限制。
在 Webview 中，由于安全原因，许多浏览器 API（如 XMLHttpRequest，fetch 等）都受到了限制，无法直接访问外部的网络资源。这是出于安全考虑，以防止应用程序恶意加载不安全的内容或与外部资源进行不安全的交互。
为了在 tauri 应用中进行网络请求，tauri 提供了自己的解决方案，即 tauri 中的 fetch API。fetch API 是一种标准的 JavaScript API，用于发出网络请求并获取响应。在 tauri 中使用 fetch API 可以安全地与网络进行通信，而无需担心安全风险。
因此，为了在 tauri 中进行网络请求，建议使用 提供的fetch API，以确保应用程序的安全性和稳定性。

所以对于tauri应用，可能新建一个分支，使用其提供的fetch是标准的做法

import {fetch} from '@tauri-apps/api/http'
data.value = await fetch(url, {
    method: 'GET'
}).then(res => res.data)

但此时便带来了额外的安全问题，tauri默认禁止使用http请求，要开启需要在tauri.conf.json中设置

{
  "tauri": {
    "allowlist": {
      "http": {
        "all": true, // enable all http APIs
        "request": true, // enable HTTP request API
        "scope": ["https://api.github.com/repos/tauri-apps/*"] // 信任的请求域 可选的
      }
    }
  }
}

与Rust通信

tauri称之为指令。

初始

tauri默认给的指令

// 指令标志宏
#[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");
}

在前端中使用

import {invoke} from '@tauri-apps/api/tauri'

invoke('greet', { name: 'World' })
  // `invoke` 返回的是一个 Promise
  .then((response) => console.log(response))

模仿

一次仅靠webstorm和rust编译器的拙劣模仿

面向编译器编程，编译才是男人的浪漫！

#[derive(Serialize, Deserialize, Debug)]
struct Transmission {
    id:u32,
    trans_name:String,
    trans_num:u32,
    trans_ratio_string:String,
}

#[tauri::command]
async fn get_data() -> Result<Vec<Transmission>, ()> {
    let resp = reqwest::get("url")
        .await.unwrap()
        .json::<Vec<Transmission>>().await.unwrap();
    Ok(resp)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, get_data])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

使用

data.value = await invoke('get_data').then(res => res)

其实不能说完全是脱裤子放屁，在不了解tauri应用的逆向难度前，我将其声明为安全的💇，reqwest库由于request库占着茅坑所以叫这个名字

构建

打包tauri应用，我所经历的不必要的痛苦主要来自于低质量的内网环境，未来面对优质甚至危险的网络，仅需在意的且不值得在意的点是tauri默认禁用的构建标识

{
    "tauri": {
        "bundle": {
            "identifier": "com.tauri.build" // 默认为com.tauri.dev 仅作为tauri开发环境标识，有一种Java的美~
        }
    }
}

感想

tauri完美地结束了我曾经深入Electron的渴望，~~就像加州旅馆solo结束了我深入电吉他的渴望~~。尽管这些项目事半功倍，但事到如今，再研究些前端后端GUI属实是无聊，希望未来能用Rust走在不那么熙攘的道路上。

他们为求知而参与学术，并无任何实用目的。 ——亚里士多德

目录CONTENT

tauri的一些基本工作

创建或集成

前端请求

与Rust通信

初始

模仿

构建

感想

评论区