[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
总之 希望有人能回应我的问题(官方群那边)
各位晚安 昨天有人留言超开心


<<:  Day9 - TextView(三)

>>:  DAY 8 『 CollectionView 』Part1

Nutrition Helper Part 2

流程图 运动 go! 由使用者传送位置讯息给 Line,Line 搭配之前提到过的开放地图,搜寻附近...

Day 20 - SwiftUI开发学习4(切换分页)

今天我们运用NavigationView去做切换视窗。 正文 建立新的页面 因为我们之前都是在主页去...

【预告】没想到铁人赛结束才是铁人的开始Orz - 遗珠之憾

小财神,你赢了。 我没有可以轻易成文的内容了,再来的部分需要在多花心思研究来写。 没想到铁人赛的结...

免下载、免费!Windows 10 内建的萤幕录影工具总整理

过去不管是手机或电脑想要萤幕录影,都需要依靠第三方程序来执行,而现在只要是新型的装置其实都有内建的萤...

Day 30 - 永丰银行付款外挂发布、铁人赛总结

今天是铁人赛最後一天,也完成了连续 30 天晚上没躺在椅子上睡着的挑战 ^^" 除了假日以...