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

发布时间 2023-05-31 08:56:48作者: 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 源码: