Windows桌面静态界面技术选型&实践——CEF(CefSharp)
为什么选择CEF
总所周知桌面程序开发主流能数出来的就是MFC，Delphi，JavaSE，WinForm，WPF，QT等，但是他们都有较高的技术门槛，一般人要上手做出高效漂亮的界面来很难。特别是当需要做复杂的配置界面与控制面板类界面有一种来自内心的无力，毕竟这些技术的职业前端都已经很稀少了。
幸好CEF的出现帮助我们解决了这个问题，选它有几个优点：
- 集成快，cef最简单的就是一个浏览器，使用最基础的静态界面+js+界面的Handler就可完成你想要的功能
- 开发快，web前端技术是门槛最低、库最多的界面技术了
- 利于开发各种复杂界面，对于美工的设计与个人的想法都能很好很简单的实现
- 引入了web众多优秀特性
当然它也存在缺点：
- 需要将cef打包进程序，近百来兆
- 熟练的使用需要些时间研究，而官网的文档很简陋，网上的教程很基础
- 对chromium的版本追得不是那么紧
- 初次加载与渲染慢
- 遗传了web的特点，没有高性能
C#使用CEF——CEFSharp
其他技术接触过但是了解不多，所以无法论述，本系列是对C#下使用cef封装库CEFSharp使用的经验。cef主要使用方式就是将其自带的浏览器添加到程序界面里面，浏览器只做界面呈现，控制全部通过后台代码实现。
使用Winform作为载体
在选择Winform前也是走了弯路，因为觉得WPF更加简洁和高效，所以选择了WPF来作为cef浏览器的载体。这样界面配合起来更好用，但是实践后发现一个残忍的事实：
最新的51版本对WPF兼容不太好， 运行时界面渲染会出现闪烁。
另外网上的资料和官方的文档大都以Winfrom作为基础讲解，在学习上也更具有优势。
资源访问方式
网络资源
直接使用浏览器加载初始指定页面即可，界面点击会自动跳转。网上资料泛滥。
本地资源
网上资料往往因为作者只是浅尝则止和文章抄袭，形成了一个误区：
“CEF不能打包本地资源（html、js、css、img），只能将其暴露在程序路径下”。这句话是错误的！
这是种观点是错误的，使用基础的方法通过相对路径+注册类给浏览器的方式确实不能将其打包。但是将资源添加到程序资源中，通过SchemeHandler包装请求与响应的方式可以将二进制资源以流的形式提供给cef浏览器访问（具体方法后面专文讨论）。总的来说，将程序打包是可行的，了解技术使用Google不要被百度的一大抄的文章欺骗。
因为cefsharp均支持winform与wpf，都进行了试用。使用方式一致，唯一的区别就是51版本的wpf界面渲染时会出现闪动，所以后续cefsharp均是在winform下使用的。
本地资源访问方式
这种方式极不安全，仅可用于学习研究，实际工程中不建议使用。
项目准备
- 创建winform界面项目，指定目标框架.net 4.5.2
- 使用nuget添加cefsharp.winform的引用（wpf添加cefsharp.wpf）
- 在编译配置管理器中添加x64或者x86，cefsharp不支持编译成Any CPU
开始撸代码
废话不多说直接上代码：
using System;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
namespace Ceftest
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
this.Load += Form1_Load;
this.FormClosed += Form1_FormClosed;
}
private void Form1_Load(object sender, EventArgs e)
{
// 要先初始化才能用
Cef.Initialize();
// cefsharp提供的浏览器控件，一般用它充满窗口就搞定了
ChromiumWebBrowser bs = new ChromiumWebBrowser("http://www.oschina.net")
{
// 填充整个父控件
Dock = DockStyle.Fill
};
// 添加到窗口的控件列表中
this.Controls.Add(bs);
}
private void Form1_FormClosed(object sender, FormClosedEventArgs e)
{
// 结束时要销毁
Cef.Shutdown();
}
}
}
在上面的代码里可以看到浏览器初始化的时候访问的是oschina，访问web网页很简单给出地址即可，页面内链接跳转cef会自己处理的。如果需要操作加载指定页面只需要调用浏览器控件的Load(string url)方法即可。
访问本地网页
创建web前端界面helloworld.html
项目结构如下图：
vs项目结构
添加生成事件
在项目属性生成事件中添加后期生成事件如下，就会在编译生成后将web界面相关文件复制到生成目录的Resource文件夹下。
xcopy /s /y $(ProjectDir)Resource $(TargetDir)Resource\
编辑hellworld.html
代码：
hello world
这里要注意js与css文件的路径，需要在前面加上../，才能通过helloworld.html的相对路径解析文件的绝对路径，不然cef无法访问资源文件。
修改cef浏览器控件初始化代码
private void Form1_Load(object sender, EventArgs e)
{
// 要先初始化才能用
Cef.Initialize();
// 获取生成路径下网页文件的绝对路径
var fileName = Path.Combine(Directory.GetCurrentDirectory(), "Resource/helloworld.html");
// cefsharp提供的浏览器控件，一般用它充满窗口就搞定了
ChromiumWebBrowser bs = new ChromiumWebBrowser(fileName)
{
// 填充整个父控件
Dock = DockStyle.Fill
};
// 添加到窗口的控件列表中
this.Controls.Add(bs);
}
在上一步已经提到了，cefsharp访问本地的文件是以绝对路径的方式进行的，所以要先构造初始界面的绝对路径。如果需要加载其他界面，调用Load方法的时候也要传递网页的绝对路径。
F5完成，弹出窗口，本地界面被显示出来了
Hello world
总结
这种直接访问本地资源的方式简单粗暴，适合学习、调试使用。正常项目切记不能使用这种方式，因为它使得我们的界面代码文件全部暴露在程序路径下面，可以被随意篡改。
当然cefsharp也是早就想到了这个问题，提供了一种将web文件打包到程序资源中提供访问的方法。下面是Cefsharp本地开发时如何访问程序资源，C#项目自带有可以打包的资源，而Cefsharp可以通过一些方式在浏览器上访问到这些资源，进而解决html文件的编译打包问题。
程序资源访问方式
建立项目添加web文件这些就不赘述，参考上述博文即可。
准备
一个新的Winform项目，文件结构如下：
项目文件结构
添加资源
打开Properties下的Resources.resx，将Resource下所有用到的文件拖动到Resources.resx窗口中。
拿bootstrap.min.js举例：
- 拖动过去，界面如下
添加的资源文件
- 重命名资源（加上后缀名），因为默认vs会帮你“智能”的去掉后缀名，然而Resources.resx内不允许建文件夹，所以在使用资源的时候并不能分得清。
重命名文件名
- 调用，使用静态资源类Resources 调用对应的资源名称即可获得资源的值。
Resources.bootstrap_min_js;
需要注意的是：
资源分为很多种类型，常见的键值对、文本文件类型为string，二进制文件则为byte[]，图片为Bitmap类型。在使用的时候需要注意。
照着这样将所有的文件都添加进去，这样编译后就些文件会当成资源被打包到.exe中。
注意：资源中存放的是文件在项目中的相对路径，所以移动后一定要重新新增资源，不然编译就会找不到文件。
使用资源
cefsharp能够在浏览器中访问到上述的资源是因为它内部提供了一个Scheme机制，能够截留自定义的Scheme请求，进行处理和响应。这样我们就可以将资源当做请求的返回值，提供给浏览器了。
正常的Scheme，如http，https这些是不会被这个机制截留的，仍然会按照浏览器正常机制进行。
创建自定义的Scheme类
cefsharp有一个自定义接口IResourceHandler，实现这个接口就可以了。
PS:以前是叫ISchemeHandler的，后面改成IResourceHandler了，我觉着这个还是蛮贴切的，资源处理器。另一层原因可能是因为把将接口这些虚拟自己纳入进来的原因吧，是的，这个里面我们可以提供接口处理。
自定义的Scheme类CustomSchemeHandler：
using CefSharp;
using Ceftest.Properties;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Threading.Tasks;
namespace Ceftest
{
public class CustomSchemeHandler : IResourceHandler
{
private readonly IDictionary resources;
private string mimeType;
private MemoryStream stream;
public CustomSchemeHandler()
{
resources = new Dictionary
{
{"/asset/bootstrap_min.css", Encoding.UTF8.GetBytes(Resources.bootstrap_min_css) },
{"/asset/bootstrap_min.js", Encoding.UTF8.GetBytes(Resources.bootstrap_min_js) },
{"/asset/jquery.js", Encoding.UTF8.GetBytes(Resources.jquery_1_10_2_min_js) },
{"/helloworld.html", Encoding.UTF8.GetBytes(Resources.helloworld_html) },
};
}
// 当收到请求时的处理器
bool IResourceHandler.ProcessRequest(IRequest request, ICallback callback)
{
var uri = new Uri(request.Url);
var resourceName = uri.AbsolutePath;
if (string.Equals(resourceName, "/exampleUri", StringComparison.OrdinalIgnoreCase))
{
// 这样写就可以针对特定的请求进行处理和响应
}
// 普通的文件资源处理
byte[] resource;
if (resources.TryGetValue(resourceName, out resource))
{
Task.Run(() =>
{
using (callback)
{
stream = new MemoryStream(resource);
var fileExtension = Path.GetExtension(resourceName);
mimeType = ResourceHandler.GetMimeType(fileExtension);
callback.Continue();
}
});
return true;
}
else
{
mimeType = ResourceHandler.GetMimeType(".html");
stream = null;
callback.Continue();
}
return false;
}
// 当包装responseheader的处理代码
void IResourceHandler.GetResponseHeaders(IResponse response, out long responseLength, out string redirectUrl)
{
redirectUrl = null;
response.MimeType = mimeType;
if (stream != null)
{
responseLength = stream.Length;
response.StatusCode = (int)System.Net.HttpStatusCode.OK;
response.StatusText = "OK";
}
else
{
responseLength = 0;
response.StatusCode = (int)System.Net.HttpStatusCode.NotFound;
response.StatusText = "NotFound";
}
}
// 当包装responsebody的处理代码
bool IResourceHandler.ReadResponse(Stream dataOut, out int bytesRead, ICallback callback)
{
callback.Dispose();
if (stream == null)
{
bytesRead = 0;
return false;
}
var buffer = new byte[dataOut.Length];
bytesRead = stream.Read(buffer, 0, buffer.Length);
dataOut.Write(buffer, 0, buffer.Length);
return bytesRead > 0;
}
bool IResourceHandler.CanGetCookie(Cookie cookie)
{
return true;
}
bool IResourceHandler.CanSetCookie(Cookie cookie)
{
return true;
}
void IResourceHandler.Cancel()
{
}
void IDisposable.Dispose()
{
if (stream != null)
{
stream.Close();
stream.Dispose();
}
}
}
}
按照代码实现的接口就可以将指定的收到的请求的资源返回，基本结构上与cefsharp.example中的代码差不多。但是这里有几个需要说明：
- 资源字典没有像官方demo使用
- 资源字典中定义的资源名，在使用时需要与之同名，而不是使用文件名。
创建CustomSchemeHandler的工厂类
因为cefsharp采用了工厂的设计模式，所以还需要实现一个对应的工厂类 CustomSchemeHandlerFactory：
using CefSharp;
namespace Ceftest
{
public class CustomSchemeHandlerFactory : ISchemeHandlerFactory
{
public const string SchemeName = "custom";// 自定义Scheme的名称
public IResourceHandler Create(IBrowser browser, IFrame frame, string schemeName, IRequest request)
{
if (schemeName == SchemeName)
{
return new CustomSchemeHandler();
}
else
{
// 这里的404界面未添加到程序里
var mimeType = ResourceHandler.GetMimeType(".html");
return ResourceHandler.FromFilePath("404.html", mimeType);
}
}
}
}
这里需要注意的两点：
- URL的结构为[scheme]://[domain]:[port]/[path]，工厂类中只对scheme中做了判断，如果想要对domain与path进行判断则对request中的url进行解析即可。简单情况下请求时，path就是我们的资源名，domain随便填。
- create方法就是在一个请求到来是调用，意味着每个请求都会new一个CustomSchemeHandler类进行处理。
在heloworld.html中添加资源引用
直接使用资源的名称即可，不用带上'/'。代码如下：
最后一步
这一切准备工作都做好了，只需要将我们的自定义Scheme工厂注册给cef，紧接着在浏览器中访问我们的helloworld.html即可。form1代码如下：
using System;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
using System.IO;
namespace Ceftest
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
this.Load += Form1_Load;
this.FormClosed += Form1_FormClosed;
}
private void Form1_Load(object sender, EventArgs e)
{
// 构造一个初始化的配置类
var settings = new CefSettings();
// 在配置类中注册自定义的schemeName与其对应的工厂类
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = CustomSchemeHandlerFactory.SchemeName,
SchemeHandlerFactory = new CustomSchemeHandlerFactory(),
});
// 要先初始化才能用
Cef.Initialize(settings);
// cefsharp提供的浏览器控件，一般用它充满窗口就搞定了
ChromiumWebBrowser bs = new ChromiumWebBrowser("custom://suibiantian/helloworld.html")
{
// 填充整个父控件
Dock = DockStyle.Fill
};
// 添加到窗口的控件列表中
this.Controls.Add(bs);
}
private void Form1_FormClosed(object sender, FormClosedEventArgs e)
{
// 结束时要销毁
Cef.Shutdown();
}
}
}
运行后即可看到helloworld的界面，去生成路径下看看没有网页文件是吧。
作者：术士冲前面
链接：https://www.jianshu.com/p/3f50cc747606
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。