[记]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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!