戳人痛处

导航

统计

[记]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

 

posted on   戳人痛处  阅读(394)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示