WinForm/WPF程序嵌入Web网页的解决方案
企业级信息化系统绝大部分采用BS架构实现,如门户网站、OA系统、电商网站等,通过浏览器输入Web网址即可访问,对于使用者来说非常便捷,对于开发维护者来说也非常方便,程序维护只需更新服务器即可,使用者无感知。但是CS架构的WinForm客户端程序仍然具有很实用的价值,如WPS、IT类的集成开发环境(数据库、图形处理软件)、PC端的小工具。本地程序处理性能更优秀,但是频繁更新带来不友好的客户端体验。还有一种非常常见且实用的业务场景, Web网页与WinForm程序互相集成应用。
在百度网盘的网页中,点击【下载】按钮,首先会检查本地是否已经启动客户端网盘。如果未启动,则弹出提示信息告知用户需要打开客户端程序进行下载。这就是一个典型的Web网页中启动客户端程序的场景。更形象的应用场景是,WinForn/WPF客户端程序嵌入Web程序,Web程序的网页中js调用WinForm/WPF窗体以及业务方法。后面会详细的介绍。
WinForm程序中集成网页的基本原理就是通过一个包含类似浏览器功能的控件,将Web网页载入并解析渲染出来。下面主要介绍 WinForm 集成 Web 网页的几种实现方式。
谈论集成的问题之前,先了解一下浏览器的内核。
浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
- Trident(MSHTML、IE内核)
内核被包含在全世界最高的使用率的操作系统中,即为Windows操作系统,所以我们又经常把它称之为IE内核。
Trident内核的常见浏览器有:
-
- IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0)、IE11
- 360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink)
- 360极速浏览器(7.5之前为Trident+Webkit,7.5为Trident+Blink)
- 百度浏览器(早期版本)
- 世界之窗浏览器(最初为IE内核,2013年采用Chrome+IE内核)
- UC浏览器(Webkit内核+Trident内核)
- 其他等
其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。
- Gecko(Firefox内核)
Gecko内核常见的浏览器:Mozilla Firefox、Mozilla SeaMonkey、waterfox(Firefox的64位开源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)、K-Meleon。
- Webkit(Safari内核,Chrome内核原型,开源)
WebKit内核常见的浏览器:Chrome、傲游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。
参考网站:https://liulanmi.com/labs/core.html
- Blink
Blink是一个由Google和Opera Software开发的浏览器排版引擎,Google计划将这个渲染引擎作为Chromium计划的一部分,并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。
- ie.icoa.cn
https://ie.icoa.cn 可检测 PC 或手机浏览器内核和操作系统类型,包括Google Chrome的WebKit、IE的Trident、ME的Edge、Firefox的Gecko/Servo,以及Windows/MacOS/Linux/iOS/Android等的判断。
- http://mybrowse.osfipin.com
- WebBrowser
微软WinForm开发框架中老牌控件。
-
- 默认基于IE7内核,对H5网页加载支持不完善。
- 只支持单线程模式,大部分对其操作必须在创建它的线程中执行,不可以在其它线程中调用其方法或属性。
- 性能相对较弱。
- CefSharp【推荐】
CefSharp是一种将功能齐全的符合标准的web浏览器嵌入C#或VB.NET应用程序的简单方法。CefSharp拥有WinForms和WPF应用程序的浏览器控件,以及自动化项目的OffScreen版本。CefSharp基于Chromium Embedded Framework,这是Google Chrome的开源版本。
- CefSharp中文帮助文档,请点击查看
- 免费、开源:https://github.com/cefsharp/CefSharp
- 支持JS、C#、WinForm窗体之间相互通讯与调用。
- 兼容性较好,支持H5、CSS5、WebGL等。
- 支持获取Cookies较全面。
- 通过NeGet安装SDK时,运行时环境会被自动下载到当前项目的bin\debug 或者 bin\Release目录下。导致整个项目非常大,大约110M左右。
- 以独立进程方式运行,消耗内存较多。
- 当控件Dock属性设置为 Fill,客户端电脑的缩放与布局不是100%时,窗体呈现黑边(严重bug),并没有完全填充父容器。
实际项目应用效果如下图(缩放比例为100%):
呈现的模型是三维BIM模型,里面用到了HTML5、CSS3、WebGL等新技术。
- Miniblink
Miniblink是一个追求极致小巧的浏览器内核项目,全世界第三大流行的浏览器内核控件。其基于chromium最新版内核,去除了chromium所有多余的部件,只保留最基本的排版引擎blink。Miniblink保持了10M左右的极简大小,是所有同类产品最小的体积,同时支持windows xp、npapi。
- GeckoFX
GeckoFX是skybound工作室开发的一个开源的用于方便将gecko引擎(最主要的浏览器是firefox)链接到.net 窗体应用的一个组件。它是用C#写成的,里面有大量的C#的注释,geckofx是最完美的默认的iE核心webbrowse控件的替代控件。
- DotNetBrowser
DotNetBrowser能嵌入一个基于Chromium的WPF或WinForms组件到你的.NET应用中,用来显示使用HTML5、CSS3、JavaScript、Silverlight等技术构建的现代网页。
-
- 收费
- EO.WebBrowser
- 官网:https://www.essentialobjects.com/Products/WebBrowser/Default.aspx
- 收费
- Microsoft Edge WebView2【推荐】
Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎,以在本机应用中显示 web 内容。 使用 WebView2,可以在本机应用的不同部分嵌入 Web 代码,或在单个 WebView 实例中生成所有本机应用。
- 官网:https://docs.microsoft.com/zh-cn/microsoft-edge/webview2
- 免费。
- 诞生较晚,相比CefSharp,功能较弱。
- 通过NeGet下载SDK时,仅下载以下3个类库。DLL尺寸较小,对项目安装包大小几乎没有影响。
-
运行WebView2时,首先需要下载并 WebView2 运行时安装程序。下载地址: https://developer.microsoft.com/zh-cn/microsoft-edge/webview2
分发 WebView2 应用和 WebView2 运行时:https://docs.microsoft.com/zh-cn/microsoft-edge/webview2/concepts/distribution
-
- WebView2 Runtime 可以离线安装。 而CEFSharp从Nuget上下载Runtime耗时较长。
- WebView2 Runtime 一次安装,可以所有程序共享,并且还支持独立自动升级,而CEFSharp每个程序都需要下载。
- WebView2 Runtime x86,x64自动识别,不需要手动设置。
- WinForm、WPF、.NET Core 都可以用一个统一的包。
实际项目应用效果如下图。
呈现的模型是三维BIM模型,里面用到了HTML5、CSS3、WebGL等新技术。
- BlazorWebView
RemoteBlazorWebView.Wpf.BlazorWebView、RemoteBlazorWebView.WindowsForms.BlazorWebView 是基于 .NET 6 Preview 7 开发的 Blazor WebView 控件,支持WinForm 与 WPF。
-
- 开源地址:https://github.com/budcribar/RemoteBlazorWebView
- 示例程序:https://github.com/budcribar/RemoteBlazorWebViewTutorial
综合考虑,在客户端程序中嵌入网页程序,首选CefSharp、WebView2。
参考文献:https://www.cnblogs.com/TianFang/p/14352539.html
成在管理,败在经验;嬴在选择,输在不学! 贵在坚持!
个人作品
BIMFace.SDK.NET
开源地址:https://gitee.com/NAlps/BIMFace.SDK
系列博客:https://www.cnblogs.com/SavionZhang/p/11424431.html
系列视频:https://www.cnblogs.com/SavionZhang/p/14258393.html
技术栈
1、Visual Studio、.NET Core/.NET、MVC、Web API、RESTful API、gRPC、SignalR、Java、Python
2、jQuery、Vue.js、Bootstrap、ElementUI
3、数据库:分库分表、读写分离、SQLServer、MySQL、PostgreSQL、Redis、MongoDB、ElasticSearch、达梦DM
4、架构:DDD、ABP、SpringBoot、jFinal
5、环境:跨平台、Windows、Linux、Nginx
6、移动App:Android、IOS、HarmonyOS、微信小程序、钉钉、uni-app、MAUI
分布式、高并发、云原生、微服务、Docker、CI/CD、DevOps、K8S;Dapr、RabbitMQ、Kafka、RPC、Elasticsearch。
欢迎关注作者头条号 张传宁IT讲堂,获取更多IT文章、视频等优质内容。
出处:www.cnblogs.com/SavionZhang
作者:张传宁 技术顾问、培训讲师、微软MCP、系统架构设计师、系统集成项目管理工程师、科技部创新工程师。
专注于企业级通用开发平台、工作流引擎、自动化项目(代码)生成器、SOA 、DDD、 云原生(Docker、微服务、DevOps、CI/CD);PDF、CAD、BIM 审图等研究与应用。
多次参与电子政务、图书教育、生产制造等企业级大型项目研发与管理工作。
熟悉中小企业软件开发过程:可行调研、需求分析、架构设计、编码测试、实施部署、项目管理。通过技术与管理帮助中小企业实现互联网转型升级全流程解决方案。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
如有问题,可以通过邮件905442693@qq.com联系。共同交流、互相学习。
如果您觉得文章对您有帮助,请点击文章右下角【推荐】。您的鼓励是作者持续创作的最大动力!