欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用CefSharp在.NET中嵌入Google kernel

程序员文章站 2022-04-09 22:22:57
使用CefSharp可以在.NET轻松的嵌入Html,不用担心WPF与Winform 控件与它的兼容性问题,CefSharp大部分的代码是C#,它可以在VB或者其他.NET平台语言中来进行使用。 近几天来,公司项目中需要使用WebBrowser,其中考虑了几个控件,如1.Winform中的WebBr ......

  使用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中添加的。

使用CefSharp在.NET中嵌入Google kernel

最后一步,在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就这样·~效果图

使用CefSharp在.NET中嵌入Google kernel