現在H5很熱，很多網際網路公司的産品都采用混合程式設計，其中各個平台用戶端的“殼”為原生控件，但是内容很多都是Web網頁，是以可以做出很多炫酷的效果。随着Node.js和Ionic等架構的出現，現在感覺JavaScript有一統Web、Mobile、PC三大平台應用開發的能力。在Windows Form 上，利用開源浏覽器核心Chromium Embedded Framework (CEF)，CEF可以實作C#調用JS，JS調用C#，可以很好的與Web進行應用互動。下面用一個簡單的例子來說明。
1 項目庫
建立一個Windows Form項目，并用NuGet包管理器下載下傳需要的庫cefsharp，具體如下圖所示：
注意：cefsharp必須生成32或者64位的應用程式，這裡請自行配置。
2 代碼實作
為了界面好看，這裡用到一個MaterialSkin架構來美化UI，可以利用同樣的方法進行下載下傳。由于此處用到了MaterialSkin庫，它會将窗體的邊框隐藏，并自行實作了一個窗體邊框。如果直接将ChromiumWebBrowser控件執行個體化後添加到窗體上，會出現顯示不全的問題。為了解決這個問題，在窗體上放入一個panel，調整到合适大小，将ChromiumWebBrowser控件執行個體化後添加到panel中即可。示例核心代碼如下所示：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
using MaterialSkin;
using MaterialSkin.Controls;
namespace cefWinForm
{
public partial class Form1:MaterialForm
{
private ChromiumWebBrowser myBrowser = null;
public Form1()
{
InitializeComponent();
ChromeDevToolsSystemMenu.CreateSysMenu(this);
var materialSkinManager = MaterialSkinManager.Instance;
materialSkinManager.AddFormToManage(this);
materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;
materialSkinManager.ColorScheme =
new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE);
}
//Note: The function calls Cef.Initialize(); and Cef.Shutdown();
//only need to be called once in the application.
private void Form1_Load(object sender, EventArgs e)
{
Cef.Initialize();
myBrowser = new ChromiumWebBrowser("http://127.0.0.1/");
myBrowser.BrowserSettings.DefaultFontSize = 12;
//myBrowser.BrowserSettings.AcceptLanguageList = "zh-CN,en-US";
// this.Controls.Add(myBrowser);
this.pcontainer.Controls.Add(myBrowser);
}
private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
//在退出主程式時，需要首先關閉Cef
Cef.Shutdown();
}
private void devToolsToolStripMenuItem_Click(object sender, EventArgs e)
{
if (myBrowser != null)
{
//開發者工具
myBrowser.ShowDevTools();
}
}
private void devToolsToolStripMenuItem1_Click(object sender, EventArgs e)
{
if (myBrowser != null)
{
myBrowser.ShowDevTools();
}
}
protected override void WndProc(ref Message m)
{
base.WndProc(ref m);
// Test if the About item was selected from the system menu
if ((m.Msg == ChromeDevToolsSystemMenu.WM_SYSCOMMAND) &&
((int)m.WParam == ChromeDevToolsSystemMenu.SYSMENU_CHROME_DEV_TOOLS))
{
myBrowser.ShowDevTools();
}
}
}
} 這裡用new ChromiumWebBrowser("http://127.0.0.1/")建立了一個基于Chromium的WebBrowser，位址為
http://127.0.0.1/，這樣就相當于本地的一個浏覽器。基于H5建立的程式，有一個天然的好處就是，程式的更新可以在伺服器端完成，用戶端無需更新，即可完成功能的疊代。另外，就是基于CEF架構，内置的浏覽器版本，相對可控，這樣也從另一方面，解決了傳統Web應用相容多種浏覽器的相關問題。
3 效果
運作此示例，相關界面如下所示：
