![](http://img.e-com-net.com/image/info8/53462112daef409883899a90cfd30e0c.jpg)
在我的博客《C#开发BIMFACE系列52 CS客户端集成BIMFACE应用的技术方案》中介绍了多种集成BIMFACE到客户端程序中的方案。最后推荐大家使用 CefSharp组件与WebView2组件。本篇文章介绍使用CefSharp组件如何集成BIMFACE到客户端程序中。
CefSharp是一个围绕Chromium Embedded Framework(CEF)的轻量级.NET包装器。它是用C++/CLI编写的。允许开发者在.NET应用程序中嵌入Chromium。可以在C#或VB或任何其他CLR语言中使用。CefSharp同时提供WPF和WinForms Web浏览器控件实现。
功能特点
- 免费、开源:https://github.com/cefsharp/CefSharp
- 完善的文档
- 支持JS、C#、WinForm窗体之间相互通讯与调用
- 兼容性较好,支持H5、CSS5、WebGL等
- 支持获取Cookies较全面
- 其他
步骤1 新建WinForm项目
新建一个WinForm窗体应用程序,目标框架选择 .NET Framework 4.5.2,因为新版本的CefSahrp组件最低支持 .NET Framework 4.5.2。
步骤2 通过 NeGet 下载
打开NeGet
(1)搜索 CefSharp
(2)选择 CefSharp.WinForms
(3)选择最新版本
(4)点击【安装】按钮
点击【确定】开始安装。
安装完成后,项目中自动添加了CefSharp.dll、CefSharp.Core.dll、CefSharp.WinForms.dll 类库引用。
工具箱中也增加了CefSharp控件
步骤3 编译项目
编译 BIMFace.SDK.CSharp.Sample.WinForm 项目,生成如下内容
与 CefSharp 相关的共计32个文件,2个目录,文件大小总计216M。这个尺寸相对于业务系统本身来说已经非常大了,最后制作的安装包尺寸也会很大。
其中 locales 目录下是语言包,删除 zh-CN.pak 之外的所有文件,总文件大小可以减少22M左右。
测试功能设计如下
功能说明
(1)WinForm中加载的网页来自于 BIMFace.SDK\BIMFace.SDK.CSharp.Sample\Pages\BIMFaceDemo7_3.html,所以Web项目要首先运行。
(2)WinForm 窗体中输入 BIMFACE FileId,点击【加载模型/图纸】按钮,调用CefSahrp组件,加载步骤(1)中的网页。代码如下:
1 // 加载模型/图纸 2 private void btnLaodBIMFaceFile_Click(object sender, EventArgs e) 3 { 4 string fileId = txtBIMFaceFileId.Text.Trim(); 5 if (string.IsNullOrEmpty(fileId)) 6 { 7 MessageBox.Show("请填写 BIMFACE FileId。", "提示", MessageBoxButtons.OK, MessageBoxIcon.Warning); 8 return; 9 } 10 // 将 ChromiumWebBrowserBindObject 实例对象注入到 js 对象中。网页中即可调用 ChromiumWebBrowserBindObject 类中定义的属性、方法 11 var objToBind = new ChromiumWebBrowserBindObject(); 12 chromiumWebBrowser1.JavascriptObjectRepository.Register("_chromeBrowser", objToBind, true, BindingOptions.DefaultBinder); 13 14 string url = "https://localhost:44389/Pages/BIMFaceDemo7_3.html?fileId=" + fileId; 15 chromiumWebBrowser1.Load(url); 16 }
(3)网页中点击【JS 调用 C# 方法】按钮。代码如下:
在入口函数中,获取注入的 ChromiumWebBrowser 对象,名称为 _chromeBrowser。
按钮对应的js方法
1 // js 调用 C# 方法 2 function callCharpMethod() { 3 // 特别提醒:C# 类中定义的方法名称采用 Pascal 命名。网页中调用的时候必须将方法名称的第一个字母改为小写。否则调用不成功。 4 _chromeBrowser.testCalcAdd(6,8) 5 .then(function (response) { 6 alert(response); 7 }); 8 }
特别提醒:C# 类中定义的方法名称采用 Pascal 命名。网页中调用的时候必须将方法名称的第一个字母改为小写。否则调用不成功。
调用的C#方法。定义一个单独的类,用于在CefSahrp组件加载网页之前,将其注入到网页中
(4)WinForm窗体中点击【 C# 调用 JS 方法】按钮。代码如下:
1 // C# 调用 JS 方法 2 private void btnCsharpCallJsMethod_Click(object sender, EventArgs e) 3 { 4 TaskjsResponse = chromiumWebBrowser1.EvaluateScriptAsync("jsMethodForCSharpTestCalcSub", 25, 7); 5 6 if (jsResponse.Result != null && jsResponse.Result.Success == false) 7 { 8 MessageBox.Show("C#调用JS方法发生异常。" + jsResponse.Result.Message 9 , "提示", MessageBoxButtons.OK, MessageBoxIcon.Error); 10 } 11 }
网页中定义的 jsMethodForCSharpTestCalcSub() 方法如下:
1 // js 方法,供C#调用 2 function jsMethodForCSharpTestCalcSub(num1, num2) { 3 /*如果参数需要是复杂类型,则传递Json格式的字符串,然后反序列化为对象即可使用*/ 4 5 alert('传入的参数num1:' + num1 + ", num2:" + num2 + ' 减法运算 num1 - num2 = ' + (num1 - num2)); 6 }
特别说明:
(1)C#定义的方法供JS调用,C#方法的返回值类型、参数类型都只能是简单数据类型,如:int、string、bool 等。
(2)JS定义的方法供C#调用,JS方法的返回值类型、参数类型都只能是简单数据类型,如:int、string、bool 等。
一般来说复杂类型就是一个实体类。如果确实想使用复杂类型,建议的解决方案如下:
将复杂类型序列化为字符串,调用方将其反序列化之后再使用。
关于C#与JS互相通讯,请参考CefSahrp官方文档:https://github.com/cefsharp/CefSharp/wiki/General-Usage#3-how-do-you-expose-a-net-class-to-javascript
1、进程分析
(1)启动应用程序,CefSharp组件未加载Web网页时,默认启动了2个 CefSharp.BrowserSubProcess 子进程。原因是我当前使用的CefSharp是94.4.50版本,每当new CefSharp.WinForms.ChromiumWebBrowser() 一个时,会启动2个子进程。
(2)CefSharp组件加载Web网页后,又启动了2个 CefSharp.BrowserSubProcess 子进程,共计4个子进程。原因是 当 chromiumWebBrowser1.Load(url) 时启动2个子进程。不同版本的 CefSharp 组件,启动的子进程数量不同。
2、运行日志分析
- 通过NeGet安装SDK时,运行时环境会被自动下载到当前项目的bin\debug 或者 bin\Release目录下。导致整个项目非常大,大约220M左右。
- 以独立进程方式运行,消耗内存较多。
如下是我的一个WinForm程序中使用CefSharp组件的运行状态,其中一个子进程消耗内存达到1.5G,太可怕了
- 当控件Dock属性设置为 Fill,客户端电脑的缩放与布局不是100%时,窗体呈现黑边(严重bug),并没有完全填充父容器。
《BIMFace.SDK.CSharp》开源SDK。欢迎大家下载使用。
![](http://img.e-com-net.com/image/info8/b34fbceaea4b43eb8b3eadb87e220d44.jpg)