iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Software Development

Rust的多方面運用系列 第 16

[Day16] trunk 以及 Counter 範例解說 (Yew wasm)

這是我寫第二次了,重新整理讓我的文章沒了 (中指
然後我這兩天在寫 Yew 時遇到了 HtmlAudioElement 的問題
能編譯也能跑 但是 console 會報錯
如果有解決之後的篇章會加菜喔 owob


先從 trunk 開始吧 (第二次一模一樣的東西好討厭 主辦單位要不要管一下
那 trunk 可以幹麻
主要是可以方便使用,不用像使用 wasm-pack 一樣麻煩
這邊對比一下

  • wasm-pack: build 很麻煩 html 檔很長
  • trunk: 可以直接使用 然後儲存檔案後會自動編譯 html 檔只需要必要的東西

大概這樣,是不是感覺差別很大呢?
安裝的部份就直接

$ 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
總之 希望有人能回應我的問題(官方群那邊)
各位晚安 昨天有人留言超開心


上一篇
[Day15] Wasm 簡介跟 Yew 環境介紹 && 配置
下一篇
[Day17] POPCAT in WASM (Part 1)
系列文
Rust的多方面運用30

1 則留言

0
DanSnow
iT邦研究生 5 級 ‧ 2021-09-20 09:53:41

我自己都是先在電腦上寫好才貼上來調整格式的,這樣比較不會因為網路什麼的問題就要重寫,可以參考看看

淺羽 iT邦新手 5 級 ‧ 2021-09-20 14:53:25 檢舉

感謝建議 我之後應該都會用 Hackmd 寫完再 po 上來

我要留言

立即登入留言