Blazor 混合开发_MAUI+Vue_WPF+Vue

MAUI+Vue 混合开发

  • 背景
    • 混合开发的核心
    • 为什么必须使用 wwwroot 文件夹放置 Web 项目文件
  • 创建 MAUI 项目
    • 创建 wwwroot 文件夹
    • 服务注册
    • 创建 _import.razor
    • 添加 Main.razor 组件
    • 修改 MainPage.xaml 文件
  • 创建 WPF 项目
    • 创建 wwwroot 文件夹
    • 服务注册
    • 创建 _import.razor
    • 添加 Shell.razor 组件
    • 修改 MainWindow.xaml 文件
  • 创建 Vue 项目
    • 修改创建好的 Vue 项目
    • 执行 npm run build 命令
    • Copy dist
    • 修改 index.html 内容
  • 效果预览

背景

  在 MAUI 微软的官方方案是使用 Blazor 开发,但是当前市场大多数的 Web 项目使用 Vue、React 等技术构建,用Blazor重写整个项目并不现实。

  Vue 是当前流行的 Web 框架, 简单来说是一套模板引擎,利用 “模板” 和 “绑定” 两大特性实现Web页面 MVVM 模式开发。利用 .NET MAUI 框架可以将 Vue 应用嵌入到 Web 容器中,可以实现跨平台的混合开发。

混合开发的核心

  • 混合开发的核心工作是构建 Web 与 .NET 的互操作,我们将利用 Blazor 引擎的如下功能:
    • 资源的统一管理
    • js 代码的注入
    • js 调用 C# 代码
    • C# 调用 js 代码

为什么必须使用 wwwroot 文件夹放置 Web 项目文件

这个文件夹将是混合开发Web部分的根目录,这个名称不能随便定义
在这里插入图片描述

Microsoft.AspNetCore.Components.WebView.Maui 库会将 wwwroot 文件夹里的内容作为 Maui 资源(MauiAsset)类型设置标签,编译器则会根据 MauiAsset 标签将这些内容打包进各个平台的资源文件夹。

创建 MAUI 项目

项目名字 MAUI.Vue.hybirddev
在这里插入图片描述
创建完成后编辑Hybrid.Maui.csproj,在Sdk最末尾加上.Razor,VS 会自动安装Microsoft.AspNetCore.Components.WebView.Maui 依赖包
不要手动 Nuget 添加这个包,否则程序无法运行
在这里插入图片描述
在这里插入图片描述

创建 wwwroot 文件夹

创建之后会自动变成网络资源文件夹在这里插入图片描述

服务注册

  • 使用扩展方法 builder.Services.AddMauiBlazorWebView() 对 BlazorMauiWebView 组件服务进行注册
using Microsoft.Extensions.Logging;namespace MAUI.Vue.hybirddev
{public static class MauiProgram{public static MauiApp CreateMauiApp(){var builder = MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureFonts(fonts =>{fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");});builder.Services.AddMauiBlazorWebView(); // 注册#if DEBUGbuilder.Services.AddBlazorWebViewDeveloperTools();builder.Logging.AddDebug();
#endifreturn builder.Build();}}
}

创建 _import.razor

添加 → 类 → Razor 组件
在这里插入图片描述
导入 namespace

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Hybrid.Maui @*当前项目名称*@

添加 Main.razor 组件

  • 被JS调用的方法必须是静态的
  • Dispose 销毁页面资源,防止内存溢出
@inject IJSRuntime JSRuntime
@implements IDisposable@code {[JSInvokable]public static Task<string> Test(){return Task.FromResult("Maui Test Function");}public void Dispose(){}
}

修改 MainPage.xaml 文件

建立 BlazorWebView 控件铺满屏幕,并设置 HostPage 为Web部分的主页 index.html

<?xml version="1.0" encoding="utf-8" ?>
<ContentPagex:Class="Hybrid.Maui.MainPage"xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:Hybrid.Maui"Shell.NavBarIsVisible="False"><BlazorWebView HostPage="wwwroot/index.html"><BlazorWebView.RootComponents><RootComponent ComponentType="{x:Type local:Main}" Selector="#blazorApp" /></BlazorWebView.RootComponents></BlazorWebView></ContentPage>

创建 WPF 项目

项目名字 Hybrid.Wpf
在这里插入图片描述
创建完成后编辑Hybrid.Wpf.csproj,在Sdk最末尾加上.Razor
同时在项目文件的现有 <PropertyGroup> 中,添加 <RootNamespace>Hybrid.Wpf</RootNamespace> 标记
在这里插入图片描述

安装 Nuget 包 Microsoft.AspNetCore.Components.WebView.Wpf
在这里插入图片描述

创建 wwwroot 文件夹

创建之后会自动变成网络资源文件夹
在这里插入图片描述

服务注册

  • 通过依赖注入容器注入 AddWpfBlazorWebView() 服务
  • 在资源中添加已注册的服务 Resources.Add("services", Services)
  • 删除App.xaml 中的 StartupUri="MainWindow.xaml"
using System.Windows;
using Microsoft.Extensions.DependencyInjection;namespace Hybrid.Wpf
{/// <summary>/// Interaction logic for App.xaml/// </summary>public partial class App : Application{public App(){Services = ConfigureServices();Resources.Add("services", Services);}public new static App Current => (App)Application.Current;public IServiceProvider Services { get; }protected override void OnStartup(StartupEventArgs e){Services.GetRequiredService<MainWindow>().Show();}private static IServiceProvider ConfigureServices(){var serviceCollection = new ServiceCollection();serviceCollection.AddSingleton<MainWindow>();serviceCollection.AddWpfBlazorWebView();#if DEBUGserviceCollection.AddBlazorWebViewDeveloperTools();
#endifreturn serviceCollection.BuildServiceProvider();}}
}

创建 _import.razor

添加 → 类 → Razor 组件
在这里插入图片描述
导入 namespace

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Hybrid.Wpf @*Object Namespace*@

添加 Shell.razor 组件

  • 被JS调用的方法必须是静态的
  • Dispose 销毁页面资源,防止内存溢出
@inject IJSRuntime JSRuntime
@implements IDisposable@code {[JSInvokable]public static Task<string> Test(){return Task.FromResult("Wpf Test Function");}public void Dispose(){}
}

修改 MainWindow.xaml 文件

建立 BlazorWebView 控件铺满屏幕,并设置 HostPage 为Web部分的主页 index.html

<Windowx:Class="Hybrid.Wpf.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:local="clr-namespace:Hybrid.Wpf"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="Hybrid.Wpf"d:Height="200"d:Width="450"WindowStartupLocation="CenterScreen"mc:Ignorable="d"><blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}"><blazor:BlazorWebView.RootComponents><blazor:RootComponent ComponentType="{x:Type local:Shell}" Selector="#blazorApp" /></blazor:BlazorWebView.RootComponents></blazor:BlazorWebView></Window>

创建 Vue 项目

通过命令 npm create vue@latest 前提是已安装 Node.js
在这里插入图片描述

执行命令尝试运行项目
在这里插入图片描述

在这里插入图片描述

修改创建好的 Vue 项目

DotNet.invokeMethodAsync("Hybrid.Maui", "Test") 第一个参数是容器项目的 Namespace,第二个参数是要调用的方法。

<script setup>
import { RouterLink, RouterView } from 'vue-router';
import HelloWorld from './components/HelloWorld.vue';/*** 访问 Hybrid.Wpf 项目中的 Test 方法*/
async function getTest() {await DotNet.invokeMethodAsync("Hybrid.Maui", "Test").then(res => {console.log(res);});
}
</script><template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav><button @click="getTest">To Hybrid.Maui Test</button></div></header><RouterView />
</template><style scoped>
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>

执行 npm run build 命令

执行 npm run build 命令发布 Vue 项目
在这里插入图片描述

Copy dist

将 dist 文件夹下的所有文件复制到容器项目下的 wwwroot 文件夹下
在这里插入图片描述

修改 index.html 内容

  • JS、CSS 文件名一定要与编译后的文件名一致
  • head 中的 JS 导入添加 crossorigin="anonymous" 跨域支持
  • 在 body 中导入 _framework/blazor.webview.js 必须的,没有它玩不成
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="module" crossorigin="anonymous" src="/assets/index-lGWBURTF.js"></script><link rel="stylesheet" crossorigin href="/assets/index-bTbjHxa7.css">
</head>
<body><div id="app">Loading...</div><div id="blazorApp"></div><script src="_framework/blazor.webview.js"></script>
</body>
</html>

效果预览

点击 To Hydrid.Wpf Test 按钮就可以在控制台打印出 C# 代码中的返回值
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法设计与分析】——动态规划算法

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

【ps】新手 学 PS一本通

第一章 添加图像边框 1. 导入一张图片 2.选择 图像-画布大小 例&#xff1a;原图&#xff1a;720x820 填写画布大小&#xff1a;820x920 可以增加一个100x100的边框。 画布扩展颜色是扩展的颜色。 标尺工具 视图>标尺 或者使用 CTRL R 网格工具 视图-显示-网格 …

机器视觉系统选型-图像对比度

对于一个视觉系统来说&#xff0c;“黑白分明”的图像才是好图像。 选择适合的灯源&#xff0c; 使图像中待测特征反差最大化。

Pytorch项目,肺癌检测项目之一

项目目的&#xff1a;输入人体躯干的三维CT扫描作为输入数据&#xff0c;如果存在肿瘤&#xff0c;希望输出疑似恶性肿瘤的位置。 项目背景&#xff1a;发现处于早期的肺癌对病人生存率有巨大影响&#xff0c;但很难大规模进行。审查CT数据的工作必须由训练有素的专家进行&…

C# NPOI导出dataset----Excel绘制Chart图表

仅限XLSX 2007以后版本&#xff08;2007之前版本不支持&#xff09; 1、判断文件夹是否存在&#xff0c;不存在则创建 //Application.StartupPath当前项目根目录 if (!Directory.Exists(Application.StartupPath "\Excel")) { …

点击筛选框动态增加 多条可输入Table列 以及通过操作数组改造数据

点击筛选框动态增加 多条可输入Table列 以及通过操作数组改造数据 <el-col :span"8" class"tab_group"><el-form-item label"动态筛选"><el-select v-model.trim"ruleForm.flowType" placeholder"请选择" …

实战:使用 OpenCV 和 PyTesseract 对文档进行 OCR

随着世界各地的组织都希望将其运营数字化&#xff0c;将物理文档转换为数字格式是非常常见的。这通常通过光学字符识别 (OCR) 完成&#xff0c;其中文本图像&#xff08;扫描的物理文档&#xff09;通过几种成熟的文本识别算法之一转换为机器文本。当在干净的背景下处理打印文本…

麒麟信安日志轮询分割操作说明

1、背景介绍 由于模块上面硬盘容量有限&#xff0c;需要定时清理系统日志。为了方便用户使用&#xff0c;在系统中设定自动日志轮询操作&#xff0c;让日志占用容量由操作系统自动管理&#xff0c;用户无需担心日志太多把硬盘容量占满。 2、操作说明 新建需要分割的日志logr…

【大数据HA】HAProxy实现thrift协议HMS服务的高可用-附Chatgpt协助截图

背景 之前安装了HMS(Hive metastore service)&#xff0c;独立于hive运行&#xff0c;安装部署过程见我下面列出的另一篇文章&#xff0c;需要为它建立HA高可用功能。防止在访问时出现单点故障问题。 【大数据】Docker部署HMS(Hive Metastore Service)并使用Trino访问Minio-C…

学校和老师如何制作自己免费的成绩查询系统

在当今数字化的时代&#xff0c;许多学校都采用信息技术来管理和提高工作效率。其中&#xff0c;成绩查询系统是一个非常实用的工具&#xff0c;它可以让老师和学生们快速、方便地查询成绩。那么&#xff0c;学校和老师如何制作自己免费的成绩查询系统呢&#xff1f;本文将为你…

微软官方镜像下载大全(windows iso 官方镜像)

原本只是想下一个Windows Server 2022中文版的镜像&#xff0c;后面发现要么就是慢得一批的某盘&#xff0c;要么就是磁力&#xff0c;我想直接下载简简单单&#xff0c;找了一圈没有找到。官网下载需要注册、登录乱七八糟&#xff0c;最终终于找到下载方法了&#xff0c;适用于…

关于新发现的ThirdEye基于Windows恶意软件窃取敏感数据动态情报

一、基本内容 近期&#xff0c;Fortinet FortiGuard Labs发现了一款名为ThirdEye的先前未记录的基于Windows的信息窃取程序。该恶意软件伪装成PDF文件&#xff0c;其俄语名称为“CMK Правила оформления больничных листов.pdf.exe”&#x…

c语言:输出一个正方形|练习题

一、题目 输入长度num&#xff0c;输出一个边长为num的正方形 二、思路分析 1、输出的正方形分为三部分&#xff0c;包括&#xff1a; 2、第一行、中间的num-2行&#xff0c;以及最后一行 三、代码图片【带注释】 四、源代码【带注释】 #include <stdio.h> //思路&#…

字符设备驱动开发-注册-设备文件创建

一、字符设备驱动 linux系统中一切皆文件 1、应用层&#xff1a; APP1 APP2 ... fd open("led驱动的文件"&#xff0c;O_RDWR); read(fd); write(); close(); 2、内核层&#xff1a; 对灯写一个驱动 led_driver.c driver_open(); driver_read(); driver_write(…

JVM常见面试题

基础题 能不能给我讲一下JVM完整的GC流程 我们先从Minor GC说起吧&#xff0c;当对象分配到Eden区发现Eden区空间满了&#xff0c;此时就会触发Minor GC&#xff0c;将非存活对象回收&#xff0c;再将存活对象放到From区(S1区)&#xff0c;再将新创建的对象放到Eden区。 随着…

基于ssm重庆理工大学心理咨询管理子系统的分析与实现论文

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;心理咨询预约信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能…

Java_集合进阶Map实现类

一、Map集合 已经学习了Map集合的常用方法&#xff0c;以及遍历方式。 下面学习的是Map接口下面的是三个实现类HashMap、LinkedHashMap、TreeMap。实际上这三个实现类并没有什么特有方法需要我们学习&#xff0c;它们的方法就是前面学习Map的方法。这里我们主要学习它们的底层…

机场信息集成系统系列介绍(6):机场协同决策支持系统ACDM

目录 一、背景介绍 1、机场协同决策支持系统是什么&#xff1f; 2、发展历程 3、机场协同决策参与方 4、相关定义 二、机场协同决策ACDM的建设目标 &#xff08;一&#xff09;机场协同决策支持系统的宏观目标 1、实现运行数据共享和前序航班信息透明化 2、实现地面资源…

H5小游戏加固方案

今年的中国游戏产业年会上&#xff0c;小游戏成了万众瞩目的行业新风口。据伽马数据统计&#xff1a;2023年小游戏市场规模可达200亿元&#xff0c;同比增长300% 。 小游戏有着分发更精准、用户转化率更高、研发成本更低、场景适用性更强等优势&#xff0c;具备巨大的市场潜力…

抖店只能用官方电子面单?2024抖店玩法解读,附面单使用教程

我是王路飞。 正在做抖店的商家&#xff0c;应该都发现一件事情了&#xff0c;那就是现在的抖店好像不让拍单了&#xff0c;只能使用抖音的电子面单&#xff0c;打单发货。 说实话&#xff0c;这种情况已经出现过太多次了&#xff0c;导致很多商家不以为然。 我曾经也说过&a…