Dioxus：一套代码搞定Web、桌面和移动端

开发团队经常遇到这样的需求：做一个内部工具，既要有网页版方便远程访问，又要有桌面版保证离线使用，最好还能有手机App随时查看。传统做法是分别开发三个版本，前端用React，桌面用Electron，手机用React Native或Flutter。三套代码、三个团队、三倍的工作量。

更麻烦的是后期维护。修改一个功能，三个平台都要改。测试工作量翻倍，版本同步是个大问题。小公司往往只能选择做Web版，放弃了桌面和移动端的用户。

Dioxus提供了一个新思路：用Rust写一套代码，编译成Web、桌面、移动端应用。不是简单的WebView包装，而是真正的原生应用，性能好、体积小、开发效率高。

真正的跨平台开发体验

Dioxus的核心优势在于统一的开发模式和原生的运行性能。

React式的开发体验：采用组件化架构和声明式UI，熟悉React的开发者可以快速上手。支持JSX语法的Rust版本RSX，让界面描述直观清晰。状态管理结合了React Hooks和Svelte的优点，既灵活又高效。

fn app() -> Element {    let mut count = use_signal(|| 0);     rsx! {        h1 { "计数器: {count}" }        button { onclick: move |_| count += 1, "增加" }        button { onclick: move |_| count -= 1, "减少" }    }}

这段代码可以编译成网页、Windows程序、Mac应用、Android和iOS App，而且都是原生性能。

多平台原生支持：Web平台通过WebAssembly运行，性能接近原生JavaScript。桌面应用使用系统原生WebView，也可以选择实验性的WGPU渲染器。移动端支持iOS和Android，可以直接调用平台API，无需额外的桥接层。Web端通过WebAssembly运行，打包后的文件很小，一个Hello World只有50KB左右，和React应用差不多。支持服务端渲染，首屏加载快。

全栈开发能力：内置服务端渲染和服务端函数功能，前后端可以无缝集成。支持服务端预渲染、客户端水合、流式渲染等现代Web技术。数据获取和状态同步都有完整的解决方案。

#[server]async fn get_user_data() -> Result<UserInfo, ServerError> {    // 后端逻辑} // 前端直接调用let user_data = get_user_data().await?;

热重载开发：开发过程中修改代码，界面会实时更新，无需重新编译整个应用。不仅支持样式和标记的热更新，连Rust代码的修改也能在毫秒级别生效，大大提升开发效率。

类型安全的RPC：前后端通信通过类型安全的服务端函数实现，编译期就能发现接口不匹配的问题。支持流式数据、WebSocket连接、异步处理等高级功能。

fn app() -> Element {  let mut fortune = use_signal(|| "Fetch a fortune!");  rsx! {    h1 { "{fortune}" }    button {      onclick: move |_| async move {        fortune.set(fetch_fortune().await.unwrap());      }    }  }} #[server]async fn fetch_fortune() -> ServerFnResult<String> {  "Dioxus is super productive!".to_string()}

原生API访问：桌面应用可以直接访问文件系统、系统通知等原生功能。移动端可以调用摄像头、GPS、传感器等设备API，无需复杂的插件系统。

快速上手的开发流程

Dioxus的使用门槛不高，有Rust基础的开发者很快就能上手。

安装很简单。先装好Rust，然后用cargo安装CLI工具：

cargo install dioxus-cli

创建项目一条命令搞定：

dx new my-app

项目结构清晰，主要代码都在src/main.rs里。默认模板包含了基本的应用框架，可以直接运行。

开发时用dx serve启动，浏览器会自动打开。想看桌面版效果，加上--platform desktop参数。要在手机上测试，用--platform android或--platform ios。

状态管理很直观。use_signal创建响应式状态，修改后界面自动更新。需要全局状态就用use_context，异步数据用use_resource。这些概念和React很像，但是有Rust的类型保证。

组件复用很方便。定义一个函数返回Element就是一个组件，可以接收props，可以有自己的状态。组件之间通过事件通信，父子组件通过props传递数据。

样式处理灵活。可以用内联样式，也可以引入CSS文件。支持现代CSS特性，包括Grid、Flexbox等。还可以用Tailwind这样的CSS框架。

打包发布一条命令：

dx bundle --release

会根据目标平台生成对应的发布包。Web版会进行代码压缩、资源优化。桌面版生成独立的可执行文件。移动版生成APK或IPA文件。

写在最后

Dioxus展示了Rust在应用开发领域的潜力。以前提到Rust，大家想到的是系统编程、高性能服务器、区块链这些底层开发。现在，用Rust开发用户界面应用也变得实际可行。

Dioxus不只是又一个跨平台框架，它代表了一种新的可能性：用系统级编程语言也能高效地开发应用程序。对于已经在使用Rust的团队，这是统一技术栈的好机会。对于追求极致性能和安全性的项目，这是一个值得考虑的方案。随着Rust生态的持续发展，相信会有更多优秀的应用选择这条技术路线。

开源地址：https://github.com/DioxusLabs/dioxus

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/