火星網校
你想一套UI，全終端發(fā)布嗎?也許MAUI能幫你
發(fā)布時間：2024-01-04 11:16:49 瀏覽量：174次
windows 安卓 蘋果預覽圖
MAUI介紹
隨著MAUI正式版的發(fā)布，一直想用MAUI來寫點東西或者實現一個小的項目來學習這個微軟發(fā)布的心再次躁動起來。前面預覽版也有過搭建測試過，但都因為某些不知原因的BUG而，進行的坎坎坷坷。正式版的發(fā)布，期望能夠使用起來能夠。。。爽爽。。。
好了來看下MAUI的簡介：
.NET 多平臺應用程序 UI (.NET MAUI) 是一個跨平臺框架，用于使用 C# 和 XAML 創(chuàng)建本機移動和桌面應用程序， 使用 .net MAUI，可以開發(fā)可在 Android、iOS、macOS 上運行的應用，Windows 以及從單個共享代碼庫運行的應用。
看到這里大家感覺有點意思了吧。是個框架，能多端部署應用。
Blazor Hybrid 支持內置于 .NET 多平臺應用 UI (.NET MAUI) 框架。.NET MAUI 包含 BlazorWebView 控件，該控件運行將 Razor 組件呈現到嵌入式 Web View 中。通過結合使用 .NET MAUI 和 Blazor，可以跨移動設備、桌面設備和 Web 重復使用一組 Web UI 組件。
下面來看下我搭建的測試工程：
文件夾說明：
Data 文件夾：接口或者數據的訪問層。
Pages 文件夾：存放前端頁面razor。
Platforms文件夾：包含的平臺層。這個我理解為可創(chuàng)建和運行的內置平臺層庫。（不知道理解的對嗎？，有不同理解的朋友，可以放在評論區(qū)。）
Resources 資源文件夾，沒啥可說的。
Shared 文件夾: UI共享層。寫過apsx 的可能感覺他是母版頁或者前端框架結構層。
wwwroot 文件夾：發(fā)布資源層。
_Imports.razor 全局控制導入層。
MAUI 數據訪問層到UI層流程
我個人一直認為學習一項技術，最快的辦法，就是先搞懂流程。大的框架掌握了，去接觸細節(jié)。從細節(jié)上完善對流程的認識，才是學好和掌握一項技術的方式和方法。
- 流程那我們就看下它的流程咯。。
我們就看它的數據是如何展示出來的：
就看Fetch Data頁面。
打開NavMenu.razor 文件查看他的Href 鏈接
進入pages 查看
可以看到原始頁面是從這里聯過來的。
再看下數據是如何過來的：
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>是從forecasts 對象來的。
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
forecasts 是從
ForecastService.GetForecastAsync 獲取來的.看下方法實現：
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
{
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
}).ToArray());
}ForecastService 里的GetForecastAsync 隨機生成了測試數據返回來數組對象。
總結：
多終端發(fā)布
點擊運行選擇運行平臺：
等待自動生成多終端的應用即可。
下一篇文章：MAUI 做個安卓APP
可以先看些視頻預覽效果：
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
