使用CefSharp在.NET中嵌入Google kernel

　　使用CefSharp可以在.NET輕松的嵌入Html，不用擔(dān)心WPF與Winform
控件與它的兼容性問(wèn)題，CefSharp大部分的代碼是C#，它可以在VB或者其他.NET平臺(tái)語(yǔ)言中來(lái)進(jìn)行使用。

　　近幾天來(lái)，公司項(xiàng)目中需要使用WebBrowser,其中考慮了幾個(gè)控件，如1.Winform中的WebBrowser? ??
2.WPF中的WebBrowser? ??3.WebKit.Net? ? ?4.CefSharp

　　Winform的WebBrowser放到項(xiàng)目中進(jìn)行了實(shí)驗(yàn)和處理，發(fā)現(xiàn)致命問(wèn)題：AllowsTransparency = true 和
Webbrowser 等內(nèi)置窗體顯示沖突，導(dǎo)致不發(fā)選擇，還有就是GC回收不及時(shí)，一下子就飆到了100MB+.

　　后來(lái)考慮WPF的webbrowser 它實(shí)際上還是封裝了Winform，有個(gè)嚴(yán)重的問(wèn)題就是它一直置頂?shù)阶铐攲樱瑂o，無(wú)法選擇。

　　再后來(lái)考慮WebKit.Net ，但發(fā)現(xiàn)已經(jīng)N多年沒(méi)有更新，所以不在考慮...

　　最后跌跌撞撞跑到CefSharp，發(fā)現(xiàn)非常的坑?。?！竟然不支持
AnyCPU，關(guān)鍵是我的項(xiàng)目中有的功能是必須AnyCpu啟動(dòng)的??！還好，官方在去年已經(jīng)公布了支持AnyCpu的方法。

　　首先Nuget引用cefsharp.WPF,它會(huì)自己引用Common，其他不用管。我們還需要再App.xaml.cs中添加代碼來(lái)支持AnyCpu。
public partial class App : Application { public App() { //Add Custom assembly
resolver AppDomain.CurrentDomain.AssemblyResolve += Resolver; //Any CefSharp
references have to be in another method with NonInlining// attribute so the
assembly rolver has time to do it's thing. InitializeCefSharp(); }
[MethodImpl(MethodImplOptions.NoInlining)]private static void
InitializeCefSharp() {var settings = new CefSettings(); // Set
BrowserSubProcessPath based on app bitness at runtime
settings.BrowserSubprocessPath =
Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase,
Environment.Is64BitProcess? "x64" : "x86", "CefSharp.BrowserSubprocess.exe"); //
Make sure you set performDependencyCheck false Cef.Initialize(settings,
performDependencyCheck:false, browserProcessHandler: null); } // Will attempt
to load missing assembly from either x86 or x64 subdir// Required by CefSharp
to load the unmanaged dependencies when running using AnyCPU private static
Assembly Resolver(object sender, ResolveEventArgs args) { if
(args.Name.StartsWith("CefSharp")) { string assemblyName = args.Name.Split(new
[] {',' }, 2)[0] + ".dll"; string archSpecificPath =
Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase,
Environment.Is64BitProcess? "x64" : "x86", assemblyName); return
File.Exists(archSpecificPath)? Assembly.LoadFile(archSpecificPath) : null; }
return null; } private void Application_Startup(object sender, StartupEventArgs
e) { } }
　　還沒(méi)完，之后你得在你項(xiàng)目的?*.csproj?中添加一行配置，它是在你的第一個(gè)PropertyGroup中添加的。



最后一步，在App.config中配置x86，當(dāng)然不是說(shuō)不支持CPU，剛剛App.xaml.cs中我們已經(jīng)修改了啊。
<configuration> <runtime> <assemblyBinding xmlns="
urn:schemas-microsoft-com:asm.v1"> <probing privatePath="x86"/>
</assemblyBinding> </runtime>
</...>
?就現(xiàn)在我們?cè)陧?yè)面中添加一個(gè)CefSharpBrowser在grid中，您需要在容器空間中添加name 標(biāo)記。
public static ChromiumWebBrowser cefSha { get; set; } public Visualization() {
InitializeComponent(); }private void Page_Loaded(object sender, RoutedEventArgs
e) { cefSha= new ChromiumWebBrowser(Environment.CurrentDirectory + "
/../../Pages/STORE/VisualizationHtml/StoreData.html"); // 頁(yè)面加載完畢后打開(kāi)開(kāi)發(fā)者工具
cefSha.KeyboardHandler =new CEFKeyBoardHander();
CefSharpSettings.LegacyJavascriptBindingEnabled= true; NewMutliPage(); this
.grid.Children.Add(cefSha);//初始化 }
前后端交互都是在NewMutliPage中搭起的橋梁，該代碼是新版本的配置方式，大概是18年底，前后端的鉤子可以通過(guò)bound來(lái)偷取。
public void NewMutliPage() { cefSha.JavascriptObjectRepository.ResolveObject
+= (s, eve) => { var repo = eve.ObjectRepository; if (eve.ObjectName == "bound"
) { repo.Register("bound", new JsEvent(), isAsync: true, options: new
BindingOptions() { CamelCaseJavascriptNames= false }); } }; }
老版本你可以這么配置前后端交互的橋梁。
public void OldSinglePage() { // 新版本默認(rèn)為 false
CefSharpSettings.LegacyJavascriptBindingEnabled =true; // 把 TestClass
注入到單個(gè)頁(yè)面，名稱為 test _chromiumWebBrowser.RegisterJsObject("testold", new
TestClass()); } ?LegacyJavascriptBindingEnabled
?該屬性就是讓W(xué)ebBrowser與WPF支持js交互，否則不可以建立jsObject 這個(gè)對(duì)象。

在?RegisterJsObject?中我們是綁定的類(lèi)，該類(lèi)中是我們后臺(tái)向WebBrowser的所有數(shù)據(jù)方法。
public class JsEvent { /// <summary> /// 根據(jù)貨架列代碼區(qū)查相關(guān)信息 /// </summary> ///
<param name="Sline_code"></param> public void GetobjBySline_Code(string
Sline_code) { Visualization.cefSha.ExecuteScriptAsync($@"getgoods({
Newtonsoft.Json.JsonConvert.SerializeObject(VisualizationDAL.GetList(Sline_code))});
"); } /// <summary> /// 獲取貨架信息 /// </summary> /// <param
name="Sline_code"></param> public void GetShelveDetail(string Sline_code) { //
1.找到那列的所有貨架 ObservableCollection<STORE_SHELVE> shelveList =
XDAL.STORE_SHELVE_DAL.GetListByLineName(Sline_code);//2.找到關(guān)于該列下所有的商品信息
ObservableCollection<STORe_DetailVm> detailList =new
ObservableCollection<STORe_DetailVm>(); foreach (var item in shelveList) {
XDAL.STORE_goods_Detail.GetGoodsDetail(item.Shelve_code).ToList().ForEach(obj=>
{ detailList.Add(obj); }); }#region List<VisualShelveVm> VisualList = new
List<VisualShelveVm>(); for (int i = 0; i < shelveList.Count; i++) { //
循環(huán)最大粒子，在這個(gè)最大粒子當(dāng)中來(lái)組織Json for (int g = 0; g < 4; g++) { for (int l = 0; l < 4; l++
) {var store_detail = detailList.FirstOrDefault(a => a.grid == g.ToString() &&
a.Shelve_code == shelveList[i].Shelve_code && a.layer == l.ToString()); //
如果未出庫(kù)的里沒(méi)有這個(gè) 那就可以添加 if (store_detail != null) { VisualList.Add(new
VisualShelveVm() { shelve_grid= g.ToString(), shelve_layer = l.ToString(),
shelve_code= shelveList[i].Shelve_code, shelve_name =
shelveList[i].Shelve_name, isHas= true, goods_code = store_detail.Goods_code,
goods_name= store_detail.Goods_name }); } else { VisualList.Add(new
VisualShelveVm() { isHas= false, shelve_grid = g.ToString(), shelve_layer =
l.ToString(), }); } } } }#endregion Visualization.cefSha.ExecuteScriptAsync($@"
GetShelve({Newtonsoft.Json.JsonConvert.SerializeObject(VisualList)});"); }

　　需要注意的是該代碼塊的最后一行，這是我們用前端方法的方式，Visualization是我們剛才的頁(yè)面，我們直接調(diào)用靜態(tài)CefSha然后執(zhí)行它的異步方法，其中是直接執(zhí)行的Js，它和Wpf自帶的WebBrowser還不一樣，微軟的WebBrowser是高度封裝的，而cefsha是高度開(kāi)源的，這一塊不得不贊了。

　　前臺(tái)如何請(qǐng)求后臺(tái)呢？首先在頁(yè)面加載的時(shí)候配置下bound對(duì)象。
<script> window.onload = function () { loadScrollWidth(2); // 新式注入
CefSharp.BindObjectAsync("bound"); } </script>
隨后我們就可以通過(guò)bound這個(gè)對(duì)象來(lái)請(qǐng)求后臺(tái)了
bound.GetobjBySline_Code(Sline_Code);
就以我來(lái)說(shuō)，千萬(wàn)不要拿Jquery和Vue一起用，真的是太糟心了..
<body> <div class="container" id="app" style="max-width: 1600px;"> <div class="
row"> <div class="col-lg-3"> <div class="card"> <h3 class="card-img-top headtext
">清單</h3> <div class="card-body"> <table class="table table-striped"> <thead>
<tr> <th scope="col">分類(lèi)名稱</th> <th scope="col">數(shù)量</th> </tr> </thead> <tbody>
<tr v-for="(item,index) in goods_item"> <th scope="row"
>{{item.goods_Name}}</th> <td>{{item.num}}</td> </tr> </tbody> </table> </div>
</div> </div> <divclass="col-lg-9" style="overflow: scroll;"> <div class="row
line_div"> <div class="row" style="font-size: 20px;background-color:
#CCC;width: 100%;"> <ul class="nav nav-pills nav-fill" id="nav_list"> <li class=
"nav-item" v-for="(item,index) in line_item"> <!-- 如果 index 1--> <a class="
nav-link active" key="item.Sline_code" @click="toggle(index,item)" v-if="
index==0">{{item.Sline_name}}</a> <!-- index 2 n --> <a class="nav-link" key="
item.Sline_code" @click="toggle(index,item)" v-if="index!=0"
>{{item.Sline_name}}</a> </li> </ul> </div> <divclass="row" style="margin-left:
0;" id="VisualBody"> <div class="colums" v-for="item in reversedMessage"> <div
class="row"> <img src="tx_3.png"> <div class="table_div"> <table class="
custormTable" style="margin-top: 40px;" :id="item.code"> </table> </div> </div>
<divclass="row" style="background-image: url('tx_2.png');width:
556px;height:464px;background-repeat: repeat-y;"> </div> <div class="row"> <img
src="tx_1.png"> <div class="hj_center"> <h3>{{item.name}}</h3> </div> </div>
</div> </div> </div> </div> </div> </div> </body> <script> window.onload =
function () { loadScrollWidth(2); // 新式注入 CefSharp.BindObjectAsync("bound"); }
</script> <script> function loadScrollWidth(num) { var tags =
document.getElementsByClassName('line_div')[0]; tags.style.width = num * 590 + '
px'; } function changedom(listdata,shelvedata) { var num = 1; $(".custormTable"
).html(""); shelvedata.shift(); for (var i = 0; i < shelvedata.length; i++) {
var shelve_code = shelvedata[i].shelve_code; //不管如何都是循環(huán)4X4 for (var y = 0; y < 4
; y++) { var goodshtml = '<tbody><tr class="store_goodsName">'; var numhtml = '
<tr class="store_goodsId">' numhtml += "<td>" + num + "</td>"; numhtml += "<td>"
+ (num +1) + "</td>"; numhtml += "<td>" + (num + 2) + "</td>"; numhtml += "<td>
" + (num + 3) + "</td>"; numhtml = numhtml + '</tr>'; for (var g = 0; g < 4; g++
) {var obj = listdata.find(item => item.shelve_layer == y && item.shelve_grid
== g && item.shelve_code == shelve_code); if (obj != null) { if (obj.isHas ==
true) { goodshtml = goodshtml + "<td>" + obj.goods_name + "</td>"; } } else {
goodshtml= goodshtml + "<td></td>"; } } goodshtml = goodshtml + '</tr>' +
numhtml +'</tbody>'; var my_element = $("#" + shelve_code); $("#" +
shelve_code).append(goodshtml); num= num + 4; } } } </script> </html> <script>
var app = new Vue({ el: "#app", data: { m: "hello", line_item: [],//列
goods_item: [],//商品列表+num shelve_list: [],//貨架列表 Listdata: [],//商品列表
},mounted() {//全局鉤子引用 window.getalert = this.getalert; window.getgoods = this
.getgoods; window.GetShelve= this.GetShelve; window.DBTwo = this.DBTwo;
},methods: { getalert: function (list) {this.line_item = typeof list == 'string'
? JSON.parse(list) : list; },toggle:function(index,item){ $(".nav-item a"
).each(function () { $(this).removeClass("active"); }); $(".nav-item a"
).eq(index).addClass('active'); //item 對(duì)象 Sline_Code 【字段】 var Sline_Code =
item.Sline_code;//調(diào)用完之后C#會(huì)找我們的一個(gè)方法然后將參數(shù)帶過(guò)來(lái) bound.GetShelveDetail(Sline_Code);
//請(qǐng)求后臺(tái)，讓后臺(tái)直接調(diào)用一個(gè)方法去加載列表。 bound.GetobjBySline_Code(Sline_Code); this
.Wecas(index, item); },Wecas: function (index, item) { $(".nav-item a"
).each(function () { $(this).removeClass("active"); }); $(".nav-item a"
).eq(index).addClass('active'); //item 對(duì)象 Sline_Code 【字段】 var Sline_Code =
item.Sline_code;//調(diào)用完之后C#會(huì)找我們的一個(gè)方法然后將參數(shù)帶過(guò)來(lái) bound.GetShelveDetail(Sline_Code);
//請(qǐng)求后臺(tái)，讓后臺(tái)直接調(diào)用一個(gè)方法去加載列表。 bound.GetobjBySline_Code(Sline_Code); },getgoods:
function (goods_list) {//該方法是返回貨架有的物品 this.goods_item = typeof goods_list == '
string' ? JSON.parse(goods_list) : goods_list; }, GetShelve: function (list) {
this.Listdata = list; let obj = {}; list = list.reduce((cur, next) => {
obj[next.shelve_code]? "" : obj[next.shelve_code] = true && cur.push(next);
return cur; }, []); this.shelve_list = typeof list == 'string' ?
JSON.parse(list) : list; changedom(this.Listdata, this.shelve_list); } },
computed: {//所有的貨架列出來(lái) reversedMessage: function () { var array = []; for(var i=
0;i<this.shelve_list.length;i++){ //判斷是否name是不是有 if (this
.shelve_list[i].shelve_name !=null) { var obj = { name: this
.shelve_list[i].shelve_name, code :this.shelve_list[i].shelve_code }
array.push(obj); } }if (array.length < 2) { loadScrollWidth(2); } else {
loadScrollWidth(array.length); }return array; } } }); </script>
　　前后端交互最好是前端請(qǐng)求后端，然后讓后端執(zhí)行前端的Js帶上參數(shù)。

需要注意的cefsharp初次調(diào)用js的是?cefSha.ExecuteScriptAsyncWhenPageLoaded($"
getalert({str});");??我也是醉?

　　還有就是在開(kāi)發(fā)中一定想要F12 看看代碼運(yùn)行狀況如何或者要調(diào)試。
class CEFKeyBoardHander : IKeyboardHandler { public bool
OnKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type,int
windowsKeyCode,int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey) {
if (type == KeyType.KeyUp && Enum.IsDefined(typeof(Keys), windowsKeyCode)) { var
key = (Keys)windowsKeyCode; switch (key) { case Keys.F12:
browser.ShowDevTools();break; } } return false; } public bool
OnPreKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type,int
windowsKeyCode,int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey, ref
bool isKeyboardShortcut) { return false; } }
ok就這樣·~效果圖



?

• ? 上一篇：.NET----錯(cuò)誤和異常處理機(jī)制
• ? 下一篇：【經(jīng)驗(yàn)分享】ASP.NET 的 Page_Load 執(zhí)行了2次，真的（啟用了表單驗(yàn)證Form Authentication）！