122 lines
2.9 KiB
Markdown
122 lines
2.9 KiB
Markdown
# WebView2 入门
|
||
|
||
## 什么是 WebView2
|
||
|
||
在 Windows 桌面应用里嵌入 Chrome 内核浏览器。
|
||
|
||
```
|
||
┌─────────────────────────┐
|
||
│ WPF / WinForms │
|
||
│ ┌───────────────────┐ │
|
||
│ │ WebView2 │ │
|
||
│ │ (Chrome 内核) │ │
|
||
│ │ │ │
|
||
│ │ ┌─────────────┐ │ │
|
||
│ │ │ HTML/CSS/JS │ │ │
|
||
│ │ │ 你的界面 │ │ │
|
||
│ │ └─────────────┘ │ │
|
||
│ └───────────────────┘ │
|
||
│ │
|
||
│ C# 代码 │
|
||
└─────────────────────────┘
|
||
```
|
||
|
||
## 安装 WebView2 Runtime
|
||
|
||
下载地址：https://developer.microsoft.com/en-us/microsoft-edge/webview2/
|
||
|
||
## NuGet 包
|
||
|
||
```bash
|
||
dotnet add package Microsoft.Web.WebView2
|
||
```
|
||
|
||
## XAML 使用
|
||
|
||
```xml
|
||
<Window xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf">
|
||
<Grid>
|
||
<wv2:WebView2 x:Name="WebView"
|
||
Source="https://example.com"/>
|
||
</Grid>
|
||
</Window>
|
||
```
|
||
|
||
## 初始化
|
||
|
||
```csharp
|
||
private async void InitializeWebView()
|
||
{
|
||
await WebView.EnsureCoreWebView2Async();
|
||
Console.WriteLine("WebView2 初始化成功");
|
||
}
|
||
```
|
||
|
||
## C# 调用 JS
|
||
|
||
```csharp
|
||
// 执行 JS
|
||
await WebView.ExecuteScriptAsync("alert('Hello from C#')");
|
||
|
||
// 获取返回值
|
||
string result = await WebView.ExecuteScriptAsync("document.title");
|
||
```
|
||
|
||
## JS 调用 C#
|
||
|
||
```csharp
|
||
// C# 注册方法
|
||
WebView.CoreWebView2.WebMessageReceived += (s, e) =>
|
||
{
|
||
string message = e.TryGetWebMessageAsString();
|
||
Console.WriteLine($"收到JS消息: {message}");
|
||
};
|
||
```
|
||
|
||
```javascript
|
||
// JS 发送消息
|
||
window.chrome.webview.postMessage("Hello from JS");
|
||
```
|
||
|
||
## 常用操作
|
||
|
||
```csharp
|
||
WebView.Reload(); // 刷新
|
||
WebView.GoBack(); // 后退
|
||
WebView.GoForward(); // 前进
|
||
WebView.Navigate("https://..."); // 导航到 URL
|
||
WebView.CoreWebView2.Settings // 配置
|
||
```
|
||
|
||
## 本地 HTML
|
||
|
||
```csharp
|
||
// 加载本地 HTML 文件
|
||
string htmlPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "index.html");
|
||
WebView.CoreWebView2.Navigate(new Uri(htmlPath).AbsoluteUri);
|
||
|
||
// 或者直接加载 HTML 字符串
|
||
string html = "<h1>Hello</h1>";
|
||
WebView.NavigateToString(html);
|
||
```
|
||
|
||
## 项目里怎么用
|
||
|
||
```
|
||
无言势字幕/
|
||
├── MainWindow.xaml ← WPF 窗口，放 WebView2
|
||
├── index.html ← 你的界面（HTML/CSS/JS）
|
||
├── WebViewManager.cs ← C# 和 JS 通信
|
||
└── AsrService.cs ← 语音识别服务
|
||
```
|
||
|
||
C# 负责：
|
||
- 语音识别（Sherpa-ONNX）
|
||
- OSC 发送
|
||
- 窗口管理
|
||
|
||
HTML/JS 负责：
|
||
- 界面显示
|
||
- 动画效果
|
||
- 用户交互
|