vue.js 前端 javascript winform使用CefSharp嵌入VUE网页并交互

1、NuGet添加CefSharp

如果下载慢或失败可以更新下载源

腾讯资源https://mirrors.cloud.tencent.com/nuget/华为资源https://repo.huaweicloud.com/repository/nuget/v3/index.json

 2、将项目平台改为X64

3、在winform窗体添加cef

using CefSharp;

using CefSharp.WinForms;

using Newtonsoft.Json;

using System;

using System.Windows.Forms;

namespace WindowsFormsApp2

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

}

ChromiumWebBrowser browser;

private void Form1_Load(object sender, EventArgs e)

{

if (!Cef.IsInitialized)

{

//初始化CEF

var settings = new CefSettings();

settings.Locale = "zh-CN";

CefSharp.Cef.Initialize(settings);

browser = new ChromiumWebBrowser(AppDomain.CurrentDomain.BaseDirectory + @"\dist\index.html");

browser.Dock = DockStyle.Fill;

this.Controls.Add(browser);

//隐藏右击菜单

browser.MenuHandler = new ChromMenuHandler();

//注册对象到JS中，JS与窗体交互

BoundObject boundObject = new BoundObject();

browser.JavascriptObjectRepository.Register("csharpObj", boundObject, true);

//页面加载完事件

browser.FrameLoadEnd += Browser_FrameLoadEnd;

}

}

private void Browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)

{

//调用js里的函数

var data = new {name="张三" };

var jsetting = new JsonSerializerSettings();

jsetting.NullValueHandling = NullValueHandling.Ignore;

string js = "window.SetData(" + JsonConvert.SerializeObject(data, jsetting) + "," + JsonConvert.SerializeObject(data, jsetting) + ")";

var task = browser.EvaluateScriptAsync(js);

}

}

}

ChromMenuHandler

using CefSharp;

namespace WindowsFormsApp2

{

///

class ChromMenuHandler : IContextMenuHandler

{

public void OnBeforeContextMenu(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)

{

model.Clear();

}

public bool OnContextMenuCommand(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)

{

return false;

}

public void OnContextMenuDismissed(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame)

{

}

public bool RunContextMenu(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)

{

return false;

}

}

}

BoundObject

using System;

namespace WindowsFormsApp2

{

///

class BoundObject

{

public String test(string data) {

return "true";

}

}

}

4、vue代码编写

5、打包vue并放到项目下并设置复制到输出目录

6、打包vue时去除后缀  vue.config.js加以下代码

chainWebpack: config => {

if (process.env.NODE_ENV === 'production') {

config.output.filename('js/[name].js').end();

config.output.chunkFilename('js/[name].js').end();

config.plugin('extract-css').tap(args => [{

filename: `css/[name].css`,

chunkFilename: `css/[name].css`

}])

}

},

好文链接

 您阅读本篇文章共花了：