百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

Blazor实现Windows、macOS、Android、iOS、Web共用一套UI

bigegpt 2024-08-27 11:59 2 浏览

1. 前言

距离上次发《MAUI初体验：爽》一文已经过去2个月了，本计划是下半年或者明年再研究MAUI的，现在计划提前啦，因为我觉得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之间共享UI，一处UI增加或者修改，就能得到一致的UI体验。

看看这篇文章《Blazor Hybrid/MAUI 简介和实战》对MAUI Blazor的说明：

MAUI

.NET 多平台应用程序 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用程序， 使用 .net MAUI，可以开发可在 Android、iOS、macOS 上运行的应用，Windows 以及从单个共享代码库运行的应用。

Blazor Hybrid 应用和 .NET MAUI

Blazor Hybrid 支持内置于 .NET 多平台应用 UI (.NET MAUI) 框架。 .NET MAUI 包含 BlazorWebView 控件，该控件运行将 Razor 组件呈现到嵌入式 Web View 中。 通过结合使用 .NET MAUI 和 Blazor，可以跨移动设备、桌面设备和 Web 重复使用一组 Web UI 组件。

今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI的实验，这一步完成，后面开发应用时就方便多了（只针对UI修改）。

2. 先来体验下各端最终效果

  • Blazor Server：http://server.dotnet9.com/
  • Blazor Wasm：http://wasm.dotnet9.com/
  • MAUI(Android\Windows\macOS)：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（源码自行编译）

Windows桌面、Blazor Server(在线）、Blazor Wasm(在线）、Android效果

iPad Air、iOS、macOS桌面效果

MAUI各端未做发布文件体验（需要做相应平台的发布签名等操作），大家可以按下面介绍的方法创建项目编译体验一下。

iOS和macOS效果感谢青城同学提供的图片素材，站长mbp安装了最新的macOS，xCode也是最新的，可能因为预览版macOS原因，xCode无法打开，间接影响了maui编译？

macOS版本和xCode版本

xCode为不可用状态

VS编译出错，后面再解决

用mbp的同学建议不要安装预览版操作系统，不要当勇士....

3. 新建项目

关于MAUI的环境搭建可参考这篇文章《在MAUI中使用Masa Blazor》，本文不再介绍环境搭建，直接使用VS 2022最新预览版项目模板创建项目。

3.1 创建Blazor Server项目：Dotnet9.Server

3.2 创建Blazor WebAssembly项目：Dotnet9.Wasm

3.3 创建MAUI Blazor项目：Dotnet9.MAUI

3.4 查找共同点

在3个项目的上一层目录，打开PowerShell，输入tree /f查看详细的目录文件组织结构：

仔细查看三个模板项目文件结构，我们找出共同的文件查看：

文件夹 PATH 列表
卷序列号为 76F5-AF62
C:.
│  Dotnet9.sln
│
├─Dotnet9.MAUI
【1 这里省略数个文件】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      FetchData.razor
│  │      Index.razor
【2 这里省略数个文件】
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【3 这里省略数个文件】
│
├─Dotnet9.Server
│  │  App.razor
【4 这里省略数个文件】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      Error.cshtml
│  │      Error.cshtml.cs
│  │      FetchData.razor
│  │      Index.razor
│  │      _Host.cshtml
│  │      _Layout.cshtml
│  │
│  ├─Properties
│  │      launchSettings.json
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【5 这里省略数个文件】
│
└─Dotnet9.Wasm
【6 这里省略数个文件】
    │
    ├─Pages
    │      Counter.razor
    │      FetchData.razor
    │      Index.razor
    │
    ├─Properties
    │      launchSettings.json
    │
    ├─Shared
    │      MainLayout.razor
    │      MainLayout.razor.css
    │      NavMenu.razor
    │      NavMenu.razor.css
    │      SurveyPrompt.razor
【7 这里省略数个文件】

发现都有Data目录和Pages目录（其中Wasm项目没有Data目录，使用的示例类是直接写在FetchData.razor文件@code{}中的），那把这部分文件直接提取到类库中就可以了，那就做吧。

4. 提取UI到Razor类库

创建Razor类库：Dotnet9.WebApp

下面开始UI的提取

如上图，将Dotnet9.MAUI项目的Data、Pages、Shared三个目录外加Main.razor文件剪切到Dotnet9.WebApp项目中，然后修改剪切后相应文件的命名空间Dotnet9.MAUI[xxx]为Dotnet9.WebApp[xxx]，打开Dotnet9.WebApp项目的_Import.razor文件，参考Dotnet9.MAUI项目的_Import.razor文件部分命名空间，修改如下：

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@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 Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

上面部分命名空间可以删除（未尝试），编译Dotnet9.WebApp项目，检查是否正确编译。

5. 各端项目修改

5.1 MAUI项目

  1. 添加Dotnet9.WebApp项目引用
  2. Program.cs中using Dotnet9.MAUI.Data;改为using Dotnet9.WebApp.Data
  3. 删除Data、Pages、Shared三个目录外加Main.razor文件，上一步是剪切的话这步省略
  4. 修改_Imports.razor文件，主要是添加Dotnet9.WebApp项目命名空间引用
@using System.Net.Http
@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 Dotnet9.MAUI
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared
  1. MauiProgram.cs修改引用的命名空间：using Dotnet9.MAUI.Data; => using Dotnet9.WebApp.Data;
  2. 打开MainPage.xaml，对路由组件命名空间的引用修改

添加命名空间xmlns:webApp="clr-namespace:Dotnet9.WebApp;assembly=Dotnet9.WebApp",修改代码如下：

修改前：

<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />

修改后：

<RootComponent Selector="#app" ComponentType="{x:Type webApp:Main}" />

修改完毕，编译运行Dotnet9.MAUI项目吧，接下来修改Dotnet9.Server项目。

5.2 Blazor Server项目

  1. 添加Dotnet9.WebApp项目引用
  2. Program.cs中using Dotnet9.Server.Data;改为using Dotnet9.WebApp.Data;
  3. 删除Data目录
  4. 删除Pages目录中的Counter.razor、FetchData.razor、Index.razor三个文件（包括同名的.cs、.css文件）
  5. 删除Shared目录
  6. 修改_Imports.razor文件，主要是添加Dotnet9.WebApp项目命名空间引用
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@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 Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared
  1. 打开./Pages/_Host.cshtml文件，添加命名空间引用@using Dotnet9.WebApp,修改代码如下：

修改前：

<component type="typeof(App)" render-mode="ServerPrerendered" />

修改后：

<component type="typeof(Main)" render-mode="ServerPrerendered" />

修改完毕，编译运行Dotnet9.Server项目吧，接下来修改Dotnet9.Wasm项目。

5.3 Blazor Wasm项目

  1. 添加Dotnet9.WebApp项目引用
  2. 删除Pages、Shared目录外加App.razor文件
  3. Program.cs中using Dotnet9.Wasm;改为using Dotnet9.WebApp;，同时修改代码

修改前

builder.RootComponents.Add<App>("#app");

修改后

builder.RootComponents.Add<Main>("#app");
  1. 修改_Imports.razor文件，主要是添加Dotnet9.WebApp项目命名空间引用
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@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 Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

修改完毕，编译运行Dotnet9.Wasm项目，至此三种项目模板已经修改完成，最终解决方案如下图：

6 总结

总结就是下图：

  • Dotnet9.WebApp：blazor组件相关的代码、路由组件等放在这个工程，供其他项目引用
  • Dotnet9.Server：Blazor Server模板项目
  • Dotnet9.Wasm：Blazor WebAssembly项目
  • Dotnet9.MAUI：MAUI Blazor项目

一句话：将UI封装到Razor类库Dotnet9.WebApp，其他终端工程(Dotnet9.Server、Dotnet9.MAUI、Dotnet9.Wasm)引用此工程即可实现UI共享。

  • 本文代码地址：https://github.com/dotnet9/Dotnet9
  • 原文：https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client

参考

  1. ASP.NET Community Standup - Native client apps with Blazor Hybrid
  2. Blazor一份代码在Blazor WebAssembly和Blazor Server之间任意切换
  3. 微软MAUI文档
  4. 微软Blazor文档
  5. 学Blazor

相关推荐

【Docker 新手入门指南】第十章:Dockerfile

Dockerfile是Docker镜像构建的核心配置文件，通过预定义的指令集实现镜像的自动化构建。以下从核心概念、指令详解、最佳实践三方面展开说明，帮助你系统掌握Dockerfile的使用逻...

Windows下最简单的ESP8266_ROTS_ESP-IDF环境搭建与腾讯云SDK编译

前言其实也没啥可说的,只是我感觉ESP-IDF对新手来说很不友好,很容易踩坑,尤其是对业余DIY爱好者搭建环境非常困难,即使有官方文档,或者网上的其他文档,但是还是很容易踩坑,多研究,记住两点就行了,...

python虚拟环境迁移（python虚拟环境conda）

主机A的虚拟环境向主机B迁移。前提条件：主机A和主机B已经安装了virtualenv1.主机A操作如下虚拟环境目录：venv进入虚拟环境：sourcevenv/bin/active(1)记录虚拟环...

Python爬虫进阶教程(二):线程、协程

简介线程线程也叫轻量级进程，它是一个基本的CPU执行单元，也是程序执行过程中的最小单元，由线程ID、程序计数器、寄存器集合和堆栈共同组成。线程的引入减小了程序并发执行时的开销，提高了操作系统的并发性能...

基于网络安全的Docker逃逸（docker）

如何判断当前机器是否为Docker容器环境Metasploit中的checkcontainer模块、（判断是否为虚拟机，checkvm模块）搭配学习教程1.检查根目录下是否存在.dockerenv文...

Python编程语言被纳入浙江高考，小学生都开始学了

今年9月份开始的新学期，浙江省三到九年级信息技术课将同步替换新教材。其中，新初二将新增Python编程课程内容。新高一信息技术编程语言由VB替换为Python，大数据、人工智能、程序设计与算法按照教材...

CentOS 7下安装Python 3.10的完整过程

1.安装相应的编译工具yum-ygroupinstall"Developmenttools"yum-yinstallzlib-develbzip2-develope...

如何在Ubuntu 20.04上部署Odoo 14

Odoo是世界上最受欢迎的多合一商务软件。它提供了一系列业务应用程序，包括CRM，网站，电子商务，计费，会计，制造，仓库，项目管理，库存等等，所有这些都无缝集成在一起。Odoo可以通过几种不同的方式进...

Ubuntu 系统安装 PyTorch 全流程指南

当前环境：Ubuntu22.04，显卡为GeForceRTX3080Ti1、下载显卡驱动驱动网站：https://www.nvidia.com/en-us/drivers/根据自己的显卡型号和...

spark+python环境搭建（python 环境搭建）

最近项目需要用到spark大数据相关技术，周末有空spark环境搭起来...目标spark，python运行环境部署在linux服务器个人通过vscode开发通过远程python解释器执行代码准备...

centos7.9安装最新python-3.11.1（centos安装python环境）

centos7.9安装最新python-3.11.1centos7.9默认安装的是python-2.7.5版本，安全扫描时会有很多漏洞，比如：Python命令注入漏洞(CVE-2015-2010...

Linux系统下，五大步骤安装Python

一、下载Python包网上教程大多是通过官方地址进行下载Python的，但由于国内网络环境问题，会导致下载很慢，所以这里建议通过国内镜像进行下载例如：淘宝镜像http://npm.taobao.or...

centos7上安装python3（centos7安装python3.7.2一键脚本）

centos7上默认安装的是python2，要使用python3则需要自行下载源码编译安装。1.安装依赖yum-ygroupinstall"Developmenttools"...

利用本地数据通过微调方式训练 本地DeepSeek-R1 蒸馏模型

网络上相应的教程基本都基于LLaMA-Factory进行，本文章主要顺着相应的教程一步步实现大模型的微调和训练。训练环境：可自行定义，mac、linux或者window之类的均可以，本文以ma...

【法器篇】天啦噜，库崩了没备份（天啦噜是什么意思?）

背景数据库没有做备份，一天突然由于断电或其他原因导致无法启动了，且设置了innodb_force_recovery=6都无法启动，里面的数据怎么才能恢复出来？本例采用解析建表语句+表空间传输的方式进行...

一周热门
最近发表
标签列表