30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度最近在整理技术笔记时发现市面上的 Markdown 阅读器要么体积臃肿要么功能单一特别是多标签管理和实时编辑的支持往往不够完善。于是我用 Rust 和 Tauri 框架开发了一个仅 5MB 的轻量级 Markdown 阅读器支持多标签页、实时编辑、语法高亮等核心功能。本文将完整分享从环境搭建到功能实现的详细过程包含可复用的代码示例和常见避坑指南适合有一定前端基础、希望用 Rust 开发桌面应用的开发者参考。1. 技术选型与核心概念1.1 为什么选择 Rust TauriRust 是一门系统级编程语言以内存安全、零成本抽象和高性能著称。Tauri 是一个基于 Rust 的框架用于构建跨平台的桌面应用程序它使用系统自带的 WebView 作为渲染引擎因此生成的应用程序体积非常小。与传统 Electron 应用相比Tauri 应用的优势主要体现在体积更小Electron 应用通常包含完整的 Chromium 内核体积在 100MB 以上而 Tauri 应用可以做到 5MB 左右性能更高Rust 后端处理性能优异特别适合文件操作、数据解析等密集型任务安全性更好Rust 的内存安全特性从根本上避免了很多常见的安全漏洞1.2 Markdown 阅读器的核心功能需求一个完整的 Markdown 阅读器需要具备以下核心功能文件解析将 Markdown 文本转换为 HTML 进行渲染实时预览编辑时实时更新预览内容多标签支持同时打开多个 Markdown 文件语法高亮代码块语法高亮显示主题切换支持亮色/暗色主题2. 开发环境准备2.1 Rust 环境安装首先需要安装 Rust 工具链推荐使用 rustup 进行安装# 安装 rustupWindows 系统下载并运行 rustup-init.exe curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh # 安装完成后重启终端并验证安装 rustc --version cargo --version2.2 Tauri 环境配置Tauri 需要一些系统依赖不同操作系统的安装方式如下Windows 系统安装 Visual Studio Build Tools勾选 C 生成工具安装 WebView2Windows 11 自带Windows 10 需要手动安装macOS 系统# 安装 Xcode Command Line Tools xcode-select --installLinux 系统Ubuntu/Debiansudo apt update sudo apt install libwebkit2gtk-4.0-dev build-essential curl wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev2.3 创建 Tauri 项目使用 Cargo 创建新的 Tauri 项目cargo install create-tauri-app cargo create-tauri-app markdown-reader cd markdown-reader项目结构如下markdown-reader/ ├── src-tauri/ # Rust 后端代码 │ ├── src/ │ ├── Cargo.toml │ └── tauri.conf.json ├── src/ # 前端代码 │ ├── main.js │ └── index.html └── package.json3. 核心功能实现3.1 前端界面设计使用 HTML 和 CSS 构建基本的界面布局!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleMarkdown 阅读器/title link relstylesheet hrefstyles.css /head body div classapp-container div classtab-bar div classtabs idtabContainer div classtab active>* { margin: 0; padding: 0; box-sizing: border-box; } .app-container { height: 100vh; display: flex; flex-direction: column; } .tab-bar { display: flex; background: #f5f5f5; border-bottom: 1px solid #ddd; height: 40px; } .tabs { display: flex; flex: 1; } .tab { display: flex; align-items: center; padding: 0 15px; border-right: 1px solid #ddd; background: #fff; cursor: pointer; min-width: 120px; } .tab.active { background: #007acc; color: white; } .tab-close { margin-left: 8px; background: none; border: none; cursor: pointer; font-size: 16px; } .new-tab-btn { padding: 0 15px; background: #f5f5f5; border: none; cursor: pointer; } .editor-container { display: flex; flex: 1; height: calc(100vh - 40px); } .editor-panel, .preview-panel { flex: 1; padding: 10px; } #markdownEditor { width: 100%; height: 100%; border: none; resize: none; padding: 10px; font-family: Monaco, Consolas, monospace; font-size: 14px; } #markdownPreview { width: 100%; height: 100%; overflow: auto; padding: 10px; border-left: 1px solid #ddd; } /* 暗色主题 */ .dark-theme { background: #1e1e1e; color: #d4d4d4; } .dark-theme .tab-bar { background: #2d2d30; border-color: #3e3e42; } .dark-theme .tab { background: #252526; border-color: #3e3e42; color: #cccccc; } .dark-theme .tab.active { background: #007acc; }3.2 Rust 后端实现在src-tauri/src/main.rs中实现核心的 Markdown 解析功能use tauri::{command, AppHandle, Manager, Window}; use pulldown_cmark::{Parser, Options, html}; use std::fs; #[command] fn parse_markdown(content: String) - String { let mut options Options::empty(); options.insert(Options::ENABLE_TABLES); options.insert(Options::ENABLE_FOOTNOTES); options.insert(Options::ENABLE_STRIKETHROUGH); options.insert(Options::ENABLE_TASKLISTS); let parser Parser::new_ext(content, options); let mut html_output String::new(); html::push_html(mut html_output, parser); // 添加代码高亮支持 let highlighted_html add_syntax_highlighting(html_output); highlighted_html } #[command] fn read_file(path: String) - ResultString, String { fs::read_to_string(path) .map_err(|e| format!(读取文件失败: {}, e)) } #[command] fn write_file(path: String, content: String) - Result(), String { fs::write(path, content) .map_err(|e| format!(写入文件失败: {}, e)) } fn add_syntax_highlighting(html: String) - String { // 这里可以集成 syntect 或 similar 库进行代码高亮 // 简化版本添加基本的代码高亮样式 format!(r# !DOCTYPE html html head style pre {{ background: #f6f8fa; padding: 16px; border-radius: 6px; overflow: auto; }} code {{ font-family: Monaco, Consolas, monospace; }} .dark-theme pre {{ background: #2d2d2d; color: #f8f8f2; }} /style /head body {} /body /html #, html) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![ parse_markdown, read_file, write_file ]) .run(tauri::generate_context!()) .expect(运行 Tauri 应用时出错); }3.3 前端 JavaScript 逻辑在src/main.js中实现前端交互逻辑class MarkdownReader { constructor() { this.tabs new Map(); this.activeTabId null; this.editor document.getElementById(markdownEditor); this.preview document.getElementById(markdownPreview); this.tabContainer document.getElementById(tabContainer); this.newTabBtn document.getElementById(newTabBtn); this.initEventListeners(); this.createNewTab(); } initEventListeners() { this.editor.addEventListener(input, this.debounce(() { this.updatePreview(); }, 300)); this.newTabBtn.addEventListener(click, () { this.createNewTab(); }); // 拖拽文件支持 document.addEventListener(dragover, (e) { e.preventDefault(); }); document.addEventListener(drop, (e) { e.preventDefault(); const files e.dataTransfer.files; if (files.length 0) { this.openFile(files[0]); } }); } debounce(func, wait) { let timeout; return function executedFunction(...args) { const later () { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout setTimeout(later, wait); }; } async updatePreview() { const content this.editor.value; try { const html await invoke(parse_markdown, { content }); this.preview.innerHTML html; } catch (error) { console.error(Markdown 解析错误:, error); } } createNewTab() { const tabId tab_ Date.now(); const tabElement document.createElement(div); tabElement.className tab; tabElement.dataset.file untitled; tabElement.innerHTML span新文档/span button classtab-close×/button ; this.tabContainer.appendChild(tabElement); this.setupTabEvents(tabElement, tabId); this.switchToTab(tabId); } setupTabEvents(tabElement, tabId) { const closeBtn tabElement.querySelector(.tab-close); const tabContent { element: tabElement, content: , filePath: null }; this.tabs.set(tabId, tabContent); tabElement.addEventListener(click, (e) { if (e.target ! closeBtn) { this.switchToTab(tabId); } }); closeBtn.addEventListener(click, (e) { e.stopPropagation(); this.closeTab(tabId); }); } switchToTab(tabId) { // 更新标签状态 document.querySelectorAll(.tab).forEach(tab { tab.classList.remove(active); }); const tabContent this.tabs.get(tabId); if (tabContent) { tabContent.element.classList.add(active); this.editor.value tabContent.content; this.activeTabId tabId; this.updatePreview(); } } closeTab(tabId) { const tabContent this.tabs.get(tabId); if (tabContent) { tabContent.element.remove(); this.tabs.delete(tabId); // 如果关闭的是当前激活的标签切换到其他标签 if (this.activeTabId tabId) { const remainingTabs Array.from(this.tabs.keys()); if (remainingTabs.length 0) { this.switchToTab(remainingTabs[0]); } else { this.createNewTab(); } } } } async openFile(file) { if (file.type text/markdown || file.name.endsWith(.md)) { try { const content await this.readFileContent(file); this.createNewTab(); const activeTab this.tabs.get(this.activeTabId); if (activeTab) { activeTab.content content; activeTab.filePath file.path; activeTab.element.querySelector(span).textContent file.name; this.editor.value content; this.updatePreview(); } } catch (error) { console.error(文件打开错误:, error); } } } readFileContent(file) { return new Promise((resolve, reject) { const reader new FileReader(); reader.onload (e) resolve(e.target.result); reader.onerror reject; reader.readAsText(file); }); } } // 应用初始化 document.addEventListener(DOMContentLoaded, () { new MarkdownReader(); });4. 功能扩展与优化4.1 添加主题切换功能在 Rust 后端添加主题管理命令#[command] fn toggle_theme(current_theme: String) - String { if current_theme light { dark.to_string() } else { light.to_string() } }在前端添加主题切换按钮和逻辑// 在 HTML 中添加主题切换按钮 const themeToggle document.createElement(button); themeToggle.id themeToggle; themeToggle.textContent ; document.querySelector(.tab-bar).appendChild(themeToggle); // 在 MarkdownReader 类中添加主题管理 class MarkdownReader { constructor() { this.currentTheme light; // ... 其他初始化代码 this.setupThemeToggle(); } setupThemeToggle() { const themeToggle document.getElementById(themeToggle); themeToggle.addEventListener(click, () { this.toggleTheme(); }); } async toggleTheme() { this.currentTheme await invoke(toggle_theme, { currentTheme: this.currentTheme }); document.body.classList.toggle(dark-theme, this.currentTheme dark); const themeToggle document.getElementById(themeToggle); themeToggle.textContent this.currentTheme dark ? ☀️ : ; // 重新渲染预览以应用主题样式 this.updatePreview(); } }4.2 实现文件保存功能扩展 Rust 后端添加文件操作命令#[command] fn save_file(path: OptionString, content: String) - ResultString, String { if let Some(file_path) path { // 保存到现有文件 write_file(file_path, content)?; Ok(file_path) } else { // 弹出保存对话框 let dialog rfd::FileDialog::new() .add_filter(Markdown, [md]) .set_title(保存 Markdown 文件); if let Some(path) dialog.save_file() { let path_str path.to_string_lossy().to_string(); write_file(path_str.clone(), content)?; Ok(path_str) } else { Err(用户取消保存.to_string()) } } }在前端添加保存功能class MarkdownReader { // ... 现有代码 async saveCurrentFile() { const activeTab this.tabs.get(this.activeTabId); if (!activeTab) return; try { const filePath await invoke(save_file, { path: activeTab.filePath, content: this.editor.value }); if (filePath) { activeTab.filePath filePath; const fileName filePath.split(/).pop() || filePath.split(\\).pop(); activeTab.element.querySelector(span).textContent fileName; } } catch (error) { console.error(保存文件错误:, error); } } // 添加快捷键支持 initKeyboardShortcuts() { document.addEventListener(keydown, (e) { if (e.ctrlKey || e.metaKey) { if (e.key s) { e.preventDefault(); this.saveCurrentFile(); } else if (e.key n) { e.preventDefault(); this.createNewTab(); } else if (e.key o) { e.preventDefault(); this.openFileDialog(); } } }); } }4.3 配置 Tauri 应用信息更新src-tauri/tauri.conf.json配置文件{ build: { beforeBuildCommand: , beforeDevCommand: , devPath: ../dist, distDir: ../dist }, package: { productName: Markdown Reader, version: 0.1.0 }, tauri: { allowlist: { all: false, fs: { readFile: true, writeFile: true, readDir: true }, window: { startDragging: true }, shell: { open: true } }, bundle: { active: true, targets: all, identifier: com.example.markdown-reader }, security: { csp: null }, windows: [ { fullscreen: false, resizable: true, title: Markdown Reader, width: 1200, height: 800 } ] } }5. 构建与打包5.1 开发模式运行在项目根目录运行开发服务器npm run tauri dev5.2 生产环境构建构建发布版本的应用npm run tauri build构建完成后可在src-tauri/target/release/bundle目录找到生成的可执行文件。5.3 优化应用体积通过配置 Cargo.toml 优化 Release 构建[profile.release] lto true codegen-units 1 panic abort strip true [dependencies] tauri { version 1.0, features [api-all] } pulldown-cmark { version 0.9, default-features false }6. 常见问题与解决方案6.1 构建错误排查问题WebView2 未安装现象Windows 系统运行时报 WebView2 相关错误解决下载并安装 Microsoft Edge WebView2 Runtime问题Rust 编译错误现象cargo build 失败解决确保 Rust 工具链完整运行rustup update6.2 性能优化建议减少不必要的重渲染使用防抖函数优化预览更新内存管理及时清理不使用的标签页内容文件操作大文件使用流式读取避免内存溢出6.3 功能扩展方向插件系统支持用户自定义插件扩展功能云同步集成云存储服务实现多设备同步导出功能支持导出为 PDF、HTML 等格式版本控制集成 Git 实现版本管理7. 最佳实践总结7.1 代码组织建议前后端分离前端负责 UI 交互后端负责文件操作和数据处理错误处理使用 Result 类型妥善处理所有可能的错误情况类型安全充分利用 Rust 的类型系统避免运行时错误7.2 用户体验优化响应式设计确保界面在不同尺寸屏幕上都能正常显示快捷键支持提供常用的键盘快捷键提升操作效率自动保存实现自动保存功能防止数据丢失7.3 安全性考虑文件路径验证对所有文件路径进行合法性检查输入验证对用户输入进行适当的清理和验证权限控制遵循最小权限原则只请求必要的系统权限通过本文的完整实现我们成功构建了一个功能完善、体积小巧的 Markdown 阅读器。这个项目不仅展示了 Rust 和 Tauri 在桌面应用开发中的优势也为进一步的功能扩展提供了良好的基础架构。读者可以根据自己的需求在此基础上继续添加更多实用功能。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度