相信大家都知道通过套个WebView来让WPF应用展示Web内容。但在这里介绍的是通过BeetleX.WebFamily组件直接在WPF项目中编写Vue web应用并直接发布成windows程序运行。
准备工作
既然是要展示Web就需要有一个WebBrowser控件，不过.net core自带的内核太旧了无法支持Vue的使用。为了解决这一问题同样使用MS自家提供的WebView2组件，可以通过以下链接查看控件的使用
https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf
创建项目
在开发的电脑上安装完成WebView2 Runtime后就可以进行WPF中整合VUE应用开发，首先创建一个WPF项目并引用BeetleX.WebFamily。
然后在项目中定义一个views目录用于存放index.html和相关功能的*.vue文件。
创建内置HTTP服务
创建项目后需要在WPF中集成一个HTTP服务用于提供vue的web功能处理。可以在MainWindows的Loaded方法中创建相关服务
private void Window_Loaded(object sender, RoutedEventArgs e){ host = new WebHost(); host.Setting(o => { o.SetDebug(); o.Port = 8082; o.LogLevel = EventArgs.LogType.Error; o.WriteLog = true; o.LogToConsole = true; }) .Initialize(s => { //注册程序集中所有控制器 //s.Register(typeof(MainWindow).Assembly); //把当前窗体注册为控制器 s.ActionFactory.Register(this); //注册Vue文件资源 s.GetWebFamily().AddAssemblies(typeof(MainWindow).Assembly); //s.GetWebFamily().AddScript("echarts.js"); //添加javascript文件 //s.GetWebFamily().AddCss("website.css"); //添加css文件 s.Vue().Debug(); }).Completed(s => { this.Dispatcher.Invoke(() => { if (webView != null && webView.CoreWebView2 != null) { webView.CoreWebView2.Navigate("http://localhost:8082/"); } }); }); host.Run(true);}在服务启动完成后重新刷新WebView对应的路径。
定义主页面
在项目中需要有一个首页来引导应用加载，需要在views中添加一个index.html页面，页面具体内容如下。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>BeetleX WPF-VUEtitle> <link href="/css/beetlex-v1.css" rel="stylesheet" /> <script src="/js/beetlex-v1.js">script>head><body> <div id="app"> <hello>hello> div> <script> page = new Vue({ el: '#app', data: { } });script>body>html>css和js引用是固定路径，这是由BeetleX.WebFamily所提供。
Vue组件定义
基础工作准备好后就可以编写相关功能的Vue组件，只需要在view构建相应*.vue即可，对应的文件名即是Vue的组件名称；这个vue文件在编写上和基于webpack vue cli还是有些不同的，具体格式如下:
<div> <el-form :inline="true" size="mini" :model="record" label-width="120px" ref="dataform"> <el-form-item label="用户名" prop="name" :rules="name_rules"> <el-input size="mini" v-model="record.name">el-input> el-form-item> <el-button size="mini" style="padding-left:10px; padding-right:10px;" @click="submitForm">确定el-button> el-form> <p>{{hello.result}}p>div><script> { props: [], data(){ return { name_rules: [{ required: true, message: '值不能为空！', trigger: 'blur' },], record: { name: null, }, hello: new beetlexAction('/hello', null, '') }; }, methods: { submitForm() { this.$refs['dataform'].validate((valid) => { if (valid) { this.hello.asyncget(this.record).then(r => { this.resetForm(); }); } }); }, resetForm() { this.$refs['dataform'].resetFields(); } }, mounted(){ } }script>以上是一个简单的hello world组件。具体可以查看一站式Web开发套件BeetleX.WebFamily
运行
当Vue功能编写完成后即可以运行wpf程序，当内http服务加载完成后即可在wfp窗体的WebView控件中显示相关vue页面内容。
当wpf程序启后可以继续添加或修改vue文件，这些文件修改无须重启程序只需要刷新WebView内容即可以加载看到最新的结果。如果WebView查看或调方式不方便还可以直接用浏览器访问相关端口地址查看结果。
通讯交互
可以直接在MainWindows中定义控制器方法，并提供给Vue用ajax或websocket访问。
总结
以上示例只是大概展示了wpf中如何使用BeetleX.WebFamily进行嵌入web的ui开发。这样的好处是可直接在一个app中即可完成所有工作，并不需要借助于第三方的HTTP服务；再结合.net 5.0可以直接把程序编译成单文件独立运行，这样就有着更方便的部署方式(提醒:安装WebView2 Runtime)。
以下是针对AdminTheme的WPF打包应用示例：
详细示例代码
https://github.com/IKende/BeetleX-Samples
【BeetleX通讯框架代码详解】
【WebApi示例扩展】
BeetleX
开源跨平台通讯框架(支持TLS)
轻松实现高性能:tcp、http、websocket、redis、rpc和网关等服务应用
https://beetlex.io
如果你想了解某方面的知识或文章可以把想法发送到
henryfan@msn.com|admin@beetlex.io
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
