.NET 桌面程序集成Web网页多种解决方案

前言

B/S架构的Web程序几乎占据了应用软件的绝大多数市场,但是C/S架构的WinForm、WPF客户端程序依然具有很实用的价值,如设计类软件 AutoCAD与Autodesk Revit、WPS、IT类的集成开发环境(数据库、图形处理软件)、PC端的小工具等等,充分利用了客户端电脑的资源综合计算能力,处理性能更加优秀。

如果想在C/S架构的客户端程序中集成Web应用,也只能借助Web网页,然后将网页集成到客户端程序中,这样就间接的达到了目的。

下面是客户端审图系统中集成Web网页的实际应用案例

b617f7c55056562a1d0ed894f8f1eff7.png 12fb42aaafa07dcb73e60fe59612cf3b.png

WinForm程序中集成网页的基本原理就是通过一个包含类似浏览器功能的控件,将Web网页载入并解析渲染出来。

e7b827ba2a4790e7000a2dc87ff0c2ac.png

介绍 WinForm、WPF 集成 Web 网页的多种技术方案之前,先了解一下浏览器的内核。

浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

6a6f7ce02efae9114a90745302ad2fc4.png

内核分类

  • 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](https://baike.baidu.com/item/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 默认浏览器。

00a3cedb54086daa036bc0fd55579c3b.png

参考网站:https://liulanmi.com/labs/core.html

  • Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎,Google计划将这个渲染引擎作为Chromium计划的一部分,并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。

bfbf66068cdb08f9d34b82b017be0123.png

浏览器内核检测

  • ie.icoa.cn

https://ie.icoa.cn 可检测 PC 或手机浏览器内核和操作系统类型,包括Google Chrome的WebKit、IE的Trident、ME的Edge、Firefox的Gecko/Servo,以及Windows/MacOS/Linux/iOS/Android等的判断。

10af7ab568c4a073bdc9fc27e1dcd310.png a6c0dad353a0dfb3ff8c5b7bb353578e.png fa56d118593e9d2fe6eb30d268dd623d.png
  • http://mybrowse.osfipin.com

0af4e9f993bfe5f28df749c3af49ef26.png

控件1:WebBrowser

微软WinForm开发框架中老牌控件。

  • 默认基于IE7内核,对H5网页加载支持不完善。

  • 只支持单线程模式,大部分对其操作必须在创建它的线程中执行,不可以在其它线程中调用其方法或属性。

  • 性能相对较弱。

控件2:WebView

WebView 使用原始的 Edge (Trident) 渲染引擎,是 Windows10 唯一的控件,功能、性能不理想。

控件3:Microsoft Edge WebView2*【强烈推荐】*

Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎,以在本机应用中显示 web 内容。使用 WebView2,可以在本机应用的不同部分嵌入 Web 代码,或在单个 WebView 实例中生成所有本机应用。

e82d6263bc4e17362d651c2495b70de9.png

下图是在Winform程序中使用WebView2组件加载我的博客园页面的效果

2890105875edcdf29669d41fcb4d1e93.png

控件4: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),并没有完全填充父容器。

09ab296240904768c2246431cb9a8a30.png

56b114e6bbb54b9e2feaccc0cc590729.png

实际项目应用效果如下图(缩放比例为100%):

呈现的模型是三维BIM模型,里面用到了HTML5、CSS3、WebGL等新技术。

9b52ee4304fb7e646683222e7341252b.png

控件5:Miniblink

Miniblink是一个追求极致小巧的浏览器内核项目,全世界第三大流行的浏览器内核控件。其基于chromium最新版内核,去除了chromium所有多余的部件,只保留最基本的排版引擎blink。Miniblink保持了10M左右的极简大小,是所有同类产品最小的体积,同时支持windows xp、npapi。

b8cc7800a4ae62c33773ea3a18421904.png

  • 开源地址:https://github.com/weolar/miniblink49/releases

控件6:GeckoFX

GeckoFX是skybound工作室开发的一个开源的用于方便将gecko引擎(最主要的浏览器是firefox)链接到.net 窗体应用的一个组件。它是用C#写成的,里面有大量的C#的注释,geckofx是最完美的默认的iE核心webbrowse控件的替代控件。

控件7:DotNetBrowser

DotNetBrowser能嵌入一个基于Chromium的WPF或WinForms组件到你的.NET应用中,用来显示使用HTML5、CSS3、JavaScript、Silverlight等技术构建的现代网页。

a0d181dd441e0b14aa88b267e221f3d2.png
  • 收费

控件8:EO.WebBrowser

  • 官网:https://www.essentialobjects.com/Products/WebBrowser/Default.aspx

  • 收费

12ed7901bdc59192b640eaf76b1e4857.png

控件9:Sciter.Forms

Sciter.Forms是基于Sciter桌面引擎的.NET类库,支持.net framework4.x、.NET CORE、.NET5及更高版本,支持Windows及Linux桌面系统。

  • Sciter为桌面UI开发带来了一系列web技术。网页设计师和开发人员可以在创建外观现代的桌面应用程序时重用他们的经验和专业技能。

  • Sciter允许使用经过时间验证、健壮且灵活的HTML和CSS来定义GUI,并使用GPU加速渲染。

  • Sciter引擎是一个单一的、紧凑的DLL,大小为5+Mb。使用它的应用程序比使用Electron或Qt构建的应用程序小10倍以上。

官网:https://sciter.com/

开源地址:https://gitlab.com/c-smile/sciter-js-sdk

0fcb62bc9bd5366a9727013c921a2ca0.png

转自:张传宁

链接:cnblogs.com/SavionZhang/p/16194142.html

-

技术群:添加小编微信并备注进群

小编微信:mm1552923   

公众号:dotNet编程大全    

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值