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

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