4个版本
| 0.10.5 | 2024年6月15日 |
|---|---|
| 0.10.3 | 2024年6月15日 |
| 0.10.2 | 2024年6月15日 |
| 0.7.11 | 2024年1月30日 |
#1061 在 WebAssembly
每月 295次下载
在 webui 中使用
12KB
70 行
Web UI
查看演示和文档网站 - webui.stoicdreams.com
查看Rust WebUI文档 - docs.rs/webui
在crates.io上查看 - crates.io/crates/webui
在GitHub上查看 - github.com/StoicDreams/WebUI
关于
webui_procs 是 webui 使用的宏集合。
webui 是一个用于快速轻松构建webassembly SPA网站的网站框架。
目标
- 在开始新的网站项目时最小化样板代码。
- 遵守Material UI标准。
- 提供强大的组件系统，用于处理常见的显示类型、用户输入和交互以及数据处理。
开发工作刚刚开始，因此我们不推荐在此阶段用于任何超出实验目的之外的事情。
入门
以下说明假设您至少对Rust语言和生态系统有所了解。
如果您是Rust的新手，则可以通过阅读 《Rust书》 来了解该语言。
此项目是在Mac上设置的，因此目前尚未在Windows或Linux机器上验证说明，尽管预计在这个范围内不会有太大差异。
安装必需的开发依赖项
按照 此处说明 在您的系统上安装Rust。
确保Rust是最新的
rustup update
安装 Trunk 可执行文件 - 这将用于在浏览器中测试您的本地网站。
cargo install trunk wasm-bindgen-cli
添加waxm构建目标
rustup target add wasm32-unknown-unknown
特性
在您开始之前，了解 WebUI 提供的可选特性非常重要。
这些功能可以通过功能标志来启用。一些功能仅适用于用于设置核心 WebUI 框架文件的 WebUI 可执行文件，而其他一些功能仅适用于 WebUI 库，最后一些则两者都适用。
| 标志 | 库 | 可执行文件 | 详情 |
|---|---|---|---|
| 页面 | X | 包含此标志以包含一些 starter_page_* 组件，用于在新网站上设置一些初始启动页面。 | |
| myfi | X | 包含此标志以包含与 MyFi.ws API 服务集成的组件（*目前正在开发中。） |
当前和计划中的功能
| 标志 | 功能 | 状态 | 详情 |
|---|---|---|---|
| 页面 | 隐私 | 可用 | 通用隐私页面 |
| 页面 | 条款 | 可用 | 通用条款和条件页面 |
| 页面 | 建设中 | 可用 | 通用建设中页面/占位符 |
| myfi | 反馈 | 开发 | 捕获用户反馈的对话框 |
| myfi | 事件日志 | 开发 | 记录事件日志的辅助方法 |
| myfi | 账户服务 | 开发 | 用户注册/登录/登出以及基于角色的内容限制的页面和方法 |
| myfi | 页面数据 | 计划中 | 存储和检索页面数据 |
| myfi | 网站编辑器 | 计划中 | 通过网站 UI 管理页面内容的内联编辑器 |
开始一个新的 Rust 项目
通过创建项目来开始使用 cargo。
cargo new name_of_your_app
cd name_of_your_app
验证您的 Rust 环境是否正确设置。
cargo run
更新您的 Cargo.toml 文件以包括 webui 依赖项。
[package]
name = "name_of_your_app"
version = "0.1.0"
edition = "2021"
[dependencies]
webui = "0.10.5"
# Customize with specific feature flags (pages is included by default)
# webui = { version = "0.10.5", default-features = false }
# webui = { version = "0.10.5", features = ["all"] }
# webui = { version = "0.10.5", features = ["myfi", "pages"] }
# Use the direct GitHub reference if you want bleeding edge updates
# webui = { git = "https://github.com/StoicDreams/WebUI", branch = "main" }
安装 webui 可执行文件 - 这将用于构建您的样板静态文件。
注意：我们建议您通常为您的
webui可执行文件设置与您为webui库的使用相同的特征标志，以确保包含相应的启动文件。但是，并非所有功能都在WebUI的库版本和可执行文件版本之间共享。有关在WebUI可执行文件和库之间使用特定功能的更多信息，请参阅上面的 功能 部分。
# default installation, includes starter pages md files.
cargo install webui
# explicitly include starter pages
cargo install webui --features pages
# example setting multiple features
cargo install webui --features "pages myfi"
# install with all features enabled
cargo install webui --all-features
# exlude any optional features
cargo install webui --no-default-features
在您的项目根目录（不是 src）中运行 webui 以添加静态文件（index.html、css 等）
webui
Web UI 文件
请注意，每次您更新到新版本时，都应该运行 webui 命令，确保更新项目中的 webui 可执行文件和 webui 依赖项。
某些文件被视为静态文件，不打算手动更新。这些文件将在更新期间被覆盖。
其他文件被视为启动文件，您可能希望或需要更新，并且在更新期间不会覆盖现有文件。如果您想更新到最新的启动文件，则需要删除或重命名现有的文件 - 建议重命名文件，例如在文件名后加上 .bck，这样您就可以在创建新 Web UI 文件后复制您的自定义设置。
| 文件 | 启动文件 | 静态文件 | 详情 |
|---|---|---|---|
| index.html | X | 更新元数据信息并添加任何用于扩展 js/css 功能的链接。 | |
| app.webmanifest | X | 更新有关您应用程序的信息。这用于可安装的 SPA。 | |
| robots.txt | X | 根据需要更新以管理搜索引擎规则。 | |
| Logo.svg | X | 占位符标志。更新为您自己的。 | |
| service-worker.js | X | 基本的文件缓存服务工作者，对于可安装的 SPA 应用程序也是必需的。 |
运行开发服务器进行测试
在项目根目录下运行 trunk serve --open 以在本地运行您的网站。--open 标志会在您的默认浏览器中打开您的网站。如果您已经打开了页面，可以省略 --open 标志。
trunk serve --open
作者
Erik Gassler - Stoic Dreams - 为明天的软件开发打造解决方案。
支持 - 如果您想支持 Stoic Dreams，请访问 Stoic Dreams 的 GitHub 赞助页面。