這是我寫第二次了，重新整理讓我的文章沒了 (中指
然後我這兩天在寫 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
總之 希望有人能回應我的問題（官方群那邊）
各位晚安 昨天有人留言超開心
我自己都是先在電腦上寫好才貼上來調整格式的，這樣比較不會因為網路什麼的問題就要重寫，可以參考看看
感謝建議 我之後應該都會用 Hackmd 寫完再 po 上來
iThome鐵人賽
看影片追技術