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`
            }])
        }
    },
相关推荐
耶啵奶膘29 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript