Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrxiaozhuox/dioxus-guide-cn
Dioxus 中文开发文档 【Dioxus交流群：863409183】⚠️ 本文档已停止维护，请前往 DioxusChina/website
https://github.com/mrxiaozhuox/dioxus-guide-cn
dioxus document
Last synced: 18 days ago
JSON representation
Dioxus 中文开发文档 【Dioxus交流群：863409183】⚠️ 本文档已停止维护，请前往 DioxusChina/website
- Host: GitHub
- URL: https://github.com/mrxiaozhuox/dioxus-guide-cn
- Owner: mrxiaozhuox
- License: mit
- Created: 2022-01-13T08:29:40.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-27T07:35:35.000Z (over 2 years ago)
- Last Synced: 2024-10-11T01:51:14.226Z (about 1 month ago)
- Topics: dioxus, document
- Language: TypeScript
- Homepage: https://dioxus.cn/
- Size: 576 KB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 介绍 - Dioxus
**Dioxus** 是一款用于构建跨平台用户界面的框架（生态系统），它使用 Rust 编程语言。
这本指南将带领你学习并使用它。（我们会尝试在 网页端、移动端、桌面端 使用 Dixous 框架）
- Dioxus 中文社区 [ QQ群 ]：863409183
```rust
fn App(cx: Scope) -> Element {
let (count, set_count) = use_state(&cx, || 0);
cx.render(rsx!(
h1 { "High-Five counter: {count}" }
button { onclick: move |_| set_count(count + 1), "Up high!" }
button { onclick: move |_| set_count(count - 1), "Down low!" }
))
};
```
Dioxus 与 React 有许多的相似之处，如果本指南中有任何未阐述清楚的概念，你可以前往 React 文档中查询。
我们致力于在 Rust 生态环境中构建一个令人熟悉的UI框架，如果你已经熟悉 React 了，那么 Dioxus 将对你来说非常的简单！
（如果你是新手，这本指南同样适合你哦qwq）
## 多平台
`Dioxus` 是一个支持多平台的开发包，这意味着它的核心代码可以在任何平台下被使用。
与许多其他 Rust 前端工具包不同，Dioxus 与 Web-Sys 并没有本质上的联系。
事实上，每个元素和事件监听器都可以在编译时被更改。
目前为止，我们拥有以下渲染器：
- WebSys (为 WASM 提供)
- Tao/Tokio (为桌面端提供)
- Tao/Tokio (为移动端提供)
- SSR (用于生成静态 SSR)
- TUI/Rink (用于制作终端程序)
### Web 支持
网页端是 Dioxus 最为重要的支持平台，要想让你的项目能够在 Web 中运行，首先会将其编译为 **WebAssembly** 并启用 `Dioxus-Web` 功能。
WASM 有很多系统限制，这导致你的代码不能包含任何原生的系统调用（计时器，IO 等）
鉴于 Web 平台功能已经非常成熟了，所以说后期的 API 变化会很小。
一些 Web 端的演示项目：
- [TodoMVC](https://gitee.com/dioxus-cn/example-projects/tree/master/todomvc)
- [ECommerce](https://gitee.com/dioxus-cn/example-projects/tree/master/ecommerce-site)
### SSR 支持
Dioxus 支持 SSR 的服务端渲染。
为了从 WebServer 渲染到静态文件 `.html`，你需要确保在 Dioxus 功能中启用了 SSR 特性。
```rust
let contents = dioxus::ssr::render_vdom(&dom);
```
我们不认为 SSR API 在未来会有太大的变化。
一些 SSR 端的演示项目：
- [官方网站](https://github.com/dioxusLabs/docsite)
### Desktop 支持
桌面端也是 Dioxus 生态中非常强大的一项，但与 Web 端相比，它所能做的还远远不够。
目前，桌面应用使用 WebView 库渲染，但你的 Rust 代码依然是在本地系统运行的。
这意味着部分浏览器 API 并不可用，所以说它并不能完全支持 Web 的功能。
但是原生的系统 API 则是可以使用的（类似于 Websockets、文件系统等 ）
一些 Desktop 端的演示项目：
- [文件浏览器](https://gitee.com/dioxus-cn/example-projects/tree/master/file-explorer)
- [WiFi 扫描器](https://gitee.com/dioxus-cn/example-projects/blob/master/wifi-scanner)
### Mobile 支持
移动端是目前 Dioxus 最有待提升的一项，它现在非常有很多问题需要处理。
移动端应用使用 WebView 渲染，这意味着动画、透明和本地小部件目前是无法实现的。
此外，iOS 是目前唯一支持的移动平台。( Dioxus 使用的 Rust 窗口库- tao -目前不支持Android。)
#### 什么样的情况下你可以选择使用 Dioxus 开发移动端：
如果你不关心 原生App 中类似于动画、透明、小组件等功能，而仅仅是 渲染/处理 一些简单的数据。
那么你可以尝试使用 `Dioxus-Mobile` （我们希望它在后续能不断完善，越做越好！）
一些 Mobile 端的演示项目：
- [Todo App](https://gitee.com/dioxus-cn/example-projects/blob/master/ios_demo)