这是我写第二次了,重新整理让我的文章没了 (中指
然後我这两天在写 Yew 时遇到了 HtmlAudioElement 的问题
能编译也能跑 但是 console 会报错
如果有解决之後的篇章会加菜喔 owob
先从 trunk 开始吧 (第二次一模一样的东西好讨厌 主办单位要不要管一下
那 trunk 可以干麻
主要是可以方便使用,不用像使用 wasm-pack 一样麻烦
这边对比一下
大概这样,是不是感觉差别很大呢?
安装的部份就直接
$ cargo install trunk wasm-bindgen-cli
跑一下之後就能安装成功了
安装成功後 下一步就是创建 html 档
如果你跟我一样使用的 IDE 是 IDEA 就能直接 新增在专案的根目录
不用更动其他东西
那专案的根目录就是 Cargo.toml 那边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body></body>
</html>
之後只要直接 trunk serve 就能够直接编译启动了喔
比一般使用还要方便许多
喔对 而且他官方的 Example 全部可以靠这个方式启动
然後就会可以透过浏览器开启 0.0.0.0:8080 看到你写的 wasm 网页喔
那既然学会怎麽开 Example 接下来就来介绍他的其中一个 Example 吧
先 git clone 下来他的专案 怎麽 git clone 就不教ㄌ
那今天讲的 Example 是 counter 有点新手村初级打怪的概念
那上面的 Msg 可以看到是一个 enum 的构造
pub enum Msg {
Increment,
Decrement,
}
那这是代表说他主要会出现这两个操作
而 Model 中存了一个 value 也就是说这个专案里面会操作的数值
接下来就依序讲解下面的 Component 吧
因为他是 trait 的构造所以只能照着他的形式写不然会编译错误喔
好 那 create 的部份不多赘述,因为就只是单纯初始化 Model 的数值而已
可以改成 100 看看 那初始化出来的也会不一样 owob
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::Increment => {
self.value += 1;
console::log!("plus one");
true
}
Msg::Decrement => {
self.value -= 1;
console::log!("minus one");
true
}
}
}
至於 update 的部份就会看到下面出现了一个 match 的构造
对应了上面的 enum 而里面直接对 self.value 进行操作 也就是 create 初始化的值
那後面会发现有一个 console::log! (注意 不是 console.log
那这个东西不是 Yew 库中的
所以要将他引入
$ cargo add gloo_console
这个之前讲过安装了
或是在 Cargo.toml 新增
那要记得 在上面 use 的地方 他 Example 是写
use gloo_console as console;
这个 as 在之前的篇章有写过但是没多少人看 QwQ
也就是让 console 作为 gloo_console 的关键字来使用
透过这个如果在 run 起来後用浏览器看 控制台就能够看到讯息
是拿来 Debug 的好工具
然後记得回传 true 因为这是让他辨别是否要更动输出的东西
那最後 第二次的最後...
我只会拿部份的代码出来讲
<button class="button" onclick={ctx.link().callback(|_| Msg::Increment)}>{ "+1" }</button>
<button onclick={ctx.link().callback(|_| Msg::Decrement)}>{ "-1" }</button>
<button onclick={ctx.link().batch_callback(|_| vec![Msg::Increment, Msg::Increment])}>{ "+1, +1" }</button>
那可以看说他去 使用了上面引入的 ctx 去调用他的 function
那可以发现说不只是只能一次用一个
最下面的就示范了将操作丢进 Vector 的方法
那今天大概到这边 被删掉真的很不爽 zzz
总之 希望有人能回应我的问题(官方群那边)
各位晚安 昨天有人留言超开心
>>: DAY 8 『 CollectionView 』Part1
流程图 运动 go! 由使用者传送位置讯息给 Line,Line 搭配之前提到过的开放地图,搜寻附近...
今天我们运用NavigationView去做切换视窗。 正文 建立新的页面 因为我们之前都是在主页去...
小财神,你赢了。 我没有可以轻易成文的内容了,再来的部分需要在多花心思研究来写。 没想到铁人赛的结...
过去不管是手机或电脑想要萤幕录影,都需要依靠第三方程序来执行,而现在只要是新型的装置其实都有内建的萤...
今天是铁人赛最後一天,也完成了连续 30 天晚上没躺在椅子上睡着的挑战 ^^" 除了假日以...