[记]egui使用wasm至浏览器中运行

使用eframe框架可以很方便的创建native应用或者是web应用；

可以参照模板 eframe_template ;

拉取代码后可以直接指令 cargo run 编译运行，如下；

 

 

hint

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

fn main() -> eframe::Result<()> {

    // Log to stdout (if you run with `RUST_LOG=debug`).

    tracing_subscriber::fmt::init();

 

    let native_options = eframe::NativeOptions::default();

    eframe::run_native(

        "eframe template",

        native_options,

        Box::new(|cc| Box::new(eframe_template::TemplateApp::new(cc))),

    )

}

 

// when compiling to web using trunk.

#[cfg(target_arch = "wasm32")]

fn main() {

    // Make sure panics are logged using `console.error`.

    console_error_panic_hook::set_once();

 

    // Redirect tracing to console.log and friends:

    tracing_wasm::set_as_global_default();

 

    let web_options = eframe::WebOptions::default();

 

    wasm_bindgen_futures::spawn_local(async {

        eframe::start_web(

            "the_canvas_id", // hardcode it

            web_options,

            Box::new(|cc| Box::new(eframe_template::TemplateApp::new(cc))),

        )

        .await

        .expect("failed to start eframe");

    });

}

条件编译区分wasm32和native本机，根据编译目标不同执行不同的代码；

默认编译目标为本机平台；

 

 

执行指令 rustup target list查看所有支持的平台；

当需要编译为wasm到浏览器中运行时，需添加编译器wasm32-unknown-unknown

执行命令rustup target add wasm32-unknown-unknown 进行添加；

此时就需要 Trunk 来进行编译；

通过cargo install --locked trunk 指令来编译安装trunk工具；

执行指令trunk server 编译并执行程序http://127.0.0.1:8080 ，如下；

trunk serve --port=8899