背景

??在 MAUI 微軟的官方方案是使用 Blazor 開發(fā)，但是當(dāng)前市場大多數(shù)的 Web 項(xiàng)目使用 Vue、React 等技術(shù)構(gòu)建，用Blazor重寫整個(gè)項(xiàng)目并不現(xiàn)實(shí)。

??Vue 是當(dāng)前流行的 Web 框架， 簡單來說是一套模板引擎，利用 “模板” 和 “綁定” 兩大特性實(shí)現(xiàn)Web頁面 MVVM 模式開發(fā)。利用 .NET MAUI 框架可以將 Vue 應(yīng)用嵌入到 Web 容器中，可以實(shí)現(xiàn)跨平臺的混合開發(fā)。

混合開發(fā)的核心

• 混合開發(fā)的核心工作是構(gòu)建 Web 與 .NET 的互操作，我們將利用 Blazor 引擎的如下功能：
  • 資源的統(tǒng)一管理
  • js 代碼的注入
  • js 調(diào)用 C# 代碼
  • C# 調(diào)用 js 代碼

為什么必須使用 wwwroot 文件夾放置 Web 項(xiàng)目文件

這個(gè)文件夾將是混合開發(fā)Web部分的根目錄，這個(gè)名稱不能隨便定義

Microsoft.AspNetCore.Components.WebView.Maui 庫會將 wwwroot 文件夾里的內(nèi)容作為 Maui 資源（MauiAsset）類型設(shè)置標(biāo)簽，編譯器則會根據(jù) MauiAsset 標(biāo)簽將這些內(nèi)容打包進(jìn)各個(gè)平臺的資源文件夾。

創(chuàng)建 MAUI 項(xiàng)目

項(xiàng)目名字 MAUI.Vue.hybirddev

創(chuàng)建完成后編輯Hybrid.Maui.csproj，在Sdk最末尾加上.Razor，VS 會自動安裝Microsoft.AspNetCore.Components.WebView.Maui 依賴包
不要手動 Nuget 添加這個(gè)包，否則程序無法運(yùn)行

創(chuàng)建 wwwroot 文件夾

創(chuàng)建之后會自動變成網(wǎng)絡(luò)資源文件夾

服務(wù)注冊

• 使用擴(kuò)展方法 builder.Services.AddMauiBlazorWebView() 對 BlazorMauiWebView 組件服務(wù)進(jìn)行注冊

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();}}
}

創(chuàng)建 _import.razor

添加 → 類 → Razor 組件

導(dǎo)入 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 @*當(dāng)前項(xiàng)目名稱*@

添加 Main.razor 組件

• 被JS調(diào)用的方法必須是靜態(tài)的
• Dispose 銷毀頁面資源，防止內(nèi)存溢出

@inject IJSRuntime JSRuntime
@implements IDisposable@code {[JSInvokable]public static Task<string> Test(){return Task.FromResult("Maui Test Function");}public void Dispose(){}
}

修改 MainPage.xaml 文件

建立 BlazorWebView 控件鋪滿屏幕，并設(shè)置 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>

創(chuàng)建 WPF 項(xiàng)目

項(xiàng)目名字 Hybrid.Wpf

創(chuàng)建完成后編輯Hybrid.Wpf.csproj，在Sdk最末尾加上.Razor
同時(shí)在項(xiàng)目文件的現(xiàn)有 <PropertyGroup> 中，添加 <RootNamespace>Hybrid.Wpf</RootNamespace> 標(biāo)記

安裝 Nuget 包 Microsoft.AspNetCore.Components.WebView.Wpf

創(chuàng)建 wwwroot 文件夾

創(chuàng)建之后會自動變成網(wǎng)絡(luò)資源文件夾

服務(wù)注冊

• 通過依賴注入容器注入 AddWpfBlazorWebView() 服務(wù)
• 在資源中添加已注冊的服務(wù) 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();}}
}

創(chuàng)建 _import.razor

添加 → 類 → Razor 組件

導(dǎo)入 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調(diào)用的方法必須是靜態(tài)的
• Dispose 銷毀頁面資源，防止內(nèi)存溢出

@inject IJSRuntime JSRuntime
@implements IDisposable@code {[JSInvokable]public static Task<string> Test(){return Task.FromResult("Wpf Test Function");}public void Dispose(){}
}

修改 MainWindow.xaml 文件

建立 BlazorWebView 控件鋪滿屏幕，并設(shè)置 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>

創(chuàng)建 Vue 項(xiàng)目

通過命令 npm create vue@latest 前提是已安裝 Node.js

執(zhí)行命令嘗試運(yùn)行項(xiàng)目

修改創(chuàng)建好的 Vue 項(xiàng)目

DotNet.invokeMethodAsync("Hybrid.Maui", "Test") 第一個(gè)參數(shù)是容器項(xiàng)目的 Namespace，第二個(gè)參數(shù)是要調(diào)用的方法。

<script setup>
import { RouterLink, RouterView } from 'vue-router';
import HelloWorld from './components/HelloWorld.vue';/*** 訪問 Hybrid.Wpf 項(xiàng)目中的 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>

執(zhí)行 npm run build 命令

執(zhí)行 npm run build 命令發(fā)布 Vue 項(xiàng)目

Copy dist

將 dist 文件夾下的所有文件復(fù)制到容器項(xiàng)目下的 wwwroot 文件夾下

修改 index.html 內(nèi)容

• JS、CSS 文件名一定要與編譯后的文件名一致
• head 中的 JS 導(dǎo)入添加 crossorigin="anonymous" 跨域支持
• 在 body 中導(dǎo)入 _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><!-- Maui 項(xiàng)目需要添加 autostart="false" --><script src="_framework/blazor.webview.js" autostart="false"></script><!-- Wpf 項(xiàng)目不需要 --><script src="_framework/blazor.webview.js"></script>
</body>
</html>

效果預(yù)覽

點(diǎn)擊 To Hydrid.Wpf Test 按鈕就可以在控制臺打印出 C# 代碼中的返回值

Demo 下載

https://github.com/Gun319/Hybrid