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主要使用方式就是将其自带的浏览器添加到程序界面里面，浏览器只做界面呈现，控制全部通过后台代码实现。

本文适用51版本，尚未验证其他版本是否适用，请谨遵参考

使用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

代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>hello world</title>
    <link href="../Resource/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <h1 id="h1"></h1>
</body>
</html>
<script src="../Resource/js/jquery-1.10.2.min.js"></script>
<script src="../Resource/js/bootstrap.min.js"></script>
<script>
    $(function(){
        $("#h1").html("Hello world!");
    });
</script>

这里要注意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举例：

  1. 拖动过去，界面如下
添加的资源文件
  1. 重命名资源（加上后缀名），因为默认vs会帮你“智能”的去掉后缀名，然而Resources.resx内不允许建文件夹，所以在使用资源的时候并不能分得清。
重命名文件名
  1. 调用，使用静态资源类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<string, byte[]> resources;

        private string mimeType;
        private MemoryStream stream;

        public CustomSchemeHandler()
        {
            resources = new Dictionary<string, byte[]>
            {
                {"/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中的代码差不多。但是这里有几个需要说明：

  1. 资源字典没有像官方demo使用<string，string>的键值对，而是使用<string，byte[]>这样的，因为我们的资源都是通过流传递的二进制回去，所以byte[]更能存放图片，文本，二进制文件等多种类型。
  2. 资源字典中定义的资源名，在使用时需要与之同名，而不是使用文件名。

创建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);
            }
        }
    }
}

这里需要注意的两点：

  1. URL的结构为[scheme]://[domain]:[port]/[path]，工厂类中只对scheme中做了判断，如果想要对domain与path进行判断则对request中的url进行解析即可。简单情况下请求时，path就是我们的资源名，domain随便填。
  2. create方法就是在一个请求到来是调用，意味着每个请求都会new一个CustomSchemeHandler类进行处理。

在heloworld.html中添加资源引用

直接使用资源的名称即可，不用带上'/'。代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="asset/bootstrap_min.css" rel="stylesheet" />
</head>
<body>
    <h1 id="h1"></h1>
</body>
</html>
<script src="asset/bootstrap_min.js"></script>
<script src="asset/jquery.js"></script>
<script>
    $(function(){
        $("#h1").html("Hello world!");
    });
</script>

最后一步

这一切准备工作都做好了，只需要将我们的自定义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的界面，去生成路径下看看没有网页文件是吧。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,527评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,314评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,535评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,006评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,961评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,220评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,664评论 3赞 392
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,351评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,481评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,123评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,713评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2赞 341

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,283评论 25赞 707
  • WPF简介
    目录 什么是WPF？ WPF的历史？ 为什么要用WPF及WPF作用 WPF与winForm区别？ 什么是WPF？ ...
    灬52赫兹灬阅读 5,758评论 2赞 11
  • 学习能对销售事业起到多大的作用？
    学习是厚积薄发的事，可能开始时看不到效果，但是它对你潜移默化，最终使你脱胎换骨。 有人说，学习跟销售有关吗？读书多...
    虾妹阅读 1,140评论 0赞 0
  • 2017-06-13
    曲筱绡说了一句话： 说出了现在很多人的生活状态！ 越是有钱的人，越满世界的找生意！ 只有没钱的人，这也看不起，那也...
    湘子雅阅读 129评论 0赞 0
  • 随笔
    11111111
    Kevin_C__阅读 160评论 0赞 0