Een .NET MAUIBlazor Hybrid-app bouwen

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In deze zelfstudie leert u hoe u een .NET MAUIBlazor Hybrid-app bouwt en uitvoert. U leert het volgende:

• Een .NET MAUIBlazor Hybrid-app-project maken in Visual Studio
• De app uitvoeren in Windows
• De app uitvoeren op een geëmuleerd mobiel apparaat in de Android Emulator

Voorwaarden

• Ondersteunde platforms (.NET MAUI documentatie)
• Visual Studio met de ontwikkelworkload .NET Multi-platform App UI.
• Microsoft Edge WebView2: WebView2 is vereist in Windows bij het uitvoeren van een systeemeigen app. Wanneer u .NET MAUIBlazor Hybrid-apps ontwikkelt en deze alleen uitvoert in de emulators van Visual Studio, is WebView2 niet vereist.
• Hardwareversnelling inschakelen om de prestaties van de Android-emulator te verbeteren.

Zie de volgende bronnen in de documentatie voor .NET MAUI voor meer informatie over vereisten en het installeren van software voor deze zelfstudie:

• Ondersteunde platforms voor .NET MAUI apps
• Installatie (Visual Studio)

Een .NET MAUIBlazor Hybrid-app maken

Start Visual Studio. Selecteer in het startvensterEen nieuw project maken:

Gebruik in het venster Een nieuw project maken de vervolgkeuzelijst projecttype om -sjablonen van TE filteren:

Kies de sjabloon .NET MAUIBlazor Hybrid App en selecteer vervolgens de knop Volgende.

Notitie

In .NET 7 of eerder krijgt de sjabloon de naam .NET MAUIBlazor App.

In het dialoogvenster Configureer uw nieuwe project:

• Stel de projectnaam in op MauiBlazor.
• Kies een geschikte locatie voor het project.
• Selecteer de knop Volgende.

Selecteer in het dialoogvenster Aanvullende informatie de frameworkversie met de vervolgkeuzelijst Framework. Selecteer de knop maken:

Wacht tot Visual Studio het project heeft gemaakt en de afhankelijkheden van het project zijn hersteld. Controleer de voortgang in Solution Explorer door de afhankelijkheden vermelding te openen.

Afhankelijkheden herstellen:

Afhankelijkheden hersteld:

De app uitvoeren in Windows

Selecteer op de werkbalk van Visual Studio de knop Windows Machine om het project te bouwen en te starten:

Als de ontwikkelaarsmodus niet is ingeschakeld, wordt u gevraagd deze in te schakelen in Instellingen>Voor ontwikkelaars>Ontwikkelaarsmodus (Windows 10) of Instellingen>Privacy & beveiliging>Ontwikkelaars>Ontwikkelaarsmodus (Windows 11). Stel de schakelaar in op Op.

De app die wordt uitgevoerd als een Windows-bureaublad-app:

De app uitvoeren in de Android Emulator

Als u de richtlijnen in de sectie De app uitvoeren in Windows hebt gevolgd, selecteert u de knop Foutopsporing stoppen op de werkbalk om de actieve Windows-app te stoppen:

Selecteer in de werkbalk van Visual Studio de startconfiguratie in de vervolgkeuzelijst. Selecteer Android-emulators>Android-emulator:

Android-SDK's zijn vereist voor het bouwen van apps voor Android. In het deelvenster Foutenlijst wordt een bericht weergegeven waarin u wordt gevraagd op het bericht te dubbelklikken om de vereiste Android SDK's te installeren:

Het venster Android SDK-licentie accepteren wordt weergegeven. Selecteer de knop Accepteren voor elke licentie die wordt weergegeven. Er wordt een extra venster weergegeven voor de Android Emulator en SDK Patch Applier licenties. Selecteer de knop Accepteren.

Wacht tot Visual Studio de Android SDK en Android Emulator downloadt. U kunt de voortgang bijhouden door de indicator voor achtergrondtaken in de linkerbenedenhoek van de Visual Studio-gebruikersinterface te selecteren:

De indicator geeft een vinkje weer wanneer de achtergrondtaken zijn voltooid:

Selecteer op de werkbalk de knop Android Emulator:

Selecteer in het venster Een standaard Android-apparaat maken de knop Maken:

Wacht tot Visual Studio een Android Emulator downloadt, uitpakt en maakt. Wanneer de Android-telefoonemulator gereed is, selecteert u de knop Start.

Notitie

Hardwareversnelling inschakelen om de prestaties van de Android-emulator te verbeteren.

Sluit het venster Android Device Manager. Wacht totdat het geëmuleerde telefoonvenster wordt weergegeven, het Android-besturingssysteem wordt geladen en het startscherm wordt weergegeven.

Belangrijk

De geëmuleerde telefoon moet worden ingeschakeld met het Android-besturingssysteem dat is geladen om de app in het foutopsporingsprogramma te laden en uit te voeren. Als de geëmuleerde telefoon niet actief is, schakelt u de telefoon in met de Ctrl+P sneltoets of door de knop Power te selecteren in de gebruikersinterface:

Selecteer op de werkbalk van Visual Studio de knop Pixel 5 - {VERSION} om het project te bouwen en uit te voeren, waarbij de tijdelijke aanduiding {VERSION} de Android-versie is. In het volgende voorbeeld is de Android-versie API 30 (Android 11.0 - API 30)en verschijnt er een latere versie, afhankelijk van de geïnstalleerde Android SDK.

Visual Studio bouwt het project en implementeert de app in de emulator.

Het starten van de emulator, het laden van de geëmuleerde telefoon en het besturingssysteem en het implementeren en uitvoeren van de app kan enkele minuten duren, afhankelijk van de snelheid van het systeem en of hardwareversnelling is ingeschakeld. U kunt de voortgang van de implementatie controleren door de statusbalk van Visual Studio onder aan de gebruikersinterface te controleren. De indicator Gereed ontvangt een vinkje en de implementatie- en app-laadindicatoren van de emulator verdwijnen wanneer de app wordt uitgevoerd:

Tijdens de implementatie:

Tijdens het opstarten van de app:

De app die wordt uitgevoerd in de Android Emulator:

Volgende stappen

In deze zelfstudie hebt u het volgende geleerd:

• Een .NET MAUIBlazor Hybrid-app-project maken in Visual Studio
• De app uitvoeren in Windows
• De app uitvoeren op een geëmuleerd mobiel apparaat in de Android Emulator

Meer informatie over Blazor Hybrid apps:

ASP.NET Core Blazor Hybrid