wpf vue cef 交互

本文介绍如何在WPF用户控件中使用CefSharp加载网页,并实现实时通信。通过CefSharp的JavascriptObjectRepository注册对象,实现与Vue组件的交互,包括错误处理和关闭操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<UserControl x:Class="LabInOnePC.View.UcSampleBankView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
             mc:Ignorable="d" Height="900" Width="1100">
    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="48"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Cursor="Hand" Width="42" Height="42" BorderThickness="0" VerticalAlignment="Top" 
                    HorizontalAlignment="Right" x:Name="btnClose">
            <Button.Background>
                <ImageBrush ImageSource="/Images/PC/Close1.png"/>
            </Button.Background>
        </Button>
        <cef:ChromiumWebBrowser x:Name="webBrowser" Grid.Row="1"/>
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="gdLoad" Grid.Row="1">
            <StackPanel>
                <Image Source="/Images/PC/LoadingData.png" Width="{StaticResource LoadingImageWidth}" Height="{StaticResource LoadingImageHeight}"></Image>
                <TextBlock Margin="0,14,0,0" Text="加载中…" Foreground="#666666" FontSize="{StaticResource FontSize12}" HorizontalAlignment="Center"></TextBlock>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl> 

页面xmal.cs

public partial class UcSampleBankView : UserControl
    {
        public UcSampleBankView()
        {
            InitializeComponent();

            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            CefSharpSettings.ConcurrentTaskExecution = true;

            string address =ConfigurationManager.AppSettings["SampleBank"] + "?token=" + ViewModel.Global.CurrentUser.token;   //"http://localhost:8080/" + "?token=" + ViewModel.Global.CurrentUser.token;
            webBrowser.Address = address;

            webBrowser.LoadError += _webView_LoadError;

            webBrowser.FrameLoadEnd += (sender, e) =>
            {
                DispatcherHelper.CheckBeginInvokeOnUI(() =>
                {
                    gdLoad.Visibility = System.Windows.Visibility.Collapsed;
                });
                this.Dispatcher.Invoke(new Action(delegate
                {
                    webBrowser.WebBrowser.ExecuteScriptAsyncWhenPageLoaded(@"(async function() {await CefSharp.BindObjectAsync('callbackObj', 'bound');})();");
                }));
            };
            webBrowser.MenuHandler = new MenuHandler();

            ////注册js对象据说,79版本以上的注册方法是下面这句
            webBrowser.JavascriptObjectRepository.Register("bound", new FormMainProcess(this), false);

            btnClose.Click += (sender, e) =>
            {
                this.ResultData?.Invoke(false);
                DispatcherHelper.CheckBeginInvokeOnUI(() =>
                {
                    xxx.Close();
                });
                OnClose();
            };
        }

        public void OnClose()
        {
            try
            {
                webBrowser.CloseDevTools();
                webBrowser.GetBrowser().CloseBrowser(true);
            }
            catch { }

            try
            {
                if (webBrowser != null)
                {
                    webBrowser.Dispose();
                }
            }
            catch { }
        }

        public void _webView_LoadError(object sender, CefSharp.LoadErrorEventArgs e)
        {
            MessageBox.Show("加载页面失败,请退出客户端进行重试");
            webBrowser.Dispose();
        }
    }


   vue传过来数据进行处理

[ComVisible(true)]
    public class FormMainProcess : IResultObject
    {
        UserControl control;
        public Action<object> ResultData { get; set; }
        public FormMainProcess(UserControl user)
        {
            control = user;
        }


        public void speakMsg(string message)
        {
            if (!string.IsNullOrEmpty(message))
            {
                var result = false;
                ViewModel vm = new ViewModel();
                if (proId != null)
                {
                    var resultList = JsonConvert.DeserializeObject<List<VoModel>>(message);
                    vm.List = resultList;

                    result = vm.xxx();
                }
   

                if (result)
                {
                    var view = control as UcSampleBankView;
                    DispatcherHelper.CheckBeginInvokeOnUI(() =>
                    {
                        view.OnClose();
                        view.ResultData?.Invoke(result);
                        ControlManager.Close();
                    });
                }
            }
        }
    }


   

 /// <summary>
    /// cef菜单事件
    /// </summary>
    public class MenuHandler : CefSharp.IContextMenuHandler
    {

        void CefSharp.IContextMenuHandler.OnBeforeContextMenu(CefSharp.IWebBrowser browserControl, CefSharp.IBrowser browser, CefSharp.IFrame frame, CefSharp.IContextMenuParams parameters, CefSharp.IMenuModel model)
        {
            model.Clear();
        }

        bool CefSharp.IContextMenuHandler.OnContextMenuCommand(CefSharp.IWebBrowser browserControl, CefSharp.IBrowser browser, CefSharp.IFrame frame, CefSharp.IContextMenuParams parameters, CefSharp.CefMenuCommand commandId, CefSharp.CefEventFlags eventFlags)
        {
            //throw new NotImplementedException();
            return false;
        }

        void CefSharp.IContextMenuHandler.OnContextMenuDismissed(CefSharp.IWebBrowser browserControl, CefSharp.IBrowser browser, CefSharp.IFrame frame)
        {
            //throw new NotImplementedException();
        }

        bool CefSharp.IContextMenuHandler.RunContextMenu(CefSharp.IWebBrowser browserControl, CefSharp.IBrowser browser, CefSharp.IFrame frame, CefSharp.IContextMenuParams parameters, CefSharp.IMenuModel model, CefSharp.IRunContextMenuCallback callback)
        {
            return false;
        }
    }
   

 定义交互模型

 public class SimpleModel
    {
        public long? pageNum { get; set; }
        public long? id { get; set; }
        public long? categoryId { get; set; }
        public string name { get; set; }
        public string amount { get; set; }
        public string no { get; set; }
    }

vue

window.bound.speakMsg(JSON.stringify(this.selectMap));
console.log(JSON.stringify(this.selectMap));

GIF动态预览图: 开发环境: E2EE支持库 (已集成) CEF框架(已集成) VUE -https://cn.vuejs.org/ (已集成) NodeJS (已集成) WebPack (已集成) HTML/CSS/JS (已集成) 易语言 (已集成) 易主程序源码参考 lib ---- CEF运行库,必须 (目录名禁止修改) server ---- 本地服务器网站目录,必须 图标 ---- 自带的图标,可删除 jingyi.e ---- 主程序源代码 精益论坛PC版DEMO.exe ---- 主程序成品,必须 Chromium Embedded Framework 3.ec ---- CEF调用模块 Installer32.dll ---- CEF 扩展DLL,必须 libtransfer.dll ---- CEF 扩展DLL,必须 以上标注“必须”为整个程序生产编译后的依赖项,否则无法正常运行 VUE界面源码参考 由于环境模块过大,所以不附带 初始化安装环境步骤: 1、请将当前目录的yarn.lock 删除 2、在当前目录下打开CMD,输入指令“yarn”回车即可自动安装环境 3、安装好环境包后,在当前目录执行CMD指令“yarn serve”回车即可运行调试 4、yarn build 命令 一键打包发布,发布后的内容在当前dist目录下,打包完成后会自动生成 5、将打包后的dist网页内容复制到,易语言主程序下的server目录替换即可 以上为有HTML,CSS,JS基础,以及会VUE框架的人使用,如果您不会VUE,您需要学习后在来操作。 我们已经把打包后的VUE成品界面内置到了主程序的server目录,您不需要对VUE源码项目做任何操作 您只需要运行主程序即可看到效果 该项目主要由易语言+CEF+VUE+E2EE来完成,懂这方面的人员可以自行修改源码,如果您不会也可以自己尝试修改,便于学习 界面UI部分是由前端VUE框架构建 如有会这方面的人,可以自行扩展
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值