WEBVIEW2 WPF VUE

### WPF中使用WebView2与Vue.js集成 为了在WPF应用程序中成功集成了Vue.js前端框架，需要按照特定流程设置环境和编写代码。首先，在开发环境中安装WebView2 Runtime是必要的前置条件[^1]。 #### 创建WPF项目并配置WebView2控件 创建一个新的WPF项目之后，需向项目的XAML文件添加WebView2控件的支持命名空间： ```xml <Window x:Class="YourNamespace.MainWindow" ... xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"> <Grid> <!-- WebView2 控件 --> <wv2:WebView2 Name="webView"/> </Grid> </Window> ``` 此部分定义了用于显示Web内容的区域，并允许后续加载由Vue驱动的应用程序界面[^4]。 #### 配置Vue应用并与C#交互 为了让Vue应用能够运行于WebView2容器内，通常做法是在本地服务器环境下启动该应用或将编译后的静态资源部署至可访问路径下。接着通过`Source`属性指定要加载的目标URL给WebView2实例。 对于希望实现的功能——即从Vue端触发动作来改变背景颜色为例，则可以在Vue组件内部这样处理事件响应逻辑： ```html <template> <div> <button @click="changeBackgroundColor">Change Background Color</button> </div> </template> <script> export default { methods: { async changeBackgroundColor() { await window.chrome.webview.hostObjects.CSharp.SetBackgroundColor('#FF0000'); } } } </script> ``` 上述代码片段展示了如何利用JavaScript桥接机制让Vue中的方法可以直接调用宿主进程里的.NET成员函数[^2]。 最后一步涉及到了后台服务层面上的工作，也就是确保存在相应的C#接口供前端调用。这可以通过注册对象和服务提供者完成初始化过程的一部分，从而建立起完整的双向通信链路。 ```csharp using Microsoft.Web.WebView2.Core; // ... public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); webView.NavigationCompleted += (sender, args) => { var cSharpObject = new CSharpHostObject(webView); webView.CoreWebView2.PostAsync("registerHostObject", JsonSerializer.Serialize(cSharpObject)); }; } private class CSharpHostObject { private readonly WebView2 _webview; public CSharpHostObject(WebView2 webview) { _webview = webview; } public void SetBackgroundColor(string color) { Dispatcher.Invoke(() => this._webview.Background = Brushes.Red); // 这里简化为固定红色 } } } ``` 这段C#代码实现了当导航完成后自动注册一个可供JS侧调用的对象实例；而`SetBackgroundColor`方法则负责实际修改窗口背景的任务。