Blazor Hybrid 实战体验：那些你可能没预料到的坑没预料到的坑

技术分享 2个月前 (10-12) 0 999+

前言

昨天写了一篇介绍 Blazor Hybrid 技术的文章，但限于篇幅，一些问题未能深入探讨。今天，我想继续记录使用 Blazor Hybrid 过程中遇到的几个问题，以及这个技术目前的一些局限性。

文件拖放事件的局限

Blazor Hybrid 的运行环境是 WebView，这导致了在处理文件拖放时出现了一些限制。在传统桌面应用中（如 WinForms 或 WPF），开发者可以直接捕获拖放事件，并获得文件的完整路径。但在 Blazor 中，拖放事件只能像浏览器中一样处理，意味着我们只能获得上传文件的流，而无法获取文件的实际路径。

这对于那些需要直接访问文件路径的功能（如Clipify中把视频拖进去处理）带来了很大的不便。

冗余代码（不是）

看了项目代码的同学可能会发现，FormMain.cs里还有处理拖放事件的代码，不过实际上并没有生效。

// 处理拖动进入事件，检测是否为文件 private void blazorWebView1_DragEnter(object sender, DragEventArgs e) {   Console.WriteLine("drag enter");   if (e.Data.GetDataPresent(DataFormats.FileDrop)) {     // 改变鼠标图标，表示可以拖放     e.Effect = DragDropEffects.Copy;   }   else {     e.Effect = DragDropEffects.None;   } }  // 处理拖放事件，获取文件路径 private void blazorWebView1_DragDrop(object sender, DragEventArgs e) {   Console.WriteLine("drag drop");   if (e.Data.GetDataPresent(DataFormats.FileDrop)) {     var files = (string[]?)e.Data.GetData(DataFormats.FileDrop);      // 这里只处理单个文件，当然你也可以处理多个文件     if (files?.Length > 0) {       var filePath = files[0]; // 获取拖放的文件路径       MessageBox.Show($"文件路径: {filePath}");        // 在这里你可以将文件路径传递给 Blazor 或其他处理逻辑     }   } }  // 处理 DragOver 事件，防止系统默认行为 private void blazorWebView1_DragOver(object sender, DragEventArgs e) {   if (e.Data.GetDataPresent(DataFormats.FileDrop)) {     e.Effect = DragDropEffects.Copy; // 明确允许拖放文件   }   else {     e.Effect = DragDropEffects.None;   } }

解决方案

目前的解决办法有限，根据查找到的资料和我自己的探索，有以下几种：

在需要拖放的时候，使用一个WinForms原生控件覆盖webview
使用hook技术，拦截webview的拖放事件
重写微软提个的这个 Blazor Webview 控件，自己实现 WndProc 方法

第3种方法的代码大概是这样（未验证）

public class CustomBlazorWebView : BlazorWebView {   protected override void WndProc(ref Message m) {     const int WM_DROPFILES = 0x233; // 拖放文件消息      if (m.Msg == WM_DROPFILES) {       // 处理文件拖放逻辑       // 你可以在这里调用你的拖放事件处理逻辑        // 阻止消息传递，避免系统默认处理文件       return;     }      base.WndProc(ref m);   } }