通过跨端程序tauri，来简单入门一下rustTauri 的前端实现也是基于 Web 系列语言，Tauri 的后端使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情。

大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。

1、前言

Tauri 是一个跨平台 GUI 框架，与 Electron 的思想基本类似。Tauri 的前端实现也是基于 Web 系列语言，Tauri 的后端使用 Rust。Tauri 可以创建体积更小、运行更快、更加安全的跨平台桌面应用。

众所周知，Electron 相当于是打包了一个小型浏览器，体积大，还占内存。而 Tauri 开发的应用，前端使用操作系统的 webview，后端集成了 Rust，使得打包后的体积相当小。有人对比了打包同样一个 Hello World 程序，Electron 打包的应用在 50 MB 左右，而 Tauri 只有 4 MB 大小。-------这里摘自掘友的文章# 昆吾kw

2、准备环境

2.1、打开命令行执行

xcode-select --install

这个过程可能需要几分钟的时间

2.2、安装rust

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

2.3、window下安装

Microsoft Visual Studio C++ 构建工具

下载链接：visualstudio.microsoft.com/zh-hans/vs/

VS2022 Enterprise 企业版

安装时一定要选择C++

tauri.app/zh/v1/guide…

下载webview2

下载链接：developer.microsoft.com/zh-cn/micro…

下载完毕后安装即可

下载Rust 下载链接： www.rust-lang.org/tools/insta… 下载完毕后安装即可

2.4、mac下安装

可以去官网看一下写的很清楚

3、创建tauri桌面项目

3.1、命令行安装

pnpm create tauri-app

使用vscode打开项目查看

pnpm dev // 打开的是前端vue项目

pnpm tauri dev // 打开客户端如下

总共大概使用了6分钟

第二次运行的时间就大大缩短

3.2、打包编译

首先找到src-tauri\tauri.conf.json,修改如下节点

"identifier": "com.aehyok.dev",

然后开始编译

pnpm tauri build

之后发现错误，我翻了墙然后重新编译就OK了，因为要下载github上的压缩包

3.3、本地安装客户端

生成了msi安装包之后，直接点击本地安装，当然是window版本的

4、rust入门

其实上面已经安装好了rust环境。我们前端使用的包管理工具是npm，而rust的包管理程序是cargo，直接在命令行中输入 cargo。

本文主要先来个入门

4.1、开始创建rust项目

cargo new rust-demo

执行完毕后可以看到如下所示的文件目录

或者可以像npm一样 npm init，来使用cargo init 也是一样可以创建项目。创建完项目直接run便可以看到hello world，证明项目跑起来了。

cargo run

4.2、依赖处理

crates.io 官网有点类似于 www.npmjs.com 从上面可以搜索到任何想使用的包，如果有的话。如果没有你可以实现，然后在这里发布包。

比如我想找 reqwest

当然也可以通过命令进行查找

cargo search reqwest

官网看一下 reqwest

将第一段两个依赖拷贝到Cargo.toml文件中，如下图

reqwest = { version = "0.11", features = ["json"] }
tokio = { version = "1", features = ["full"] }

reqwest 是一个简单而强大的 RUST HTTP 客户端，用于浏览器异步 HTTP 请求。支持 xmlHttpRequest, JSONP, CORS, 和 CommonJS 约束。
reqwest 的 async 使用的是 Tokio 的，所以要同时加入 Tokio 的依赖。tokio 目前是最受欢迎的异步运行时，功能强大，还提供了异步所需的各种工具(例如 tracing )、网络协议框架(例如 HTTP，gRPC )等等。

4.3、调用依赖

然后将第二个代码拷贝到 src/main.rs中

use std::collections::HashMap;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let resp = reqwest::get("https://httpbin.org/ip")
        .await?
        .json::<HashMap<String, String>>()
        .await?;
    println!("{:#?}", resp);
    Ok(())
}

4.4、执行

开始运行项目

cargo run

可以发现最后打印出结果了

5、总结

Mozilla 创造了 Rust，Facebook、Apple、Amazon、Microsoft 和 Google 都使用 Rust 去开发系统基础设施、加密、虚拟化以及其他的层级较低的软件。

掘友有一篇翻译 RUST 是 JavaScript 基建的未来,有理由相信慢慢的会有越来越多的人来拥抱rust。

我的个人博客：vue.tuokecat.com/blog

我的个人github：github.com/aehyok

我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…

通过跨端程序tauri，来简单入门一下rust