首先创建一个二进制项目，然后我们使用： cargo install trunk
trunk 是一种脚手架帮助我们构建 wasm 项目
[package] name = "project" version = "0.1.0" edition = "2021" [dependencies] wasm-bindgen = "0.2.67" stylist = { version = "0.10.0", features = ["yew"]} yew = "0.19.3"
然后我们在项目的根目录中创建一个 index.html 之后我们自动补全就不用管了，接着编写我们的 lib.rs
use yew::prelude::*; #[function_component(ComponentName)] // 定义一个组件 组件的名称ComponentName // 他会帮助我们生成一个 ComponentName 的结构 fn component_name() -> Html{ html! { <div> <div>{"HelloWorld"}</div> </div> } } fn main(){ yew::start_app::<ComponentName>(); }
接着直接 trunk serve 即可
📚 Yew 尝鲜
创建时间：
2023-04-10 02:27 星期一
lib.rs use yew::prelude::*; #[function_component(ComponentName)] // 宏 // 定义一个组件 组件的名称ComponentName // 他会帮助我们生成一个 ComponentName 的结构 pub fn component_name() -> Html{ html! { <div> <div>{"HelloWorld"}</div> </div> } } main.rs use project::ComponentName; fn main(){ yew::start_app::<ComponentName>(); }
分子、原子、组织归纳法：
- 小到 按钮 文字 我们放在原子文件夹中（atom)
- 比较大的：按钮组 文本列表放在分子中 (molecules)
- 大的 导航 footer header 放在组织中 (organisms)
Debug
我们想使用 console 的时候 可以加入一个 gloo的 crate
gloo = "0.6.1"
use std::fmt::format; use gloo::console::log; use yew::prelude::*; #[function_component(ComponentName)] // 定义一个组件 组件的名称ComponentName // 他会帮助我们生成一个 ComponentName 的结构 pub fn component_name() -> Html{ let debugValue = vec![1,1,3,4]; let stringValue = format!("{:?}", debugValue); log! (stringValue); html! { <div> <div>{"HelloWorld"}</div> </div> } }
HTML! 的 IF 语句
use std::fmt::format; use gloo::console::log; use yew::prelude::*; #[function_component(ComponentName)] // 定义一个组件 组件的名称ComponentName // 他会帮助我们生成一个 ComponentName 的结构 pub fn component_name() -> Html{ let username = "No"; html! { <div> if username == "UserName"{ <div>{"HelloWorld"}</div> }else{ <div>{"NoThing"}</div> } </div> } }
Loop
当我们遍历元组的时候 我们需要给元组套上一些 类似 li 的东西
list_use.iter().map() 函数需要一个闭包参数 他会遍历
list_use 列表中的元素并传入给这个闭包进行处理，然后以闭包函数的返回值进行替代 他返回的是一个迭代器，我们可以使用collect::<Type> 将他们转化为指定类型的 Vec 变量。
use yew::prelude::*; #[function_component(ListLoop)] pub fn list_loop() -> Html { let list_use = vec!["张三", "李四", "王五"]; html! { <div> <ul> { list_use.iter().map( |element| html!{<li>{element}</li>} ).collect::<Html>() }<br /> </ul> </div> } }
我们可以对其中的代码进行复用分离
use std::fmt::Display; use yew::prelude::*; pub fn mk_li<T>(lst: &Vec<T>) -> Html where T: Display + Clone, { let lst_u = lst.clone(); html! { <div> <ul> { lst_u.iter().map( | ele | html!{ <li> {ele} </li> } ).collect::<Html>() } </ul> </div> } } #[function_component(ListLoop)] pub fn list_loop() -> Html { let list_use = vec!["张天师", "李四", "王五"]; let dom_list = mk_li(&list_use); html!{ <div> {dom_list} </div> } }
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于