Share via

ASP.NET Dependensi asli Core Blazor WebAssembly

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Blazor WebAssembly aplikasi dapat menggunakan dependensi asli yang dibuat untuk berjalan di WebAssembly. Anda dapat secara statis menautkan dependensi asli ke dalam runtime .NET WebAssembly menggunakan alat build .NET WebAssembly, alat yang sama yang digunakan untuk mengkompilasiBlazor aplikasi ke WebAssembly dan untuk menautkan ulang runtime untuk menghapus fitur yang tidak digunakan.

Artikel ini hanya berlaku untuk Blazor WebAssembly.

Alat build .NET WebAssembly

Alat build .NET WebAssembly didasarkan pada Emscripten, toolchain pengkompilasi untuk platform web. Untuk informasi selengkapnya tentang alat build, termasuk penginstalan, lihat alat build ASP.NET Core Blazor WebAssembly dan kompilasi ahead-of-time (AOT).

Tambahkan dependensi asli ke Blazor WebAssembly aplikasi dengan menambahkan NativeFileReference item dalam file proyek aplikasi. Ketika proyek dibangun, masing-masing NativeFileReference diteruskan ke Emscripten oleh alat build .NET WebAssembly sehingga dikompilasi dan ditautkan ke dalam runtime. Selanjutnya, p/invoke ke dalam kode asli dari kode .NET aplikasi.

Umumnya, kode asli portabel apa pun dapat digunakan sebagai dependensi asli dengan Blazor WebAssembly. Anda dapat menambahkan dependensi asli ke kode C/C++ atau kode yang sebelumnya dikompilasi menggunakan Emscripten:

  • File objek (.o)
  • File arsip (.a)
  • Bitcode (.bc)
  • Modul WebAssembly Mandiri (.wasm)

Dependensi bawaan biasanya harus dibangun menggunakan versi Emscripten yang sama yang digunakan untuk membangun runtime .NET WebAssembly.

Catatan

Untuk properti dan target MSBuild Mono/WebAssembly, lihat WasmApp.targets (dotnet/runtime repositori GitHub). Dokumentasi resmi untuk properti MSBuild umum direncanakan per opsi konfigurasi msbuild blazor dokumen (dotnet/docs #27395).

Menggunakan kode asli

Tambahkan fungsi C asli sederhana ke Blazor WebAssembly aplikasi:

  1. Buat proyek baru Blazor WebAssembly .

  2. Test.c Tambahkan file ke proyek.

  3. Tambahkan fungsi C untuk faktorial komputasi.

    Test.c:

    int fact(int n)
{
    if (n == 0) return 1;
    return n * fact(n - 1);
}

  4. NativeFileReference Tambahkan untuk Test.c dalam file proyek aplikasi:

    <ItemGroup>
  <NativeFileReference Include="Test.c" />
</ItemGroup>

  5. Razor Dalam komponen, tambahkan DllImportAttribute untuk fact fungsi di pustaka yang dihasilkan Test dan panggil fact metode dari kode .NET dalam komponen.

    Pages/NativeCTest.razor:

    @page "/native-c-test"
@using System.Runtime.InteropServices

<PageTitle>Native C</PageTitle>

<h1>Native C Test</h1>

<p>
    @@fact(3) result: @fact(3)
</p>

@code {
    [DllImport("Test")]
    static extern int fact(int n);
}

Saat Anda membuat aplikasi dengan alat build .NET WebAssembly yang diinstal, kode C asli dikompilasi dan ditautkan ke dalam runtime .NET WebAssembly (dotnet.wasm). Setelah aplikasi dibuat, jalankan aplikasi untuk melihat nilai faktorial yang dirender.

Panggilan balik metode terkelola C++

Beri label metode terkelola yang diteruskan ke C++ dengan [UnmanagedCallersOnly] atribut .

Metode yang ditandai dengan [UnmanagedCallersOnly] atribut harus static. Untuk memanggil metode instans dalam Razor komponen, teruskan GCHandle untuk instans ke C++ lalu teruskan kembali ke aslinya. Atau, gunakan beberapa metode lain untuk mengidentifikasi instans komponen.

Metode yang ditandai dengan [DllImport] harus menggunakan penunjuk fungsi C# 9.0 daripada jenis delegasi untuk argumen panggilan balik.

Catatan

Untuk jenis penunjuk fungsi C# dalam [DllImport] metode, gunakan IntPtr dalam tanda tangan metode di sisi terkelola alih-alih delegate *unmanaged<int, void>. Untuk informasi selengkapnya, lihat Panggilan balik [WASM] dari kode asli ke .NET: Mengurai jenis penunjuk fungsi dalam tanda tangan tidak didukung (dotnet/runtime #56145).

Mengemas dependensi asli dalam paket NuGet

Paket NuGet dapat berisi dependensi asli untuk digunakan di WebAssembly. Pustaka ini dan fungsionalitas aslinya kemudian tersedia untuk aplikasi apa pun Blazor WebAssembly . File untuk dependensi asli harus dibuat untuk WebAssembly dan dipaketkan dalam browser-wasmfolder khusus arsitektur. Dependensi khusus WebAssembly tidak dirujuk secara otomatis dan harus dirujuk secara manual sebagai NativeFileReference. Penulis paket dapat memilih untuk menambahkan referensi asli dengan menyertakan .props file dalam paket dengan referensi.

Penggunaan pustaka contoh SkiaSharp

SkiaSharp adalah pustaka grafis 2D lintas platform untuk .NET berdasarkan pustaka grafis Skia asli dengan dukungan untuk Blazor WebAssembly.

Untuk menggunakan SkiaSharp di Blazor WebAssembly aplikasi:

  1. Tambahkan referensi paket ke SkiaSharp.Views.Blazor paket dalam Blazor WebAssembly proyek. Gunakan proses Visual Studio untuk menambahkan paket ke aplikasi (Kelola Paket NuGet dengan Sertakan prarilis dipilih) atau jalankan dotnet add package perintah dalam shell perintah:

    dotnet add package –-prerelease SkiaSharp.Views.Blazor

    Catatan

    Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

  2. SKCanvasView Tambahkan komponen ke aplikasi dengan yang berikut ini:

    • SkiaSharp dan SkiaSharp.Views.Blazor namespace layanan.
    • Logika untuk menggambar di komponen Tampilan Kanvas SkiaSharp (SKCanvasView).

    Pages/NativeDependencyExample.razor:

    @page "/native-dependency-example"
@using SkiaSharp
@using SkiaSharp.Views.Blazor

<PageTitle>Native dependency</PageTitle>

<h1>Native dependency example with SkiaSharp</h1>

<SKCanvasView OnPaintSurface="OnPaintSurface" />

@code {
    private void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;

        canvas.Clear(SKColors.White);

        using var paint = new SKPaint
        {
            Color = SKColors.Black,
            IsAntialias = true,
            TextSize = 24
        };

        canvas.DrawText("SkiaSharp", 0, 24, paint);
    }
}

  3. Buat aplikasi, yang mungkin memakan waktu beberapa menit. Jalankan aplikasi dan navigasikan ke NativeDependencyExample komponen di /native-dependency-example.

Sumber Daya Tambahan:

Alat build .NET WebAssembly