尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

Tauri 快速上手:10 分钟跑通第一个跨平台桌面应用

Tauri 快速上手:10 分钟跑通第一个跨平台桌面应用 Tauri 快速上手10 分钟跑通第一个跨平台桌面应用【免费下载链接】tauriBuild smaller, faster, and more secure desktop and mobile applications with a web frontend.项目地址: https://gitcode.com/GitHub_Trending/ta/tauri用 Web 技术写桌面应用传统方案打包出来动辄 50MB 以上启动速度也一般。Tauri 是一个轻量桌面应用框架后端是 Rust 编写的原生二进制界面跑在系统自带的 WebView 里最终产物通常只有几 MB。本文面向第一次接触 Tauri 的读者按环境 → 安装 → 脚手架 → 启动四步走跟着操作大约 10 分钟就能弹出一个真正能动的桌面窗口。先看到效果Tauri 演示应用运行画面上面是仓库自带的 API 示例应用位于examples/api/左侧是功能导航右侧可以实时调整窗口大小、标题、透明度等原生能力。它证明了前端页面能直接驱动系统级窗口行为——这也是 Tauri 的核心卖点。窗口和 WebView 的底层分别由 crates/tauri/ 主 crate 和 crates/tauri-runtime/ 运行时承载细节可以查阅 ARCHITECTURE.md。环境检查与一键安装命令先对照表格确认系统版本Tauri v2 各平台的最低要求如下操作系统最低版本核心依赖Windows7WebView2macOS10.15WKWebViewLinuxUbuntu 22.04webkit2gtk 4.1Windows 和 macOS 的 WebView 是系统组件一般无需额外处理Linux 需要系统里装有 webkit2gtk 4.1这是后面装依赖时最容易卡住的地方。确认系统达标后按平台执行对应的一键安装脚本它会把 Rust、Node 及平台依赖一次性配好# WindowsPowerShell Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(https://install.tauri.app/sh))# macOS /bin/bash -c $(curl -fsSL https://install.tauri.app/sh)# LinuxDebian/Ubuntu curl --proto https --tlsv1.2 -sSf https://install.tauri.app/sh | sh安装完成后可用rustc -V和node -v快速验证工具链是否就位。从零跑通第一个 Tauri 项目脚手架与启动命令环境就绪后用官方脚手架create-tauri-app创建项目一条命令即可npm create tauri-applatest执行后脚手架会连续提出几个问题按提示输入即可项目名称例如my-tauri-app前端框架支持 Vanilla、Vue、React、Svelte 等包管理器npm / yarn / pnpm 任选是否立即安装依赖建议选是创建完成后进入目录并启动开发服务器cd my-tauri-app npm run tauri dev看到什么画面代表成功——桌面会弹出一个标题为 Welcome to Tauri! 的窗口默认 800×600窗口里渲染的是你的前端页面之后修改前端代码保存窗口内容会实时热更新不需要手动重启。开发满意后打包发布也只要一行npm run tauri build。产物输出在src-tauri/target/release/bundle目录下按平台生成对应格式macOS 为.app/.dmgLinux 为.deb/.rpm/.AppImageWindows 为.exeNSIS/.msiWiX。tauri.conf.json 核心配置速览最小配置示例所有 Tauri 项目的核心配置都在src-tauri/tauri.conf.json。新手最常改的是下面几项配置路径作用示例值build.frontendDist前端构建产物位置[index.html]app.windows窗口数组控制标题、尺寸等{title: 我的应用, width: 800, height: 600}app.security.csp内容安全策略约束前端资源加载default-src self; connect-src ipc: http://ipc.localhostbundle.targets打包生成哪些安装包格式allidentifier应用唯一标识用于权限与更新com.tauri.dev以下是一份最小可运行配置取自仓库示例完整 schema 见 crates/tauri-cli/tauri.config.schema.json{ productName: Hello World, version: 0.1.0, identifier: com.tauri.dev, build: { frontendDist: [index.html] }, app: { windows: [ { title: Welcome to Tauri!, width: 800, height: 600, resizable: true } ], security: { csp: default-src self; connect-src ipc: http://ipc.localhost } } }配好窗口后原生能力靠 Rust 命令暴露给前端。examples/helloworld/main.rs里有个最小示例定义一个命令并注册// 定义并注册一个 Rust 命令供前端 invoke #[tauri::command] fn greet(name: str) - String { format!(Hello {name}, You have been greeted from Rust!) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![greet]) .run(tauri::generate_context!()) .expect(error while running tauri application); }前端只需invoke(greet, { name: Tauri })即可调用这是 Tauri 前后端通信的标准路径。项目目录结构速记脚手架生成的项目结构固定记住这几个关键位置就够用了my-tauri-app/ ├── src/ # 前端源代码框架代码都在这 ├── public/ # 静态资源 ├── src-tauri/ # Tauri 后端目录Rust 相关都在这 │ ├── src/main.rs # Rust 入口定义命令和构建器 │ ├── Cargo.toml # Rust 依赖配置 │ ├── icons/ # 打包用的应用图标 │ └── tauri.conf.json # 核心配置文件上一节详解 └── package.json # 前端依赖与 dev/build 脚本判断标准很简单改界面去src/改窗口和原生能力去src-tauri/。踩坑急救三个高频问题1. 安装脚本执行失败或提示找不到 rustc / node现象一键脚本中途报错或后续命令报command not found原因系统缺少 Rust 或 Node.js 运行时修复分别手动安装后再重试curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh # 安装 Rust curl -fsSL https://fnm.vercel.app/install | bash # 安装 fnm 管理 Node fnm install 182.tauri dev后窗口不弹出或一片空白现象终端正常编译但桌面没有窗口或窗口里是空白页原因build.frontendDist没有指向前端实际构建产物的目录修复先手动构建前端确认产物存在再重启开发服务器npm run build # 构建前端项目 npm run tauri dev # 重新启动开发服务器3. Linux 上安装依赖或直接编译时报 webkit2gtk 相关错误现象安装脚本在依赖环节失败或tauri dev编译时报找不到 webkit2gtk 头文件原因Tauri v2 明确要求 webkit2gtk 4.1系统预装版本过低或缺失Ubuntu 22.04 起满足要求修复确认系统版本达标并通过发行版包管理器安装 webkit2gtk 4.1 开发包安装时可用--no-bundled-webview以外的默认方式让安装脚本代劳升级系统版本是最省事的替代路径结语与延伸到这里一个能开发、能打包、能调原生能力的 Tauri 项目已经在你机器上跑起来了。想继续深入建议按顺序看仓库内的三份材料架构全貌读 ARCHITECTURE.md配置项查 tauri.config.schema.json各种玩法参考 examples/ 下的 helloworld、multiwindow、state 等示例项目。下一站可以尝试给自己的应用加一条 Rust 命令和一份权限配置感受完整的前后端链路。【免费下载链接】tauriBuild smaller, faster, and more secure desktop and mobile applications with a web frontend.项目地址: https://gitcode.com/GitHub_Trending/ta/tauri创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表