首先创建一个二进制项目，然后我们使用： 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>
}
}
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于