前言：c#小白一个

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

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

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

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

方法一：使用 CefSharp控件

安装 CefSharp 包：在 Visual Studio 中打开 NuGet 包管理器，搜索并安装 CefSharp.Wpf 包。这个包包含了嵌入到 WPF 程序中的 Chromium WebKit 引擎控件。
在 WPF 程序中添加一个名为 webBrowser 的 WebBrowser 控件。
在 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代码：

在 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);}}
}

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

如何创建基于webpack的vue项目和基于vite的vue项目及将现有vue项目变更为基于vite项目
基于新电脑实现步骤如下 1.如果这些都安装好了可以直接进入下一步,安装npm,分别敲入如下命令 /bin/zsh -c "$(curl -fsSL https://gitee.com/cun ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
vue项目如何放到服务器上,Vue项目怎么上传到云服务器
Vue项目怎么上传到云服务器内容精选换一换本章节以Linux操作系统为例,指导您通过弹性云服务器内网方式连接GaussDB(for Redis)实例.使用内网连接GaussDB(for Redi ...
docker项目部署 php_Docker部署PHP+Vue项目
本文将介绍如何使用docker镜像快速部署 php+vue 项目.文末提供源码地址本地创建Docker映射目录 -- vue_demo # Demo项目 -- php_vue -- docker- ...
vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
vue项目结构php写哪里,vue项目结构（详细教程）
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下新建一个项目之后,我们来看一下项目的目录结构几个主要文件的内容 index.html文件(入口文件,系统进入之后先进入in ...
vue项目的停止_基于Vue项目开发中遇到的坑及终结
之前一直在公司忙项目,忙项目的,好歹是发布了1.0版本.终于是有时间写一个总结了. 话说我就一个实习生一进来就要做项目核心,真的有点受宠若惊,还好项目是1.0版本,先实现部分功能,访问量也不大,加上一 ...
vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分本届作业聊一聊React和Vue的区别老版本的项目环境如何创 ...
Java毕设项目校园外卖系统Web端计算机（附源码+系统+数据库+LW）
Java毕设项目校园外卖系统Web端计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...

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

前言：c#小白一个

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

方法一：使用 CefSharp控件

vue代码：

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

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

vue

c#

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

最新文章

热门文章

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

前言：c#小白一个

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

方法一：使用 CefSharp控件

vue代码：

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

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

vue

c#

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

最新文章

热门文章

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