Blazor 跨平台的共享一套UI的天气预报 Demo

Posted 2023-05-31 Yu-Core

1. 前言

很久之前就读过 dotnet9 大佬的一篇文章，MAUI与Blazor共享一套UI，媲美Flutter，实现Windows、macOS、Android、iOS、Web通用UI，没读过的可以读一读，写的很好。

对Blazor跨平台开始比较感兴趣。

渐渐发现Blazor Hybrid可以在更多的框架上运行，如Winform、WPF，更有Photino这样可以在Linux上运行的框架，Blazor的可玩性越来越高了。

所以写了一个支持尽可能多的Blazor模式的Demo，多个项目共用一个Rcl（Razor类库），能够在多个平台以不同的方式跑起来。

通过天气API获取当前天气和天气预报，可以切换天气源，也可以选择指定位置的天气。

2. 先看一下效果

Blazor WebAssembly： 在线演示地址

MAUI、Winform、WPF： Github Releases

截图

Blazor WebAssembly	Blazor Server	MAUI Android
Winform	WPF
MAUI Windows	Photino Linux(Deepin V23)

3 项目结构

• YourWeather：Maui Blazor 项目

• YourWeather.Client：Blazor WebAssembly 项目

• YourWeather.Photino：Photino Blazor 项目

• YourWeather.Rcl：Razor类库，存放页面和一些基础实现

• YourWeather.Rcl.Desktop：Winform和WPF共用的类库

• YourWeather.Rcl.Web：WebAssembly 和 Server 共用的类库

• YourWeather.Server：Blazor Server 项目

• YourWeather.Shared：共用的接口和模型

• YourWeather.Winform：Winform 项目

• YourWeather.Wpf：WPF 项目

4 新建模板

安装 MASA.Template

dotnet new install Masa.Template::1.0.0-rc.2

在同一解决方案下新建这四个后，只需稍作改动即可

5 源码：

• Github

• Gitee

Blazor Hybrid / MAUI 简介和实战

使用 C# 建立一套用 Blazor 技术的单个共享代码库, HTML 和 CSS的交互式 UI, 可以直接生成多端应用程序 APP Blazor Hybrid 支持内置于 .NET 多平台应用 UI (.NET MAUI) 框架。 .NET MAUI 包含 BlazorWebView 控件，该控件运行将 Razor 组件呈现到嵌入式 Web View 中。 通过结合使用 .NET MAUI 和 Blazor，可以跨移动设备、桌面设备和 Web 重复使用一组 Web UI 组件。Blazor Hybrid 应用可以使用 Windows Presentation Foundation (WPF) 和 Windows 窗体构建。 Blazor 为这两个框架提供 BlazorWebView 控件。 Razor 组件在 Windows 桌面本机运行并呈现到嵌入式 Web View。 通过在 WPF 和 Windows 窗体中使用 Blazor，可以将新的 UI 添加到现有的 Windows 桌面应用，这些应用可以跨具有 .NET MAUI 的平台或在 Web 上重复使用。

使用 C# 建立一套用 Blazor 技术的单个共享代码库, HTML 和 CSS的交互式 UI, 可以直接生成多端应用程序 APP Blazor Hybrid 支持内置于 .NET 多平台应用 UI (.NET MAUI) 框架。 .NET MAUI 包含 BlazorWebView 控件，该控件运行将 Razor 组件呈现到嵌入式 Web View 中。 通过结合使用 .NET MAUI 和 Blazor，可以跨移动设备、桌面设备和 Web 重复使用一组 Web UI 组件。Blazor Hybrid 应用可以使用 Windows Presentation Foundation (WPF) 和 Windows 窗体构建。 Blazor 为这两个框架提供 BlazorWebView 控件。 Razor 组件在 Windows 桌面本机运行并呈现到嵌入式 Web View。 通过在 WPF 和 Windows 窗体中使用 Blazor，可以将新的 UI 添加到现有的 Windows 桌面应用，这些应用可以跨具有 .NET MAUI 的平台或在 Web 上重复使用。