0
点赞
收藏
分享

微信扫一扫

安装Neo4j

彭维盛 2023-12-24 阅读 58

Blazor 混合开发_MAUI+Vue_WPF+Vue

背景

混合开发的核心

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

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

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

创建 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 DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
            builder.Logging.AddDebug();
#endif

            return 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" ?>
<ContentPage
    x: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 DEBUG
            serviceCollection.AddBlazorWebViewDeveloperTools();
#endif

            return 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

<Window
    x: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>

	<!-- Maui 项目需要添加 autostart="false" -->
	<script src="_framework/blazor.webview.js" autostart="false"></script>
	<!-- Wpf 项目不需要 -->
    <script src="_framework/blazor.webview.js"></script>
</body>
</html>

效果预览

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

Demo 下载

https://github.com/Gun319/Hybrid

举报

相关推荐

0 条评论