本文详解如何使用Tauri 2.0构建WordPress桌面应用（跨平台，Windows/macOS/Linux）。
什么是Tauri
Tauri（2021年发布v1.0，2025年v2.0）：
- 使用Rust构建后端（轻量，安全）
- 使用系统Webview（Windows: Edge WebView2; macOS: WKWebView; Linux: WebKitGTK）
- 前端：任意框架（React/Vue/Svelte）
- 打包体积：~5MB（Electron是~150MB）
- 内存占用：~30MB（Electron是~120MB）
为什么用Tauri + WordPress
架构：
Tauri桌面应用 → WordPress REST API → WordPress后端
优势：
- 原生桌面体验（系统托盘、菜单、快捷键）
- 离线缓存（IndexedDB + Tauri Store）
- 自动更新（Tauri Updater）
- 极小的安装包（5MB vs Electron 150MB）
实战一：搭建Tauri 2.0项目
环境准备
# Windows: 安装WebView2（系统自带Windows 11）
macOS: 自带WKWebView
Linux: 安装WebKitGTK
Ubuntu/Debian:
sudo apt update
sudo apt install libwebkit2gtk-4.1-dev
安装Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
创建前端（Next.js）
# 创建Next.js项目
npx create-next-app@latest wp-desktop --typescript --tailwind
cd wp-desktop
构建静态导出（Tauri需要file://协议）
npm run build
输出：out/ 目录
初始化Tauri
# 安装Tauri CLI
cargo install tauri-cli
初始化Tauri（在Next.js项目中）
npm install @tauri-apps/cli @tauri-apps/api
npx tauri init
配置：
- 前端路径：../out
- 开发服务器：http://localhost:3000
- 产品名：WordPress Desktop
实战二：连接WordPress REST API
Tauri后端（Rust）代理API请求
// src/main.rs
use tauri::Manager;
use reqwest::header;
#[tauri::command]
async fn get_posts() -> Result {
let client = reqwest::Client::new();
let wp_url = "https://www.shenma98.com/wp-json/wp/v2/posts";
let response = client
.get(wp_url)
.header(header::AUTHORIZATION, "Basic ...") // 使用应用密码
.send()
.await
.map_err(|e| e.to_string())?;
let body = response.text().await.map_err(|e| e.to_string())?;
Ok(body)
}
#[tauri::command]
async fn get_post(id: i32) -> Result {
let client = reqwest::Client::new();
let wp_url = format!("https://www.shenma98.com/wp-json/wp/v2/posts/{}", id);
let response = client
.get(&wp_url)
.send()
.await
.map_err(|e| e.to_string())?;
let body = response.text().await.map_err(|e| e.to_string())?;
Ok(body)
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![get_posts, get_post])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
前端调用Tauri命令
// app/api/wordpress.ts
import { invoke } from '@tauri-apps/api/core';
export async function getPosts() {
const response = await invoke('get_posts');
return JSON.parse(response as string);
}
export async function getPost(id: number) {
const response = await invoke('get_post', { id });
return JSON.parse(response as string);
}
// app/posts/page.tsx
'use client';
import { useEffect, useState } from 'react';
import { getPosts } from '@/api/wordpress';
export default function PostsPage() {
const [posts, setPosts] = useState([]);
useEffect(() => {
getPosts().then(setPosts);
}, []);
return (
WordPress文章
{posts.map((post: any) => (
-
))}
);
}
实战三：添加桌面特性
系统托盘（System Tray）
// src/main.rs
use tauri::{CustomMenuItem, SystemTray, SystemTrayMenu, SystemTrayEvent};
fn main() {
let tray_menu = SystemTrayMenu::new()
.add_item(CustomMenuItem::new("open", "打开主窗口"))
.add_item(CustomMenuItem::new("quit", "退出"));
tauri::Builder::default()
.system_tray(SystemTray::new().with_menu(tray_menu))
.on_system_tray_event(|app, event| match event {
SystemTrayEvent::MenuItemClick { id, .. } => {
match id.as_str() {
"open" => {
let window = app.get_window("main").unwrap();
window.show().unwrap();
}
"quit" => {
std::process::exit(0);
}
_ => {}
}
}
_ => {}
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
全局快捷键
// src/main.rs
use tauri::GlobalShortcutManager;
fn main() {
tauri::Builder::default()
.setup(|app| {
let shortcut_manager = app.global_shortcut_manager();
// 注册快捷键：Ctrl+Shift+P（打开快速搜索）
shortcut_manager
.register("CmdOrCtrl+Shift+P", || {
println!("Quick search opened!");
// 打开快速搜索窗口
})
.unwrap();
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
离线缓存（IndexedDB + Tauri Store）
// app/utils/cache.ts
import { Store } from '@tauri-apps/plugin-store';
const store = new Store('cache.json');
export async function getCachedPosts() {
return await store.get('posts');
}
export async function cachePosts(posts: any[]) {
await store.set('posts', posts);
await store.save();
}
实战四：自动更新（Tauri Updater）
配置Updater
// tauri.conf.json
{
"tauri": {
"updater": {
"active": true,
"endpoints": [
"https://www.shenma98.com/releases/latest.json"
],
"dialog": true,
"pubkey": "YOUR_PUBLIC_KEY"
}
}
}
生成密钥对
# 安装Tauri Updater CLI
cargo install tauri-updater
生成密钥对
tauri-updater keypair
输出：
Public key: YOUR_PUBLIC_KEY
Secret key: YOUR_PRIVATE_KEY (保密！)
发布更新
// https://www.shenma98.com/releases/latest.json
{
"version": "0.2.0",
"notes": "新增离线缓存功能",
"pub_date": "2026-05-21T00:00:00Z",
"platforms": {
"windows-x86_64": {
"signature": "SIGNATURE_HERE",
"url": "https://www.shenma98.com/releases/wp-desktop_0.2.0_x64_en-US.msi"
},
"darwin-x86_64": {
"signature": "SIGNATURE_HERE",
"url": "https://www.shenma98.com/releases/wp-desktop_0.2.0_x64.dmg"
}
}
}
构建与打包
开发模式
# 启动前端开发服务器
npm run dev
启动Tauri开发模式（另一个终端）
npx tauri dev
生产构建
# 1. 构建前端（静态导出）
npm run build
输出：out/ 目录
2. 构建Tauri应用
npx tauri build
输出：
- Windows: src-tauri/target/release/bundle/msi/wp-desktop_0.1.0_x64_en-US.msi
- macOS: src-tauri/target/release/bundle/dmg/wp-desktop_0.1.0_x64.dmg
- Linux: src-tauri/target/release/bundle/deb/wp-desktop_0.1.0_amd64.deb
性能对比（Tauri vs Electron）
| 指标 | Tauri 2.0 | Electron 28 | 优势 |
|------|-------------|--------------|------|
| 打包体积 | ~5MB | ~150MB | 30x 小 |
| 内存占用（空闲） | ~30MB | ~120MB | 4x 低 |
| 启动时间 | ~0.3s | ~1.2s | 4x 快 |
| 安全性 | ⭐⭐⭐⭐⭐ (Rust) | ⭐⭐⭐ (Node.js) | Rust更安全 |
决策建议
| 场景 | 是否使用Tauri | 理由 |
|------|----------------|------|
| WordPress桌面客户端 | ✅ 强烈推荐 | 体积小，体验好 |
| 内部工具（企业） | ✅ 推荐 | 安全，跨平台 |
| 简单工具（单功能） | ✅ 推荐 | 打包小，分发易 |
| 复杂应用（VS Code类） | ⚠️ 考虑Electron | 生态更成熟 |
总结
Tauri 2.0是2026年最值得关注的桌面应用框架。结合WordPress REST API，可以快速构建轻量级桌面客户端。
立即行动：用Tauri创建一个WordPress桌面客户端原型！
评论(0)