阅读 952

Rust Yew构建前端页面初体验

本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战

XDJMM,我还是那只不守妇道的花喵,听说rust还可以写前端页面,害,好奇害死了本喵,来44。

入门

可以看本喵写的Rust入门文章:【最少必要知识】Rust极速入门,听说Rust可以写前端,FEer来入门吧

项目介绍

开始

git clone --depth=1 https://github.com/SASUKE40/yew-starter.git rust-yew-miao 
复制代码

安装依赖

cargo install wasm-pack
cargo install cargo-web
npm i
复制代码

目录结构

   .
   |--Cargo.toml
   |--index.html
   |--LICENSE
   |--index.js
   |--README.md
   |--.gitignore
   |--package.json
   |--src
   |   |--lib.rs
   |   |--app.rs
复制代码

开发

npm start
# navigate to http://localhost:1234
复制代码

构建

npm build
复制代码

测试部署

可以全局安装静态服务 Serve 来启动

npm i serve -g
serve dist
# navigate to http://localhost:5000
复制代码

流程

Cargo.toml

类似npm中的package.json

[package]
name = "yew-starter"
description = "A template for starting a Yew."
version = "0.1.0"
authors = ["shilinzhu <shilinzhu@tencent.com>"]
categories = ["gui", "wasm", "web-programming"]
keywords = ["yew", "wasm", "wasm-bindgen", "web", "starter", "template"]
edition = "2018"
readme = "README.md"
repository = "https://github.com/SASUKE40/yew-starter"
license = "MIT"

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

[dependencies]
wasm-bindgen = "0.2"
yew = "0.16"
复制代码

cdylib 是用于配置构建 C interoperability(C FFI),wasm-bindgen 依赖是用于 WASM 模块和JavaScript 之间的交互粘合。

src

这啥玩意?有当年刚看vue/react的即视感

lib.rc

mod app;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn run_app() -> Result<(), JsValue> {
  yew::start_app::<app::App>();
  Ok(())
}
复制代码

app.rc

use yew::prelude::*;

pub struct App {}

pub enum Msg {}

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        App {}
    }

    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        true
    }

    fn view(&self) -> Html {
        html! {
            <p>{ "Hello world!" }</p>
        }
    }
}
复制代码

改个

            <p>{ "Hello miao!" }</p>
复制代码

热更,这个必须的

WX20210721-111559@2x.png

没毛病

#[wasm_bindgen]这玩意看着像注解

这样就可以在js中引入

import {run_app} from "./lib";
run_app();
复制代码

作者这里用 parcel-plugin-wasm.rs 插件完成 Cargo loader 的工作:

import {run_app} from './Cargo.toml';
run_app();
复制代码

这个像jsx:

html! {
    <p>{ "Hello world!" }</p>
}
复制代码

把html!换成

// 条件渲染
html! {
  <div>
    {
      if true {
        html! {
          <a href="https://example.com">{"Link"}</a>
        }
      } else {
        html! {}
      }
    }
  </div>
}
复制代码

正常渲染

WX20210721-113829@2x.png

总结

以目前js的生态,这东西很难撼动,只能说作为补充,官方也是这么定位的,比如客户端移植到 Web。更多方向我们有需要再探讨了。

更多可以了解yew

文章分类
后端
文章标签