winform使用CefSharp嵌入VUE网页并交互

这篇具有很好参考价值的文章主要介绍了winform使用CefSharp嵌入VUE网页并交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、NuGet添加CefSharp

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

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

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

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

 2、将项目平台改为X64

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

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
{
    /// <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

using System;

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

4、vue代码编写

<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并放到项目下并设置复制到输出目录

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

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

6、打包vue时去除后缀  vue.config.js加以下代码文章来源地址https://www.toymoban.com/news/detail-758026.html

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`
            }])
        }
    },

到了这里,关于winform使用CefSharp嵌入VUE网页并交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【小沐学C#】WPF中嵌入web网页控件(WebBrowser、WebView2、CefSharp)

    使用 Windows Presentation Foundation (WPF),你可以创建适用于 Windows 且具有非凡视觉效果的桌面客户端应用程序。 WPF 的核心是一个与分辨率无关且基于矢量的呈现引擎,旨在充分利用现代图形硬件。 WPF 通过一套完善的应用程序开发功能对该核心进行了扩展,这些功能包括可扩展应

    2024年02月03日
    浏览(55)
  • 【实用技巧】用Vue.js实现智能家居控制系统的前端交互,提高系统的稳定性

    作者:禅与计算机程序设计艺术 【实用技巧】用Vue.js实现智能家居控制系统的前端交互,提高系统的稳定性 1.1. 背景介绍 随着科技的快速发展,智能家居系统越来越受到人们的青睐。智能家居系统不仅能够提高人们的生活质量,还能节约能源、降低家庭开支。然而,智能家

    2024年02月15日
    浏览(62)
  • 前端VUE使用web3调用小狐狸(metamask)和合约(ERC20)交互

    1.创建vue项目 2.安装web3 npm install web3 3.项目web3 main.js 项目结构 页面代码中引用web3,倒入ERC20代币的abi 项目页面   调用小狐狸metamask演示   项目任何难题,可以加入qq群:981921011      

    2024年02月15日
    浏览(43)
  • VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

    目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11.初始化函数,页面加载完成时调用

    2024年02月03日
    浏览(61)
  • 使用vue+springboot+mybatis开发的信息管理系统,前端和后端是怎么进行交互的

    1. 前端向后端发送http请求。 2. 后端接收到请求后,通过mybatis从数据库中获取所需数据。 3. 后端将处理完的数据通过restful api返回给前端。 4. 前端根据后端返回的数据进行页面渲染。 具体来说,可以分为以下几个步骤: 前端使用vue.js作为基础框架,使用axios库向后端发送h

    2024年02月06日
    浏览(66)
  • 在前端开发中,何时应该使用 jQuery,何时应该使用 Vue.js

    如果您是最近才开始进入 Web 前端开发领域的开发人员,那么您可能会听说过 jQuery。jQuery 是一个小巧而功能强大的 JavaScript 库,旨在简化跨浏览器 DOM 操作、事件处理、动画效果和 AJAX 等方面的操作,可以让开发人员更轻松地开发出高质量的网站和 Web 应用程序。 何时应该使

    2024年02月02日
    浏览(48)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(56)
  • 「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

    本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站,包括页面扩展的逻辑,vue的官方路由vue-router的基本用法以及扩展用法 「Vue|网页开发|前端开发」01 快速入门:快速写一个Vue的HelloWorld项目 我们在进行网站开发的时候,大多数都是需要有多个页面

    2024年02月11日
    浏览(47)
  • 前端vue项目使用Decimal.js做加减乘除求余运算

    运算结果是Decimal对象,需要使用.toNumber()转为数字

    2024年04月13日
    浏览(59)
  • 关于android和vue.js交互

    本文使用webview框架AgentWeb 使用的Vue版本为vue3 使用的android sdk版本为33 从android 11 开始想要访问sd卡下的数据需要权限 权限请求方法为 使用以下方法注册接口 根据Android与Vue的交互的方法示例这篇文章最后中提到的互调的坑中得知因为Vue的问题Android调用Vue方法需要在window中暴

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包