likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 19

大家好，我是 那个曾经的少年回来了。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，来简单入门一下rust

tauri.app/zh/v1/guide…

  • 下载webview2

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

下载完毕后安装即可

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

2.4、mac下安装

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

3、创建tauri桌面项目

3.1、命令行安装

pnpm create tauri-app

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

使用vscode打开项目查看

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

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

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

总共大概使用了6分钟

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

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

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

3.2、打包编译

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

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

然后开始编译

pnpm tauri build

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

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

3.3、 本地安装客户端

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

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

4、rust入门

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

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

本文主要先来个入门

4.1、开始创建rust项目

cargo new rust-demo

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

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

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

cargo run

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

4.2、依赖处理

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

比如我想找 reqwest

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

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

cargo search reqwest

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

官网看一下 reqwest

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

将第一段两个依赖拷贝到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

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

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

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-…