Skapa en .NET MAUIBlazor Hybrid app

Not

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i .NET 10-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. För den aktuella versionen, se .NET 9-versionen av den här artikeln .

Den här självstudien visar hur du skapar och kör en .NET MAUI- ochBlazor Hybrid-app. Du lär dig att:

• Skapa ett .NET MAUIBlazor Hybrid appprojekt i Visual Studio
• Kör appen i Windows
• Kör appen på en emulerad mobil enhet i Android-emulatorn

Förutsättningar

• plattformar som stöds (.NET MAUI dokumentation)
• Visual Studio med utvecklingsarbetsbelastningen .NET Multi-platform App UI.
• Microsoft Edge WebView2: WebView2 krävs i Windows när du kör en intern app. När du utvecklar .NET MAUIBlazor Hybrid appar och bara kör dem i Visual Studio-emulatorer krävs inte WebView2.
• Aktivera maskinvaruacceleration för att förbättra prestanda för Android-emulatorn.

Mer information om krav och installation av programvara för den här självstudien finns i följande resurser i dokumentationen för .NET MAUI:

• Stödda plattformar för .NET MAUI appar
• Installation (Visual Studio)

Skapa en .NET MAUIBlazor Hybrid app

Starta Visual Studio. I Startfönsterväljer du Skapa ett nytt projekt:

I fönstret Skapa ett nytt projekt använder du listrutan Projekttyp för att filtrera MAUI- mallar:

Välj mallen .NET MAUIBlazor Hybrid App och välj sedan knappen Nästa:

Not

I .NET 7 eller tidigare heter mallen .NET MAUIBlazor App.

I dialogrutan Konfigurera ditt nya projekt:

• Ange Projektnamn till MauiBlazor.
• Välj en lämplig plats för projektet.
• Välj knappen Nästa.

I dialogrutan Ytterligare information väljer du ramverksversionen med listrutan Framework. Välj knappen Skapa:

Vänta tills Visual Studio har skapat projektet och återställ projektets beroenden. Övervaka förloppet i Solution Explorer genom att öppna posten Beroenden.

Återställning av beroenden:

Beroenden har återställts:

Kör appen i Windows

I Visual Studio-verktygsfältet väljer du knappen Windows Machine för att skapa och starta projektet:

Om utvecklarläget inte är aktiverat uppmanas du att aktivera det i Inställningar>För utvecklare>Utvecklarläge (Windows 10) eller Inställningar>Privacy & säkerhet>För utvecklare>Developer Mode (Windows 11). Ställ in växeln på På.

Appen som körs som en Windows-skrivbordsapp:

Kör appen i Android-emulatorn

Om du följde riktlinjerna i avsnittet Kör appen i Windows väljer du knappen Sluta felsöka i verktygsfältet för att stoppa windows-appen som körs:

I verktygsfältet i Visual Studio väljer du listrutan Starta konfiguration. Välj Android-emulatorer>Android-emulator:

Android-SDK:er krävs för att skapa appar för Android. I panelen fellista visas ett meddelande där du uppmanas att dubbelklicka på meddelandet för att installera nödvändiga Android-SDK:er:

Fönstret Licensgodkännande för Android SDK visas och välj knappen Acceptera för varje licens som visas. Ett ytterligare fönster visas för licenserna Android Emulator och SDK Patch Applier. Välj knappen Acceptera.

Vänta tills Visual Studio laddar ned Android SDK och Android-emulatorn. Du kan spåra förloppet genom att välja indikatorn för bakgrundsaktiviteter i det nedre vänstra hörnet i Visual Studio-användargränssnittet:

Indikatorn visar en bock när bakgrundsaktiviteterna är slutförda:

I verktygsfältet väljer du knappen Android Emulator:

I fönstret Skapa en Android-standardenhet väljer du knappen Skapa:

Vänta tills Visual Studio laddar ned, packa upp och skapa en Android-emulator. När Android-telefonemulatorn är klar väljer du knappen Starta.

Not

Aktivera maskinvaruacceleration för att förbättra prestanda för Android-emulatorn.

Stäng fönstret Android Device Manager. Vänta tills det emulerade telefonfönstret visas, Android OS läses in och startskärmen visas.

Viktig

Den emulerade telefonen måste vara påslagen med Android-operativsystemet inläst för att kunna läsa in och köra appen i felsökningsprogrammet. Om den emulerade telefonen inte körs aktiverar du telefonen med antingen Ctrl+P kortkommando eller genom att välja knappen Power i användargränssnittet:

I Visual Studio-verktygsfältet väljer du knappen Pixel 5 - {VERSION} för att skapa och köra projektet, där platshållaren {VERSION} är Android-versionen. I följande exempel är Android-versionen API 30 (Android 11.0 - API 30)och en senare version visas beroende på vilken Android SDK som är installerad:

Visual Studio skapar projektet och distribuerar appen till emulatorn.

Att starta emulatorn, läsa in den emulerade telefonen och operativsystemet och distribuera och köra appen kan ta flera minuter beroende på systemets hastighet och om maskinvaruacceleration är aktiverad. Du kan övervaka distributionens förlopp genom att granska Statusfältet i Visual Studio längst ned i användargränssnittet. Indikatorn Redo får en bockmarkering och emulatorns distributions- och appinläsningsindikatorer försvinner när appen körs:

Under utplaceringen:

Vid uppstart av app:

Appen som körs i Android-emulatorn:

Nästa steg

I den här handledningen lärde du dig hur du:

• Skapa ett .NET MAUIBlazor Hybrid appprojekt i Visual Studio
• Kör appen i Windows
• Kör appen på en emulerad mobil enhet i Android-emulatorn

Läs mer om Blazor Hybrid appar:

ASP.NET Core Blazor Hybrid