CefSharp和Vue交互开发
一、Web端调用C#代码要实现Web端调用C#代码,CefSharp要求先定义一个对象,绑定到浏览器中。我们可以任意定义一个类,里面是需要在网页中调用的方法,如下所示:public class BoundObject{public void doSomething(string para){}}然后通过以下语句绑定到浏览器中:Browser.JavascriptObjectRepository.R
一、Web端调用C#代码
要实现Web端调用C#代码,CefSharp要求先定义一个对象,绑定到浏览器中。我们可以任意定义一个类,里面是需要在网页中调用的方法,如下所示:
public class BoundObject
{
public void doSomething(string para)
{
}
}
然后通过以下语句绑定到浏览器中:
Browser.JavascriptObjectRepository.Register("boundCef", new BoundObject(this), true, BindingOptions.DefaultBinder);
在上面的代码中,boundCef是在Web端使用的绑定对象名。
在Web端,调用的方法如下:
CefSharp.BindObjectAsync("boundCef");
boundCef.doSomething("para");
二、C#调用Web方法
首先需要在js代码里定义一个方法,如:
function doSomething(para){
}
然后在C#端直接调用:
Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("doSomething('para')");
但是前端使用Vue的话,组件里的方法没办法对外公开。这时候,可以使用自定义事件解决。在Vue组件里,添加事件侦听:
document.addEventListener("event_name", (ev) => {
let para = ev.detail.para;
});
然后在C#端这样调用:
Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("document.dispatchEvent(new CustomEvent('event_name', { detail: { para: 'para' } }));");
三、窗口事件的处理
窗口事件包括最小化、正常化、最大化和关闭等。如果在WPF里,使用了WindowStyle="None",窗口控制的按钮都在Web端,就需要处理这些动作。
点击窗口控制按钮时,调用C#代码里的控制方法,即可实现对窗口状态的控制。
另外,最大化不一定是点击最大化按钮才出现的,把窗口拖到顶部也会最大化。所以窗口当前是否最大化(显示正常化还是最大化按钮),需要侦听WPF窗口状态改变事件。
四、拖动标题栏的实现
在WPF里,侦听标题栏的MouseLeftButtonDown事件,然后调用DragMove()方法,即可实现窗口的拖动。但如果我们在Web端侦听mousedown事件,然后调用C#端的DragMove()方法,发现是行不通的。我们必须在WPF组件的MouseLeftButtonDown事件里写才行。
这里使用的方法是这样的:在界面上添加一个Path组件,背景几乎透明(背景色为#01FFFFFF),盖在CefSharp浏览器之上。Path的区域,刚好是标题栏所在的位置。这样,我们侦听这个Path组件的MouseLeftButtonDown事件即可。问题的难点可能是描述Path的区域。这个可以在Web端,通过getBoundingClientRect()方法,得到标题栏的区域,然后传给C#端。
更多推荐
所有评论(0)