wpf vue cef 交互

本文介绍如何在WPF用户控件中使用CefSharp加载网页,并实现实时通信。通过CefSharp的JavascriptObjectRepository注册对象,实现与Vue组件的交互,包括错误处理和关闭操作。
<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}" 
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
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值