wpf vue cef 交互

somethingGoWay

已于 2024-07-15 13:20:19 修改

阅读量736

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js c# wpf 交互

于 2021-03-23 09:34:42 首次发布

本文链接：https://blog.youkuaiyun.com/somethingGoWay/article/details/115109805

本文介绍如何在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));