使用CefSharp在.NET中嵌入Google kernel

　　使用CefSharp可以在.NET輕鬆的嵌入Html，不用擔心WPF與Winform 控制元件與它的相容性問題，CefSharp大部分的程式碼是C#，它可以在VB或者其他.NET平臺語言中來進行使用。

　　近幾天來，公司專案中需要使用WebBrowser,其中考慮了幾個控制元件，如1.Winform中的WebBrowser    2.WPF中的WebBrowser    3.WebKit.Net     4.CefSharp

　　Winform的WebBrowser放到專案中進行了實驗和處理，發現致命問題：AllowsTransparency = true 和 Webbrowser 等內建窗體顯示衝突，導致不發選擇，還有就是GC回收不及時，一下子就飆到了100MB+.

　　後來考慮WPF的webbrowser 它實際上還是封裝了Winform，有個嚴重的問題就是它一直置頂到最頂層，so，無法選擇。

　　再後來考慮WebKit.Net ，但發現已經N多年沒有更新，所以不在考慮...

　　最後跌跌撞撞跑到CefSharp，發現非常的坑啊！！竟然不支援AnyCPU，關鍵是我的專案中有的功能是必須AnyCpu啟動的啊！還好，官方在去年已經公佈了支援AnyCpu的方法。

　　首先Nuget引用cefsharp.WPF,它會自己引用Common，其他不用管。我們還需要再App.xaml.cs中新增程式碼來支援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)
        {
        }
    }

　　還沒完，之後你得在你專案的 *.csproj 中新增一行配置，它是在你的第一個PropertyGroup中新增的。

最後一步，在App.config中配置x86，當然不是說不支援CPU，剛剛App.xaml.cs中我們已經修改了啊。

<configuration>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <probing privatePath="x86"/>
    </assemblyBinding>
  </runtime>
</...>

 就現在我們在頁面中新增一個CefSharpBrowser在grid中，您需要在容器空間中新增name 標記。

 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");

            // 頁面載入完畢後開啟開發者工具
            cefSha.KeyboardHandler = new CEFKeyBoardHander();
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            NewMutliPage();
            this.grid.Children.Add(cefSha);//初始化
        }

前後端互動都是在NewMutliPage中搭起的橋樑，該程式碼是新版本的配置方式，大概是18年底，前後端的鉤子可以通過bound來偷取。

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()
    {
        // 新版本預設為 false
        CefSharpSettings.LegacyJavascriptBindingEnabled = true;
        // 把 TestClass 注入到單個頁面，名稱為 test
        _chromiumWebBrowser.RegisterJsObject("testold", new TestClass());
    }

 LegacyJavascriptBindingEnabled 該屬性就是讓WebBrowser與WPF支援js互動，否則不可以建立jsObject 這個物件。

在 RegisterJsObject 中我們是繫結的類，該類中是我們後臺向WebBrowser的所有資料方法。

public class JsEvent
    {
        /// <summary>
        /// 根據貨架列程式碼區查相關資訊
        /// </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.找到關於該列下所有的商品資訊
            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++)
            {
                //迴圈最大粒子，在這個最大粒子當中來組織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());
                        //如果未出庫的裡沒有這個 那就可以新增
                        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是我們剛才的頁面，我們直接呼叫靜態CefSha然後執行它的非同步方法，其中是直接執行的Js，它和Wpf自帶的WebBrowser還不一樣，微軟的WebBrowser是高度封裝的，而cefsha是高度開源的，這一塊不得不讚了。

　　前臺如何請求後臺呢？首先在頁面載入的時候配置下bound物件。

<script>
    window.onload = function () {
        loadScrollWidth(2);
        // 新式注入
        CefSharp.BindObjectAsync("bound");
    }
</script>

隨後我們就可以通過bound這個物件來請求後臺了

bound.GetobjBySline_Code(Sline_Code);

就以我來說，千萬不要拿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">分類名稱</th>
                                    <th scope="col">數量</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>
            <div class="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>
                    <div class="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>
                            <div class="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;
            //不管如何都是迴圈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 物件 Sline_Code 【欄位】
                var Sline_Code = item.Sline_code;
                //呼叫完之後C#會找我們的一個方法然後將引數帶過來
                bound.GetShelveDetail(Sline_Code);
                //請求後臺，讓後臺直接呼叫一個方法去載入列表。
                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 物件 Sline_Code 【欄位】
                var Sline_Code = item.Sline_code;
                //呼叫完之後C#會找我們的一個方法然後將引數帶過來
                bound.GetShelveDetail(Sline_Code);
                //請求後臺，讓後臺直接呼叫一個方法去載入列表。
                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: {
            //所有的貨架列出來
            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>

　　前後端互動最好是前端請求後端，然後讓後端執行前端的Js帶上引數。

需要注意的cefsharp初次呼叫js的是 cefSha.ExecuteScriptAsyncWhenPageLoaded($"getalert({str});");  我也是醉 

　　還有就是在開發中一定想要F12 看看程式碼執行狀況如何或者要除錯。

 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就這樣·~效果圖