webassembly 相关问题

MudBlazor 主题颜色在页面刷新时发生变化

我正在使用 MudBlazor 构建 Blazor WASM 应用程序，并且我正在使用浅色和深色模式的自定义主题。 主题提供程序位于 MainLayout.razor 文件中： 我正在使用 MudBlazor 构建 Blazor WASM 应用程序，并且我正在使用浅色和深色模式的自定义主题。 主题提供程序位于MainLayout.razor文件中： <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /> _isDarkMode字段首先初始化为null： private MudTheme? _theme = null; 但是他们在OnInitialized()中获得了一个实例： protected async override void OnInitialized() { base.OnInitialized(); _theme = new() { PaletteLight = _lightPalette, PaletteDark = _darkPalette, LayoutProperties = new LayoutProperties() }; } 主题在同一文件的下部定义： private readonly PaletteLight _lightPalette = new() { Black = "#110e2d", AppbarText = "#424242", AppbarBackground = "rgba(255,255,255,0.8)", DrawerBackground = "#ffffff", GrayLight = "#e8e8e8", GrayLighter = "#f9f9f9", }; private readonly PaletteDark _darkPalette = new() { Primary = "#7e6fff", Surface = "#1e1e2d", Background = "#1a1a27", BackgroundGray = "#151521", AppbarText = "#92929f", AppbarBackground = "rgba(26,26,39,0.8)", DrawerBackground = "#1a1a27", ActionDefault = "#74718e", ActionDisabled = "#9999994d", ActionDisabledBackground = "#605f6d4d", TextPrimary = "#b2b0bf", TextSecondary = "#92929f", TextDisabled = "#ffffff33", DrawerIcon = "#92929f", DrawerText = "#92929f", GrayLight = "#2a2833", GrayLighter = "#1e1e2d", Info = "#4a86ff", Success = "#3dcb6c", Warning = "#ffb545", Error = "#ff3f5f", LinesDefault = "#33323e", TableLines = "#33323e", Divider = "#292838", OverlayLight = "#1e1e2d80", }; 问题是，当我刷新任何页面时，颜色会由于某种原因发生变化。模式（深色/浅色）保持不变，但深色模式下颜色更亮一些。就像它们被重置为某些默认值一样。 我想要的颜色： 浏览器刷新后得到的颜色： 如果我现在打开汉堡菜单或将模式切换为浅色，然后再切换回深色，颜色就会得到纠正。 我做错了什么，刷新后颜色不正确？ 分析模板中的代码，发现每次刷新页面时，_isDarkMode始终是true。这就是根本原因。 我们可以将_isDarkMode的值存储在localStorage或者其他地方，并在刷新页面加载所选主题时加载。 测试中发现的问题是StateHasChanged();会导致页面加载并且主题会在一段时间后发生变化，因为预加载的主题仍然是 DarkMode。 这是给您的样本。 @inherits LayoutComponentBase @inject IJSRuntime JS <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /> <MudPopoverProvider /> <MudDialogProvider /> <MudSnackbarProvider /> <MudLayout> <MudAppBar Elevation="1"> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /> <MudText Typo="Typo.h5" Class="ml-3">Application</MudText> <MudSpacer /> <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" /> <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /> </MudAppBar> <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"> <NavMenu /> </MudDrawer> <MudMainContent Class="mt-16 pa-4"> @Body </MudMainContent> </MudLayout> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> @code { private bool _drawerOpen = true; private bool _isDarkMode = true; private MudTheme? _theme = null; private bool _initialized = false; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var savedDarkMode = await JS.InvokeAsync<string>("localStorage.getItem", "isDarkMode"); if (!string.IsNullOrEmpty(savedDarkMode)) { _isDarkMode = bool.Parse(savedDarkMode); StateHasChanged(); } _theme = new MudTheme { PaletteLight = _lightPalette, PaletteDark = _darkPalette, LayoutProperties = new LayoutProperties() }; _initialized = true; StateHasChanged(); } } private void DrawerToggle() { _drawerOpen = !_drawerOpen; } private async Task DarkModeToggle() { _isDarkMode = !_isDarkMode; await JS.InvokeVoidAsync("localStorage.setItem", "isDarkMode", _isDarkMode.ToString().ToLower()); } private readonly PaletteLight _lightPalette = new() { Black = "#110e2d", AppbarText = "#424242", AppbarBackground = "rgba(255,255,255,0.8)", DrawerBackground = "#ffffff", GrayLight = "#e8e8e8", GrayLighter = "#f9f9f9", }; private readonly PaletteDark _darkPalette = new() { Primary = "#7e6fff", Surface = "#1e1e2d", Background = "#1a1a27", BackgroundGray = "#151521", AppbarText = "#92929f", AppbarBackground = "rgba(26,26,39,0.8)", DrawerBackground = "#1a1a27", ActionDefault = "#74718e", ActionDisabled = "#9999994d", ActionDisabledBackground = "#605f6d4d", TextPrimary = "#b2b0bf", TextSecondary = "#92929f", TextDisabled = "#ffffff33", DrawerIcon = "#92929f", DrawerText = "#92929f", GrayLight = "#2a2833", GrayLighter = "#1e1e2d", Info = "#4a86ff", Success = "#3dcb6c", Warning = "#ffb545", Error = "#ff3f5f", LinesDefault = "#33323e", TableLines = "#33323e", Divider = "#292838", OverlayLight = "#1e1e2d80", }; public string DarkLightModeButtonIcon => _isDarkMode switch { true => Icons.Material.Rounded.AutoMode, false => Icons.Material.Outlined.DarkMode, }; }

如何在iOS中使用wasmer？

Wasmer 是一个跨平台 WebAssembly 运行时。我想在IOS平台上运行wsam。官方文档没有教程，网上也找不到demo

Rust WASM 代码在等待 web_sys::Window.fetch_with_request 时停止

我正在尝试在 Rust WASM 代码中使用 web_sys 来使用 Fetch API。我定义了一个异步函数： #[wasm_bindgen] pub async fn fetch_as_vec_u8(resource_name: &str) -> 结果 我正在尝试在 Rust WASM 代码中使用 web_sys 来使用 Fetch API。我定义了一个异步函数： #[wasm_bindgen] pub async fn fetch_as_vec_u8(resource_name: &str) -> Result<Vec<u8>, JsValue> { let opts = RequestInit::new(); opts.set_method("GET"); opts.set_mode(RequestMode::Cors); let request = Request::new_with_str_and_init(resource_name, &opts)?; request.headers().set("Accept", "application/octet-stream")?; let window = web_sys::window().unwrap(); let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?; assert!(resp_value.is_instance_of::<Response>()); let resp: Response = resp_value.dyn_into().unwrap(); let array_buf = JsFuture::from(resp.array_buffer()?).await?; assert!(array_buf.is_instance_of::<ArrayBuffer>()); let typebuf: js_sys::Uint8Array = js_sys::Uint8Array::new(&array_buf); let mut body = vec![0; typebuf.length() as usize]; typebuf.copy_to(&mut body[..]); Ok(body) } 从同步代码中调用函数，如下所示： let vert_shader_src_bytes: Vec<u8> = block_on(fetch_as_vec_u8( format!("http://localhost:8080/shaders/{}.vert.glsl", shader_name).as_str(), )) .expect(format!("Failed to fetch {}.vert.glsl", shader_name).as_str()); 这不起作用，并且在浏览器中执行代码只是挂起，没有任何控制台输出。预期的 GET 请求未发送。 调试fetch_as_vec_u8显示是以下行停止了： let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?; 请求的资源存在，可以从本地URL下载。以上fetch实现是基于官方示例。 不幸的是，我被困住了。谁能给我指出挖掘的方向吗？ 预先感谢！ 您似乎正在使用 block_on 函数来阻止当前线程，直到您的 future 完成。然而，在几乎所有情况下，Rust/WebAssembly 都受到单线程 JavaScript 事件循环的影响。为了将来能够完成，（浏览器/JavaScript 引擎的）事件处理和（Rust 的）async运行时代码必须在其他地方运行，但没有另一个线程同时允许这样做。 我在制作 WebAssembly 游戏时使用的一个解决方案是使用 future_to_promise 在加载完成后调度代码： struct Loaded { glsl: Option<String>, } static LOADED: Mutex<Option<Loaded>> = Mutex::new(None); #[wasm_bindgen] fn load() -> Promise { // If we didn't return the promise, it would still complete, but then // we'd have to tell JavaScript to call `init` some other way. wasm_bindgen_futures::future_to_promise(async move { let vert_shader_src_bytes: Vec<u8> = fetch_as_vec_u8( format!("http://localhost:8080/shaders/{}.vert.glsl", shader_name).as_str(), )).await.expect(format!("Failed to fetch {}.vert.glsl", shader_name).as_str()); // Either the rest of your app goes here or you need to // mutate global (static) state so that subsequent // synchronous JavaScript -> WebAssembly function calls // can access what was loaded. // Here we do the latter: LOADED.lock().unwrap().glsl = Some(Loaded{ glsl: String::from_utf8(glsl) }); Ok(JsValue::undefined()) }) } #[wasm_bindgen] fn init() { let loaded = LOADED.lock().unwrap(); init_rendering(&loaded.glsl); } JavaScript 可能会这样做： wasm.load().await; wasm.init(); // etc. requestAnimationFrame(() => { wasm.frame(); });

emcc / emscripten 的 Twiggy 命令行选项可获取有意义的数据

我正在使用 Rust Wasm 工具链中的 Twiggy 来分析 WebAssembly 包，以找到代码大小的最大贡献者。 命令行选项 twiggy top -n 20 myWasm.wasm 产生表输出...

如何在浏览器中将 .wat 文本转换为 .wasm 二进制文件

令人惊讶的是，wabt 在底层依赖于 fs，这显然在浏览器中不可用。 我正在开发一个在线编译器，它将源代码转换为 WAT，因此预编译在

WebAssembly 导出函数：无法读取未定义的属性

我正在尝试在我的JavaScript应用程序的WebWorker模块上运行lightningcss。 我将其作为模块导入，如下所示： 从'./index.mjs'导入*作为lightningcss； 并尝试使用该函数作为

DUCKDB - 具有 Utf-8 返回类型的 WASM 标量 UDF 无法按预期工作

在我的项目中，我正在使用duckdb wasm。我遇到了对自定义用户定义函数 (UDF) 的需求，因此我创建了一个返回类型为 UTF-8 的函数。但是，它始终返回 \u0000。 // ...

Blazor 并将 @ref 传递给组件

我的组件有问题，当我分配 @ref="longList Component" 时会出现错误，否则没有 @ref 一切正常。我收到错误，但在这种情况下我不知道是什么......

FluentUI 对话框和 FluentStack 未水平显示

我对 Blazor 和 FluentUI 非常陌生（对 Desktop 和 WPF 更加熟悉）。例如，我正在使用 FluentUI 组件尝试设计登录对话框。对话框正确打开，但...

如何延迟 Razor 应用程序加载时间以进行调试？

我正在开发一个WASM应用程序，我现在专门在加载页面上工作，即index.html中的这一部分： 我正在开发一个WASM应用程序，我现在专门在加载页面上工作，即index.html中的这一部分： <body> <div class="dark loading-section" id="app"> <div class="loading-content"> </div> </div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.webview.js" autostart="false"></script> </body> 现在出于调试目的，我想看看加载时到底发生了什么，但不必重新启动应用程序。我知道我可以将代码复制粘贴到我的主页上，但如果可能的话，我想简单地延迟加载并在本部分上工作。 -> 有没有办法在 blazor 应用程序中手动延迟加载时间？ 1. Delay the Blazor startup: 您可以修改 index.html 文件并在 Blazor 开始执行之前添加手动延迟，方法是使用 JavaScript 的 setTimeout 函数来延迟对 Blazor.start() 的调用。 2. Modify the index.html: 您可以手动控制启动时间，而不是让 Blazor 自动启动，如下所示： <body> <div class="dark loading-section" id="app"> <div class="loading-content"> <!-- You can add more specific debug elements here if necessary --> <p>Loading...</p> </div> </div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.webassembly.js" autostart="false"></script> <script> // Add a manual delay before starting Blazor (e.g., 3 seconds) setTimeout(function () { Blazor.start(); }, 3000); // Delay for 3000 ms (3 seconds) </script> </body>

Blazor 的 QR 码读取器扫描仪（WebAssembly 客户端）

正在寻找一种从 Blazor（客户端 WebAssembly）访问相机/网络摄像头的方法，以创建 QR 码阅读器。有什么建议吗？ 我用谷歌搜索并在 github 中查找了 blazor 的二维码扫描仪，但是......

ASP.NET Core Web API - Blazor WASM - 一段时间后发生 CORS 错误

我有 ASP.NET Core 8 Web API 和 .NET 8 上的 Blazor Wasm。 在 API 中，程序如下所示。 builder.Services.AddCors（选项=> { options.AddDefaultPolicy(policy =>{policy.

链接 c 可执行文件时，用 wam-ld 链接文件时出错

我正在尝试将 librdkafka 编译成 wasm 二进制文件。我执行了以下命令，但在第二行，wasm-ld 找不到 pthread 相关符号。 emcmake cmake -H. -B_cmake_build cmake --构建

有没有办法检查 wasm 模块的导入情况

让我解释一下我在做什么。我有一个应用程序，我正在嵌入 wasm 引擎（特别是 wasmtime）并用 Rust 编写 wasm。目标不是浏览器，所以我不是...

在 Google Apps 脚本上运行 WebAssembly

我正在尝试在新的 V8 Google Apps 脚本运行时上运行 WebAssembly，它似乎受支持，但异步函数似乎在返回 Promise 后被终止。 让我们...

如何在命令行中将 Kotlin 编译为 WebAssembly？

我想在命令行中将一些 Kotlin 类和枚举编译到 WebAssembly 中。几年前它可以与 kotlinc-native 一起使用，但 wasm32 目标已被删除。我尝试使用这个例子：

使用 emscripten 预加载二进制文件无法按预期工作

我有一个二进制文件Tetris.ch8，大小为494字节。我正在尝试从我的 emscripten 项目中打开该文件。我使用 --preload-file 来加载文件。当我尝试打开文件并阅读

动态代码评估在中间件或边缘 API 路由中不可用

./node_modules\mongoose\dist rowser.umd.js Edge 运行时不允许动态代码评估（例如“eval”、“new Function”、“WebAssembly.compile”）了解更多信息：https://nextjs。 org/docs/messages/edge-

为什么我得到的 emscripten 和本机代码的整数结果不同？

在本机构建中，以下代码打印 -1。编译成WASM并在node.js中运行，打印4294967295。为什么结果不同？ #包括 int main() { 无符号 F = 2...

使用 Blazor Wasm 独立版进行 Google 身份验证

我有一个 Blazor Web Assembly“独立”应用程序，它与 Rest Web API 通信，并实现了生成 JWT 令牌的本地身份验证，一切都运行良好。我想实施...