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框架构建 如有会这方面的人,可以自行扩展
在现代桌面应用程序开发中,将 Vue.js 这类前端框架与 WPF(Windows Presentation Foundation)结合使用,已经成为一种趋势。这种集成方式利用了 Vue.js 的响应式界面和组件化架构,以及 WPF 强大的 UI 渲染能力,从而提供更现代化的用户体验。 ### 使用 CefSharp 嵌入 Vue.jsWPF 中 一种常见的做法是通过 **CefSharp**,这是一个基于 Chromium 的 .NET 浏览器控件,可以在 WPF 应用中嵌入 Web 内容。具体步骤包括: 1. **创建 Vue 项目**:使用 Vue CLI 或 Vite 创建一个 Vue 3 项目,并通过构建生成静态资源(HTML、CSS、JS 文件)。 2. **集成到 WPF**:在 WPF 项目中引入 CefSharp.Wpf 包,并在 XAML 中添加 `ChromiumWebBrowser` 控件。 3. **加载本地 Vue 构建文件**:将 Vue 构建后的 `dist` 文件夹嵌入到 WPF 项目资源中,并通过 `CefSharp` 加载本地文件系统中的 `index.html`。 ```xml <Window x:Class="WpfApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf" Title="MainWindow" Height="450" Width="800"> <Grid> <cef:ChromiumWebBrowser x:Name="browser" Address="file:///./dist/index.html" /> </Grid> </Window> ``` ### Vue.jsWPF 的通信机制 为了实现 Vue 前端与 WPF 后端之间的交互,可以使用 CefSharp 提供的 **JS 引擎绑定** 功能。例如,WPF 可以通过 `RegisterJsObjectWithBrowser` 方法将 C# 对象暴露给 Vue 的 JavaScript 环境。 ```csharp browser.JavascriptObjectRepository.Register("wpfApi", new WpfApi(), isAsync: false); ``` 在 Vue 中,可以通过 `chrome.webview` 或全局对象调用 WPF 提供的方法: ```javascript window.wpfApi.invokeMethod("Hello from Vue"); ``` ### 使用 Prism 框架实现模块化架构 结合 Prism 框架可以实现更复杂的 WPF 应用程序架构,尤其适合需要模块化、依赖注入和事件聚合的大型项目。Vue 作为 UI 层,WPF 作为宿主和业务逻辑层,两者结合可以构建高度可维护和可扩展的应用程序。 ### 性能优化与注意事项 - **打包与部署**:确保 Vue 构建后的资源文件与 WPF 项目结构兼容,避免路径问题。 - **跨平台兼容性**:虽然 CefSharp 支持 Windows 平台,但如果需要支持 macOS 或 Linux,则需考虑其他嵌入式浏览器方案。 - **安全性**:避免在 Vue 中直接暴露敏感的 WPF API,防止潜在的安全漏洞。 - **调试支持**:启用 CefSharp 的 DevTools 可以方便调试 Vue 页面,提升开发效率。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值