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

cs 复制代码
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

cs 复制代码
using CefSharp;

namespace WindowsFormsApp2
{
    /// <summary>
    /// 禁用右击菜单
    /// </summary>
    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

cs 复制代码
using System;

namespace WindowsFormsApp2
{
    /// <summary>
    /// js调用窗体方法
    /// </summary>
    class BoundObject
    {
        public String test(string data) {
            return "true";
        }
    }
}

4、vue代码编写

javascript 复制代码
<script>
export default {
  data() {
    return {};
  },

  mounted: function () {
    //让窗体可以调用js的函数
    window.SetData = this.SetData;
    //拿到窗体注册的对象
    this.$nextTick(function () {
      this.bindObjectAsync();
    });
  },
  methods: {
      SetData(option, option1) {
      return "拿到数据了";
    },
    test(data){
csharpObj.test(JSON.stringify(data)).then(function (actualResult) {
        //弹出获取到的C#方法返回的参数
        if (actualResult == "true") {

        } else {

        }
      });
},
    async bindObjectAsync() {
      try {
        //名字要与c#里注册的名字一致
        await CefSharp.BindObjectAsync("csharpObj");
        console.info(csharpObj);
      } catch (error) {
        console.warn(error);
      }
    },
  }
}
</script>

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

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

javascript 复制代码
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`
            }])
        }
    },
相关推荐
qq_364371722 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森1 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象4 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥5 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森6 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿7 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡8 小时前
commitlint校验git提交信息
前端
天天进步20158 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket