rust wasm入门指南

wasm入门指南

WebAssembly是什么？WebAssembly即WASM， WebAssembly是一种新的编码格式并且可以在浏览器中运行，WASM可以与JavaScript并存，WASM更类似一种低级的汇编语言。

WebAssembly介绍

WebAssembly 概念 - WebAssembly | MDN (mozilla.org)

WebAssembly（缩写为wasm）是一种低级别的、面向浏览器的二进制指令格式。

它被设计为一种可移植、高性能的执行格式，用于在各种环境中运行代码。WebAssembly 不依赖于特定的编程语言，而是作为一种通用的目标平台，可以从多种编程语言编译生成。 WebAssembly 可以在现代浏览器中直接运行，并且与 JavaScript 一起使用，以提供更高效的性能和更广泛的语言支持。通过将代码编译为 WebAssembly 格式，开发人员可以使用其他编程语言（如 C/C++、Rust、Go 等）来编写高性能的 Web 应用程序，同时仍然能够与 JavaScript 进行交互。

WebAssembly 的特点包括：

• 二进制格式：WebAssembly 代码以二进制格式存储，可以更快地加载和解析。
• 高性能：WebAssembly 的执行速度比传统的 JavaScript 代码更快，因为它是一种低级别的指令格式，可以直接在底层虚拟机上运行。
• 安全性：WebAssembly 代码在运行时受到严格的沙箱限制，可以提供更高的安全性，防止恶意代码对系统的攻击。
• 跨平台：WebAssembly 不仅可以在浏览器中运行，还可以在其他环境（如服务器、嵌入式设备等）中使用，实现跨平台的代码共享。

wasm使用

介绍 - Rust和WebAssembly中文文档 (wasmdev.cn)

1.安装rust工具链

安装rust

安装 Rust - Rust 程序设计语言 (rust-lang.org)

安装was-pack

cargo install was-pack

安装rust target

rustup target add wasm32-unknown-unknown

2.搭建工程目录

前端使用pnpm包管理工具

初始化工程目录

pnpm create vite

然后进入该目录

新建一个rust二进制项目

cargo new <projectName> --lib

安装rust wasm依赖并指定lib的create-type ,一定要加上cdylib不然编译不了

[dependencies]
console_error_panic_hook = "0.1.7"
js-sys = "0.3.64"
serde = { version = "1.0.188", features = ["derive"] }
serde-wasm-bindgen = "0.6.0"
serde_json = "1.0.107"
tracing = "0.1.37"
tracing-wasm = "0.2.1"
wasm-bindgen = "0.2.87"
web-sys = { version = "0.3.64", features = ["console"] }

[lib]
crate-type = ["cdylib", "rlib"]

3.hello world

hello world

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

编译成wasm

wasm-pack build -t web

要在前端中使用还需要一点点小配置

在前端工程目录下新建文件pnpm-workspace.yaml

package:
  - "./<you rust project name>/pkg"

还需要配置一下vite,因为vite打包策略跟webpack不一样

// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
    optimizeDeps: {
        exclude: ['your rust project name']
    }
})

使用

import init, { greet } from "wasm-game-of-life";

init().then(() => {
  greet("张三");
});

当然也可以安装顶层await插件

import { defineConfig } from "vite";
import topLevelAwait from 'vite-plugin-top-level-await'
export default defineConfig({
  plugins: [topLevelAwait()],
  optimizeDeps: {
    exclude: ["your rust project name"],
  },
});

import  init,{ greet } from "wasm-game-of-life";
await init();
greet("1546dwadd")

案例介绍

下文有两个案例，一个是康威生命游戏，另一个是dioxus todo List

康威生命游戏使用wasm-bindgin典型的rust封装wasm方法供前端调用。

dioxus是rust中类型于前端react的框架，是all in wasm的。

康威生命游戏

生命游戏规则可以直接看文档

规则 - Rust和WebAssembly中文文档 (wasmdev.cn)

1.定义细胞生命状态

#[wasm_bindgen]
#[repr(u8)]//指定内存大小，占用8个bit
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Cell {
    Dead = 0,
    Alive = 1,
}

使用 #[repr(u8)] 很重要，这样每个单元格都表示为单个字节。同样重要的是， Dead 变体为 0 ,Alive 变体为 1 ，这样我们就可以很容易地通过加法来计算一个细胞的活邻居。

2.定义宇宙

#[wasm_bindgen]
pub struct Universe {
    width: u32,
    height: u32,
    cells: Vec<Cell>,
}

3.实现方法

#[wasm_bindgen]
impl Universe {
    //获取到行号列好对应的索引
    fn get_index(&self, row: u32, column: u32) -> usize {
        (row * self.width + column) as usize
    }

    //获取活着的领据的个数
    fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
        let mut count = 0u8;
        for delta_row in [self.height - 1, 0, 1].iter().cloned() {
            for delta_col in [self.width - 1, 0, 1].iter().cloned() {
                if delta_col == 0 && delta_row == 0 {
                    //是自己时直接跳过
                    continue;
                }

                let neighbor_row = (row + delta_row) % self.height;
                let neighbor_col = (column + delta_col) % self.width;
                let neighbor_index = self.get_index(neighbor_row, neighbor_col);
                count += self.cells[neighbor_index] as u8;
            }
        }
        count
    }

    //下一个时间点宇宙的状态
    pub fn tick(&mut self) {
        let mut next = self.cells.clone();
        for row in 0..self.height {
            for col in 0..self.width {
                let index = self.get_index(row, col);
                let cell = self.cells[index];
                let live_neighbors = self.live_neighbor_count(row, col);

                let next_cell = match (cell, live_neighbors) {
                    //任何邻近细胞少于两个的活细胞都会死亡，似乎是由于细胞数量不足造成的
                    (Cell::Alive, x) if x < 2 => Cell::Dead,
                    //任何有两个或三个邻居的活细胞都能活到下一代
                    (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
                    //任何有三个以上邻居的活细胞都会死亡，就好像是由于细胞数量过多
                    (Cell::Alive, x) if x > 3 => Cell::Dead,
                    //任何死亡细胞，如果恰好有三个活的邻居，就会变成活细胞，就像通过繁殖一样
                    (Cell::Dead, 3) => Cell::Alive,
                    (otherwise, _) => otherwise,
                };

                next[index] = next_cell;
            }
        }

        self.cells = next;
    }

    //创造一个新的宇宙
    pub fn new(row: Option<u32>, col: Option<u32>) -> Self {
        let w = match row {
            Some(w) => w,
            None => 64,
        };
        let h = match col {
            Some(h) => h,
            None => 64,
        };
        //随机初始化宇宙存活的细胞
        let cells: Vec<Cell> = (0..w * h)
            .map(|i| {
                if i % 2 == 0 || i % 7 == 0 {
                    Cell::Alive
                } else {
                    Cell::Dead
                }
            })
            .collect();

        Self {
            width: w,
            height: h,
            cells,
        }
    }
  //渲染出来
    pub fn render(&self) -> String {
        self.to_string()
    }
}

4.实现fat::Display trait

//为Universe实现Display trait
//这样才能调用to_string方法
impl fmt::Display for Universe {
    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
        for line in self.cells.as_slice().chunks(self.width as usize) {
            for &cell in line {
                let symbol = if cell == Cell::Dead {
                    '◻'
                } else {
                    '◼'
                };
                write!(f, "{}", symbol)?
            }
            write!(f, "\n")?
        }
        Ok(())
    }
}

5.编译wasm

wasm-pack build -t web

前端调用

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
    <style>
      body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <pre id="game-of-life-canvas"></pre>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import init, { Universe } from "wasm-game-of-life";

await init();

const universe = Universe.new(64,48);
const pre = document.getElementById("game-of-life-canvas");

function renderLoop() {
    pre!.innerHTML = universe.render();
    universe.tick()
    requestAnimationFrame(renderLoop);
}

renderLoop()

游戏优化

在Rust中生成(并分配)一个String，然后让wasm-bindgen将其转换为有效的JavaScript字符串， 这将不必要地复制宇宙单元格。由于JavaScript代码已经知道宇宙的宽度和高度，并且可以直 接读取组成单元格的WebAssembly线性内存，因此我们将修改 render 方法以返回一个指向单元格数组开头的指针。

另外，我们将不再呈现Unicode文本，而是切换到使用Canvas API。

在wasm-game-of-life/www/index.html中，让我们将之前添加的<pre>替换为 我们将要渲染的<canvas>(它也应该在<body>中，在加载JavaScript <script>之前)；

新增加以下内容

lib.rs

impl Universe{
  	//...
    //获取当前宇宙宽度
    pub fn width(&self)->u32{
        self.width
    }
    //获取当前宇宙高度
    pub fn height(&self)->u32{
        self.height
    }

    //获取当前细胞指针
    pub fn cells(&self)->*const Cell{
        self.cells.as_ptr()
    }
}

注意：修改完rust代码要重新编译一下

main.ts

import init, { Universe, Cell } from "wasm-game-of-life";
//通过init 获取memory 内存
const {memory} = await init();
const CELL_SIZE = 5; //px
const GRID_COLOR = "#cccccc";
const DEAD_COLOR = "#FFFFFF";
const ALIVE_COLOR = "#54e674";

const universe = Universe.new(64, 64);
const canvas = document.getElementById(
  "game-of-life-canvas"
) as HTMLCanvasElement;
const width = universe.width();
const height = universe.height();

canvas.height = (CELL_SIZE + 1) * height + 1;
canvas.width = (CELL_SIZE + 1) * width + 1;

const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

function drawGrid() {
  ctx.beginPath();
  ctx.strokeStyle = GRID_COLOR;

  //垂直线
  for (let i = 0; i <= width; i++) {
    ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
    ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
  }

  //水平线
  for (let i = 0; i <= height; i++) {
    ctx.moveTo(0, i * (CELL_SIZE + 1) + 1);
    ctx.lineTo((CELL_SIZE + 1) * width + 1, i * (CELL_SIZE + 1) + 1);
  }
  ctx.stroke();
}

function getIndex(row: number, col: number) {
  return row * width + col;
}

function drawCells() {
    const cellsPtr = universe.cells();
    //通过buffer让其转为数组，方便我们读取细胞信息
    const cells = new Uint8Array(memory.buffer, cellsPtr, width * height)
    for (let row = 0; row < width; row++){
        for (let col = 0; col < height; col++){
            const idx = getIndex(row, col);
            
            ctx.fillStyle = cells[idx] === Cell.Alive ? ALIVE_COLOR : DEAD_COLOR;

            ctx.fillRect(row * (CELL_SIZE + 1) + 1, col * (CELL_SIZE + 1) + 1, CELL_SIZE, CELL_SIZE);
        }
    }
}

function renderLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  universe.tick();
  drawGrid();
  drawCells();
  requestAnimationFrame(renderLoop);
}
renderLoop();

我们可以直接获取init初始化后返回的memory内存地址，然后使用Uint8Array转成数组，这样就能直接通过内存读取细胞了，不用再通过rust读取

调用js中Math.render随机函数来初始化宇宙

//导入js_sys库
use js_sys::Math;
use std::fmt;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
#[repr(u8)] //指定内存大小，占用8个bit
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Cell {
    Dead = 0,
    Alive = 1,
}

#[wasm_bindgen]
pub struct Universe {
    width: u32,
    height: u32,
    cells: Vec<Cell>,
}

#[wasm_bindgen]
impl Universe {
    //....
    //创造一个新的宇宙
    pub fn new(row: Option<u32>, col: Option<u32>) -> Self {
        let w = match row {
            Some(w) => w,
            None => 64,
        };
        let h = match col {
            Some(h) => h,
            None => 64,
        };
        //随机初始化宇宙存活的细胞
        let cells: Vec<Cell> = (0..w * h)
            .map(|_| {
                //调用js的随机生成函数
                if Math::random() <0.5 {
                    Cell::Alive
                } else {
                    Cell::Dead
                }
            })
            .collect();

        Self {
            width: w,
            height: h,
            cells,
        }
    }
}

测试

要导入crate需要正确的lib类型

cargo.toml

[lib]
crate-type = ["cdylib", "rlib"]

前面cdylib 动态链接库编译成wasm就是需要该类型

rlib是静态库，rust使用需要该类型

测试需要安装wasm-bindgen-test crate

cargo add wasm-bindgen-test

tests/web.rs

#![cfg(target_arch="wasm32")]
use wasm_bindgen_test::*;
use wasm_game_of_life::Universe;

wasm_bindgen_test_configure!(run_in_browser);

//初始化的宇宙
#[cfg(test)]
pub fn input_spaceship() -> Universe {
    let mut universe = Universe::new(None,None);
    universe.set_width(6);
    universe.set_height(6);
    universe.set_cells(&[(1,2), (2,3), (3,1), (3,2), (3,3)]);
    universe
}

//调用下一个tick后的宇宙
#[cfg(test)]
pub fn expected_spaceship() -> Universe {
    let mut universe = Universe::new(None,None);
    universe.set_width(6);
    universe.set_height(6);
    universe.set_cells(&[(2,1), (2,3), (3,2), (3,3), (4,2)]);   
    universe
}
//测试下一个宇宙
#[wasm_bindgen_test]
pub fn test_tick() {
    let mut input_universe = input_spaceship();
    let expected_universe = expected_spaceship();
    input_universe.tick();

    assert_eq!(&input_universe.get_cells(),&expected_universe.get_cells());
}

运行测试代码

wasm-pack test --chrome --headless

实际运行的测试函数是具有属性#[wasm-bindgen-test]的函数

#![cfg(target_arch="wasm32")]

注意在文件开头加上以上代码

调试

安装依赖

cargo add console_error_panic_hook

编写调试钩子

src/utils.rs

pub fn set_panic_hook(){
    #[cfg(feature="console_error_panic_hook")]
    console_error_panic_hook::set_once();
}

具体调试可以看教程

添加按钮暂停游戏

let animatedId: number | null = null;
const btn = document.getElementById("play-pause") as HTMLButtonElement;

function renderLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  universe.tick();
  drawGrid();
  drawCells();
  animatedId = requestAnimationFrame(renderLoop);
}

const isPaused = () => {
  return animatedId === null;
}

const play = () => {
  btn.textContent = "pause";
  renderLoop();
};

const pause = () => {
  btn.textContent = "play";
  cancelAnimationFrame(animatedId!);
  animatedId = null;
};

btn.addEventListener("click", () => { 
  if (isPaused()) {
    play()
  } else {
    pause()
  }
})

play()

添加点击切换细胞状态功能

//为细胞添加切换状态功能
impl Cell {
    pub fn toggle(&mut self) {
        *self = match *self {
            Self::Alive => Self::Dead,
            Self::Dead => Self::Alive,
        };
    }
}

//实现宇宙中切换对应行列细胞状态
#[wasm_bindgen]
impl Universe {
    pub fn toggle_cell(&mut self, row: u32, col: u32) {
        let idx = self.get_index(row, col);
        self.cells[idx].toggle();
    }
}

// 为canvas添加点击事件切换细胞状态

canvas.addEventListener("click", (event) => {
  const boundingRect = canvas.getBoundingClientRect();

  const scaleX = canvas.width / boundingRect.width;
  const scaleY = canvas.height / boundingRect.height;

  const canvasLeft = (event.clientX - boundingRect.left) * scaleX;
  const canvasTop = (event.clientY - boundingRect.top) * scaleY;

  const row = Math.min(Math.floor(canvasTop / (CELL_SIZE + 1)), height - 1);
  const col = Math.min(Math.floor(canvasLeft / (CELL_SIZE + 1)), width - 1);
  console.log(row, col);
  universe.toggle_cell(row, col);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawGrid();
  drawCells();
});

显示帧率

//添加fps真率显示
const fps = new (class {
  public fps = document.getElementById("fps")!;
  public frames: number[] = [];
  public lastFrameTimeStamp = performance.now();

  render() {
    // Convert the delta time since the last frame render into a measure
    // of frames per second.
    const now = performance.now();
    const delta = now - this.lastFrameTimeStamp;
    this.lastFrameTimeStamp = now;
    const fps = (1 / delta) * 1000;

    // Save only the latest 100 timings.
    this.frames.push(fps);
    if (this.frames.length > 100) {
      this.frames.shift();
    }

    // Find the max, min, and mean of our 100 latest timings.
    let min = Infinity;
    let max = -Infinity;
    let sum = 0;
    for (let i = 0; i < this.frames.length; i++) {
      sum += this.frames[i];
      min = Math.min(this.frames[i], min);
      max = Math.max(this.frames[i], max);
    }
    let mean = sum / this.frames.length;

    // Render the statistics.
    this.fps.textContent = `
Frames per Second:
         latest = ${Math.round(fps)}
avg of last 100 = ${Math.round(mean)}
min of last 100 = ${Math.round(min)}
max of last 100 = ${Math.round(max)}
`.trim();
  }
})();

Dioxus

一个rust wasm框架，类似于react

官方GitHub里有很多例子，可以参考参考

1.hello world

也可以使用官方推荐的方式

Dioxus | An elegant GUI library for Rust |一个优雅的 Rust GUI 库 (dioxuslabs.com)

1.安装工具链

cargo install trunk
rustup target add wasm32-unknown-unknown

2.初始化项目

cargo new rust-dioxus

3.添加依赖

[dependencies]
dioxus = "0.4.0"
dioxus-web = "0.4.0"
tracing = "0.1.37"
tracing-wasm = "0.2.1"

4.编写组件

#![allow(non_snake_case)]
use dioxus::prelude::*;
use tracing::info;
fn main() {
    tracing_wasm::set_as_global_default();
    dioxus_web::launch(App);
}

fn App(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);
    cx.render(rsx!(
        h1{
            "hello dioxus abc123 {count}"
        }
        button{
            onclick: move|e|{
                info!("click {e:?}");
                count+=1
            },
            "+1"
        }
        button{
            onclick:move |_|{count-=1},
            "-1"
        }
    ))
}

5.启动

trunk serve

2.fermi

dioxus全局状态管理fermi - Rust (docs.rs)

自己使用Arc和Mutex封装过，但是不能触发页面状态更新，后面继续尝试

官方例子dioxus/examples/fermi.rs at master

lib.rs

#![allow(non_snake_case)]
#![allow(unused)]
use dioxus::{
    html::{input_data::keyboard_types::Key, p},
    prelude::*,
};
use fermi::{Atom, AtomRef, AtomRoot, AtomState, use_init_atom_root, use_atom_ref};
use std::{
    collections::BTreeMap,
    rc::Rc,
    sync::{atomic::AtomicU32, Arc, Mutex},
};
use tracing::info;
mod components;
use components::{todo_filter, todo_input, todo_item};

#[derive(Debug, Clone, PartialEq)]
pub struct TodoItem {
    id: u32,
    title: String,
    completed: bool,
}

pub type Todos = BTreeMap<u32, TodoItem>;


#[derive(Debug, Clone, PartialEq)]
pub enum Filter {
    All,
    Active,
    Completed,
}

impl Filter {
    pub fn default() -> Self {
        Self::All
    }
}

//使用静态注册全局变量
static FERMI_TODOS: AtomRef<Todos> = AtomRef(|_| Todos::default());

pub fn App(cx: Scope) -> Element {
  	//初始化fermi
    use_init_atom_root(cx);
  	
  	//使用fermi全局状态，注意第二个参数传入引用
    let todos=use_atom_ref(cx, &FERMI_TODOS);
    let filter = use_state(cx, Filter::default);

    let filter_todos = todos.read()
        .iter()
        .filter(|(_, todo)| match filter.get() {
            Filter::All => true,
            Filter::Active => !todo.completed,
            Filter::Completed => todo.completed,
        })
        .map(|(id, todo)| *id)
        .collect::<Vec<u32>>();
    info!("todos {:#?}",todos.read());
    cx.render(rsx!(
            section { class: "todoapp",
            style { include_str!("./asserts/tomvc.css")},
            header {
                class:"header",
                h1 {"todos"}
                todo_input{
                    
                }
                section {
                    ul{
                        class:"todo-list",
                        filter_todos.iter().map(|id|{
                            rsx!(
                                todo_item{}
                            )
                        }),
                    }
                }
                todo_filter{}
            }
        }
    ))
}

todo_input.rs

use std::ops::Add;

use dioxus::{html::input_data::keyboard_types::Key, prelude::*};

use fermi::use_atom_ref;
use tracing::info;

use crate::{Todos, FERMI_TODOS};

#[inline_props]
pub fn todo_input(cx: Scope) -> Element {
    let draft = use_state(cx, String::new);

    let todos = use_atom_ref(cx, &FERMI_TODOS);
    let id = todos.read().len() as u32;

    cx.render(rsx!(input {
        class: "new-todo",
        placeholder: "whats needs to be done?",
        autofocus: true,
        value: "{draft}",
        oninput: move |evt| {
            draft.set(evt.value.clone());
        },
        onkeydown: move |evt| {
            if evt.key() == Key::Enter {
                todos.write().insert(
                    id,
                    crate::TodoItem {
                        id: id,
                        title: draft.get().clone(),
                        completed: false,
                    },
                );
                draft.make_mut().clear();
            }
        }
    }))
}

3.use_shared_state

使用该钩子函数也能实现上面fermi全局状态管理

其实跟vue inject&provider 或者react context差不多

1. 定义数据结构
2. 定义获取方法
3. 在上层传入

#![allow(non_snake_case)]
#![allow(unused)]
use dioxus::{
    html::{input_data::keyboard_types::Key, p},
    prelude::*,
};
use fermi::{use_atom_ref, use_init_atom_root, Atom, AtomRef, AtomRoot, AtomState};
use std::{
    collections::BTreeMap,
    rc::Rc,
    sync::{atomic::AtomicU32, Arc, Mutex},
};
use tracing::info;
mod components;
use components::{todo_filter, todo_input, todo_item};

#[derive(Debug, Clone, PartialEq)]
pub struct TodoItem {
    id: u32,
    title: String,
    completed: bool,
}

pub type Todos = BTreeMap<u32, TodoItem>;

#[derive(Debug, Clone, PartialEq)]
pub enum Filter {
    All,
    Active,
    Completed,
}

impl Filter {
    pub fn default() -> Self {
        Self::All
    }
}

static FERMI_TODOS: AtomRef<Todos> = AtomRef(|_| Todos::default());

#[derive(Debug, Clone, PartialEq)]
pub struct MyTodo{
    data:BTreeMap<u32,TodoItem>
}

pub fn use_my_todo(cx:&ScopeState)->&UseSharedState<MyTodo>{
    use_shared_state::<MyTodo>(cx).expect("没有传入todo")
}

pub fn App(cx: Scope) -> Element {
    //use_init_atom_root(cx);
    //let todos = use_atom_ref(cx, &FERMI_TODOS);
    let filter = use_state(cx, Filter::default);

    use_shared_state_provider(cx, ||MyTodo{data:BTreeMap::default()});
    let todos=use_my_todo(cx).read();
    let filter_todos = todos.data
        .iter()
        .filter(|(_, todo)| match filter.get() {
            Filter::All => true,
            Filter::Active => !todo.completed,
            Filter::Completed => todo.completed,
        })
        .map(|(id, todo)| *id)
        .collect::<Vec<u32>>();
    info!("todos {:#?}", todos.data);
    cx.render(rsx!(
            section { class: "todoapp",
            style { include_str!("./asserts/tomvc.css")},
            header {
                class:"header",
                h1 {"todos"}
                todo_input{

                }
                section {
                    ul{
                        class:"todo-list",
                        filter_todos.iter().map(|id|{
                            rsx!(
                                todo_item{
                                    id:*id
                                }
                            )
                        }),
                    }
                }
                todo_filter{}
            }
        }
    ))
}

4.使用local storage

安装依赖web-sys

cargo add web-sys --features Location/Storage

可以使用deref和derefMut简化操作

核心目的是使用类似于指针解引用的方式来访问和修改items字段，而不需要显式地调用items字段。

这段代码实现了两个trait：Deref和DerefMut，用于对Todos结构体进行解引用操作。 首先，impl Deref for Todos实现了Deref trait，指定了关联类型Target为HashMap<u32, TodoItem>。然后，实现了deref方法，该方法返回了self.items的不可变引用，即返回了&self.items。 接着，impl DerefMut for Todos实现了DerefMut trait。然后，实现了deref_mut方法，该方法返回了self.items的可变引用，即返回了&mut self.items。 这段代码的作用是让Todos结构体可以像HashMap一样进行解引用操作，方便对items字段进行读取和修改。

const TODOS_KEY: &str = "todos";
pub fn get_store() -> Storage {
    let window = web_sys::window().unwrap();
    window
        .local_storage()
        .unwrap()
        .expect("user did not allow local storage")
}

#[derive(Debug, PartialEq, Eq, Clone, Serialize, Deserialize)]
pub struct Todos {
    items: HashMap<u32, TodoItem>,
}
impl Default for Todos {
    fn default() -> Self {
        let store = get_store();
        let todos: Todos = if let Ok(Some(todos)) = store.get_item(TODOS_KEY) {
            serde_json::from_str(&todos).unwrap()
        } else {
            Self {
                items: HashMap::default(),
            }
        };
        todos
    }
}
//可以使用Deref 和 DerefMut来简化读取，不用在了
impl Deref for Todos{
    type Target=HashMap<u32,TodoItem>;

    fn deref(&self) -> &Self::Target {
        &self.items
    }
}

impl DerefMut for Todos{
    fn deref_mut(&mut self) -> &mut Self::Target{
        &mut self.items
    }
}

5.同时编译到web和desktop

想要一套代码同时编译到两个平台，要考虑到平台之间的差异性，然后编写适配代码

可以使用rust features来实现条件编译

可以参考条件编译 Features - Rust语言圣经(Rust Course)

[package]
name = "rust-dioxus"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
dioxus = "0.4.0"
dioxus-desktop = { version = "0.4.0", optional = true }
dioxus-web = {version = "0.4.0",optional = true}
fermi = "0.4.0"
serde = { version = "1.0.180", features = ["derive"] }
serde_json = "1.0.104"
tracing = "0.1.37"
tracing-subscriber = { version = "0.3.17", optional = true }
tracing-wasm = {version="0.2.1",optional = true}
web-sys = {version = "0.3.64",features = ["Storage","Location"],optional = true}

[features]
default=["desktop"]
web=["dioxus-web", "tracing-wasm", "web-sys"]
desktop=["dioxus-desktop","tracing-subscriber"]

Lib 文件中是通用逻辑，主要都是UI相关的，然后本地存储下，desktop使用文件系统，web使用local storage

lib.rs

#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_elements::input_data::keyboard_types::Key;
use serde::{Deserialize, Serialize};
use std::{
    collections::HashMap,
    ops::{Deref, DerefMut},
};


pub mod platform;
use platform::{Store,get_store};

#[derive(PartialEq, Eq, Clone, Copy)]
pub enum FilterState {
    All,
    Active,
    Completed,
}



#[derive(Debug, PartialEq, Eq, Clone, Serialize, Deserialize)]
pub struct TodoItem {
    pub id: u32,
    pub checked: bool,
    pub contents: String,
}

#[derive(Debug, PartialEq, Eq, Clone, Serialize, Deserialize)]
pub struct Todos {
    items: HashMap<u32, TodoItem>,
    next_id:u32,
}
impl Default for Todos {
    fn default() -> Self {
        let store = get_store();
        store.get()
    }
}
//可以使用Deref 和 DerefMut来简化读取，不用在了
impl Deref for Todos {
    type Target = HashMap<u32, TodoItem>;

    fn deref(&self) -> &Self::Target {
        &self.items
    }
}

impl DerefMut for Todos {
    fn deref_mut(&mut self) -> &mut Self::Target {
        &mut self.items
    }
}

impl Todos {
    pub fn save(&self) {
        let store = get_store();
        store
            .set( &self)
    }
}

pub fn App(cx: Scope<()>) -> Element {
    let todos = use_state(cx, Todos::default);
    let filter = use_state(cx, FilterState::default);
    let draft = use_state(cx, || "".to_string());
    let todo_id=todos.get().next_id;
    // Filter the todos based on the filter state
    let mut filtered_todos = todos
        .iter()
        .filter(|(_, item)| match **filter {
            FilterState::All => true,
            FilterState::Active => !item.checked,
            FilterState::Completed => item.checked,
        })
        .map(|f| *f.0)
        .collect::<Vec<_>>();
    filtered_todos.sort_unstable();

    let active_todo_count = todos.values().filter(|item| !item.checked).count();
    let active_todo_text = match active_todo_count {
        1 => "item",
        _ => "items",
    };

    let show_clear_completed = todos.values().any(|todo| todo.checked);

    let selected = |state| {
        if *filter == state {
            "selected"
        } else {
            "false"
        }
    };

    cx.render(rsx! {
        section { class: "todoapp",
            style { include_str!("./asserts/tomvc.css") }
            header { class: "header",
                h1 {"todos"}
                input {
                    class: "new-todo",
                    placeholder: "What needs to be done?",
                    value: "{draft}",
                    autofocus: "true",
                    oninput: move |evt| {
                        draft.set(evt.value.clone());
                    },
                    onkeydown: move |evt| {
                        if evt.key() == Key::Enter && !draft.is_empty() {
                            todos.make_mut().insert(
                                todo_id,
                                TodoItem {
                                    id: todo_id,
                                    checked: false,
                                    contents: draft.to_string(),
                                },
                            );
                            todos.make_mut().next_id+=1;
                            todos.save();
                            draft.set("".to_string());
                        }
                    }
                }
            }
            section {
                class: "main",
                if !todos.is_empty() {
                    rsx! {
                        input {
                            id: "toggle-all",
                            class: "toggle-all",
                            r#type: "checkbox",
                            onchange: move |_| {
                                let check = active_todo_count != 0;
                                for (_, item) in todos.make_mut().iter_mut() {
                                    item.checked = check;
                                }
                                todos.save();
                            },
                            checked: if active_todo_count == 0 { "true" } else { "false" },
                        }
                        label { r#for: "toggle-all" }
                    }
                }
                ul { class: "todo-list",
                    filtered_todos.iter().map(|id| rsx!(TodoEntry {
                        key: "{id}",
                        id: *id,
                        todos: todos,
                    }))
                }
                (!todos.is_empty()).then(|| rsx!(
                    footer { class: "footer",
                        span { class: "todo-count",
                            strong {"{active_todo_count} "}
                            span {"{active_todo_text} left"}
                        }
                        ul { class: "filters",
                            for (state, state_text, url) in [
                                (FilterState::All, "All", "#/"),
                                (FilterState::Active, "Active", "#/active"),
                                (FilterState::Completed, "Completed", "#/completed"),
                            ] {
                                li {
                                    a {
                                        href: url,
                                        class: selected(state),
                                        onclick: move |_| filter.set(state),
                                        prevent_default: "onclick",
                                        state_text
                                    }
                                }
                            }
                        }
                        show_clear_completed.then(|| rsx!(
                            button {
                                class: "clear-completed",
                                onclick: move |_| {
                                    todos.make_mut().retain(|_, todo| !todo.checked);
                                    todos.save();
                                },
                                "Clear completed"
                            }
                        ))
                    }
                ))
            }
        }
        footer { class: "info",
            p { "Double-click to edit a todo" }
            p { "Created by ", a { href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }}
            p { "Part of ", a { href: "http://todomvc.com", "TodoMVC" }}
        }
    })
}

#[derive(Props)]
pub struct TodoEntryProps<'a> {
    todos: &'a UseState<Todos>,
    id: u32,
}

pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
    let is_editing = use_state(cx, || false);

    let todos = cx.props.todos.get();
    let todo = &todos[&cx.props.id];
    let completed = if todo.checked { "completed" } else { "" };
    let editing = if **is_editing { "editing" } else { "" };

    cx.render(rsx!{
        li {
            class: "{completed} {editing}",
            div { class: "view",
                input {
                    class: "toggle",
                    r#type: "checkbox",
                    id: "cbg-{todo.id}",
                    checked: "{todo.checked}",
                    oninput: move |evt| {
                        cx.props.todos.make_mut().get_mut(&cx.props.id).unwrap().checked = evt.value.parse().unwrap();
                        todos.save();
                    }
                }
                label {
                    r#for: "cbg-{todo.id}",
                    ondblclick: move |_| is_editing.set(true),
                    prevent_default: "onclick",
                    "{todo.contents}"
                }
                button {
                    class: "destroy",
                    onclick: move |_| { cx.props.todos.make_mut().remove(&todo.id);todos.save(); },
                    prevent_default: "onclick",
                }
            }
            is_editing.then(|| rsx!{
                input {
                    class: "edit",
                    value: "{todo.contents}",
                    oninput: move |evt|{ 
                            cx.props.todos.make_mut().get_mut(&cx.props.id).unwrap().contents = evt.value.clone();
                            todos.save(); 
                        },
                    autofocus: "true",
                    onfocusout: move |_| is_editing.set(false),

                    onkeydown: move |evt| {
                        match evt.key() {
                            Key::Enter | Key::Escape | Key::Tab => is_editing.set(false),
                            _ => {}
                        }
                    },
                }
            })
        }
    })
}

platform适配

在mod.rs 中定义一些接口也就是trait，然后让不同的平台去实现具体的逻辑

platform/mod.rs

use crate::{FilterState, Todos};

#[cfg(feature = "desktop")]
pub mod desktop;
#[cfg(feature = "web")]
pub mod web;

pub trait Store {
    fn get(&self) -> Todos;
    fn set(&self, item: &Todos);
}

#[cfg(feature = "web")]
pub use web::get_store;

#[cfg(feature = "desktop")]
pub use desktop::get_store;

#[cfg(feature = "web")]
impl Default for FilterState {
    fn default() -> Self {
        let url = web_sys::window().unwrap().location().hash().unwrap();
        match url.as_str() {
            "#/active" => FilterState::Active,
            "#/completed" => FilterState::Completed,
            _ => FilterState::All,
        }
    }
}

#[cfg(not(feature = "web"))]
impl Default for FilterState {
    fn default() -> Self {
        FilterState::All
    }
}

web.rs

使用大量default trait和deref,derefMut trait来简化操作

#![cfg(feature="web")]

use std::ops::Deref;
use web_sys::Storage;
use super::Store;

const TODOS_KEY: &str = "todos";

pub struct LocalStorage(Storage);

impl Deref for LocalStorage{
    type Target=Storage;
    fn deref(&self)->&Self::Target{
        &self.0
    }
}


impl Default for LocalStorage {
    fn default() -> Self {
        let window = web_sys::window().unwrap();
        Self(
            window
                .local_storage()
                .unwrap()
                .expect("user did not allow local storage"),
        )
    }
}

impl Store for LocalStorage {
    fn get(&self)->crate::Todos {
        if let Ok(Some(value)) = self.0.get(TODOS_KEY) {
            serde_json::from_str(&value).unwrap()
        }else{
            Default::default()
        }
    }

    fn set(&self,item:&crate::Todos) {
        let content=serde_json::to_string(&item).unwrap();
        self.0.set_item(TODOS_KEY, &content).unwrap();
    }
}



pub fn get_store() -> impl Store {
    LocalStorage::default()
}

desktop.rs

#![cfg(feature = "desktop")]

use crate::Todos;
use std::collections::HashMap;
use std::io::prelude::*;
use std::{env, fs::File, path::PathBuf};
use tracing::info;

use super::Store;

const TODO_FILE: &str = "todo.json";

pub struct FileStore {
    path: PathBuf,
}

impl Default for FileStore {
    fn default() -> Self {
        let path = env::current_dir().unwrap().join(TODO_FILE);
        info!("desktop FileStore path: {:?}", path);
        Self { path }
    }
}

impl Store for FileStore {
    fn get(&self) -> crate::Todos {
        if let Ok(mut file) = File::open(&self.path) {
            let mut content = String::new();
            file.read_to_string(&mut content).unwrap();
            if content.is_empty() {
                return Todos {
                    items: HashMap::new(),
                    next_id: 0,
                };
            }
            serde_json::from_str(&content).unwrap()
        } else {
            File::create(&self.path).unwrap();
            return Todos {
                items: HashMap::new(),
                next_id: 0,
            };
        }
    }

    fn set(&self, item: &crate::Todos) {
        let content = serde_json::to_string(&item).unwrap();
        let mut file = File::create(&self.path).unwrap();
        file.write_all(content.as_bytes()).unwrap();
    }
}

pub fn get_store() -> impl Store {
    FileStore::default()
}

6.打包

1.下载官方cli

cargo install dioxus-cli

2.打包到web

dx build

3.打包到desktop

dx bundle

7.可以同时运行两个端

同时安装dioxin-cli 和trunk

让应用程序默认feature为desktop

dx serve --platform desktop
trunk serve --no-default-features --features web

这样可以同时编译运行两个端

总结

rust wasm 总的来说是一种不错的方案，它的工具链齐全，编写起来也很舒适，而且不管是all in wasm还是部分模块使用wasm都有优秀的案例。但是dioxus总的来说还是没有前端生态那么好，很多UI库没有不能像react和vue那样快速开发。

如果要使用wasm进行高性能计算，使用wasm-bindgin是一种不错的方案，但是需要解决数据传输问题，目前作者还在探索中，后续会继续更新。

如果觉得不错的话请点个赞吧！赞是免费的，但它会给我继续探索更新的动力！谢谢