c#与web端通信---【c#wfp项目使用webview实现和vue项目通信】

前言：c#小白一个

最近在公司有个需求实现在c#编写的fn去调用web端的一些样式和效果，本质上就是实现通信

查了好久的资料大概有个思路:

实现通信的关键在c#写的程序中内嵌一个“”内核类浏览器“”;

1首先我们需要在c#编写的语言中实现可以展示web页面

方法一：使用 CefSharp控件

1. 安装 CefSharp 包：在 Visual Studio 中打开 NuGet 包管理器，搜索并安装 CefSharp.Wpf 包。这个包包含了嵌入到 WPF 程序中的 Chromium WebKit 引擎控件。

2. 在 WPF 程序中添加一个名为 webBrowser 的 WebBrowser 控件。

3. 在 C# 中使用 CefSharp 的 ChromiumWebBrowser 类来加载 Vue 页面，并定义一个名为 SetBackgroundColor 的函数

 

using CefSharp;
using CefSharp.Wpf;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeBrowser();
        }

        private void InitializeBrowser()
        {
            CefSettings settings = new CefSettings();
            settings.CefCommandLineArgs.Add("disable-gpu", "1"); // 禁用 GPU 加速
            Cef.Initialize(settings);
            ChromiumWebBrowser browser = new ChromiumWebBrowser();
            browser.Address = "http://localhost:8080"; // Vue 页面的地址
            browser.RegisterJsObject("CSharp", new BoundObject()); // 注册 C# 对象到 JavaScript 环境中
            browser.TitleChanged += Browser_TitleChanged;
            webBrowser.Children.Add(browser);
        }

        private void Browser_TitleChanged(object sender, TitleChangedEventArgs e)
        {
            Dispatcher.Invoke(() =>
            {
                Title = e.Title;
            });
        }

        public class BoundObject
        {
            public void SetBackgroundColor(string color)
            {
                // 获取 ChromiumWebBrowser 实例
                var browser = webBrowser.Children.OfType<ChromiumWebBrowser>().FirstOrDefault();
                if (browser != null)
                {
                    browser.ExecuteScriptAsync($"document.body.style.backgroundColor = '{color}';");
                }
            }
        }
    }
}

本质上是控制window【】

vue代码：

1. 在 Vue 页面中通过 window.chrome.webview.hostObjects.CSharp 调用 C# 中的 SetBackgroundColor 方法：

<template>
  <div>
    <button @click="changeBackgroundColor">Change Background Color</button>
  </div>
</template>

<script>
  export default {
    methods: {
      changeBackgroundColor() {
        window.chrome.webview.hostObjects.CSharp.SetBackgroundColor('#FF0000');
      }
    }
  }
</script>

方法二：使用webView/webview2控件 【楼主更熟悉的方式】

实现的方式如上：

实现控制背景颜色or实现通信

vue

vue文件中楼主是把fn挂载到原型链上，实现全局作用域的效果

Vue.prototype.changeBackground = function (color) {
    document.body.style.backgroundColor = color;
};

vue中安装vue-cli-plugin-external-scripts 插件，并在 vue.config.js 文件中配置

配置：

module.exports = {
  configureWebpack: {
    plugins: [
      new ExternalScriptsWebpackPlugin({
        scripts: [
          {
            src: 'http://localhost:8081/webview2.js',
            global: 'external',
            defer: true
          }
        ]
      })
    ]
  }
}

组件在vue文件中发送 信息  [关键]

window.external.invoke('change-background', 'blue');

c#

c#wpf的项目中：1安装webview控件

                          2使用：【接受通信】

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;
using System;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WebView2Demo
{
    static class Program
    {
        static async Task Main()
        {
            // 初始化 WebView2 运行时
            await CoreWebView2Environment.CreateAsync();

            // 创建 WebView2 控件
            var webView = new WebView2();

            // 配置 WebView2 控件
            webView.CreationProperties = new CoreWebView2CreationProperties
            {
                BrowserExecutableFolder = @"C:\Program Files (x86)\Microsoft\Edge\Application",
                UserDataFolder = "C:\\temp\\WebView2Demo"
            };

            // 加载 Vue 页面
            webView.NavigationCompleted += async (sender, args) =>
            {
                // 调用 Vue 中的函数
                await webView.ExecuteScriptAsync("changeBackground('red');");
            };
            webView.Source = new Uri("http://localhost:8080");

            // 显示 WebView2 控件
            var form = new Form();
            form.Controls.Add(webView);
            webView.Dock = DockStyle.Fill;
            Application.Run(form);
        }
    }
}