如何使用Photino建立Blazor專案進行跨平臺

tokengo發表於2023-03-25
Blazor

Photino是什麼

Photino是一組使用Web （HTML/CSS/JavaScript）UI建立桌面應用程式的技術。TryPhotino.io 維護 .NET 構建，並鼓勵社群開發 Photino.Native 控制元件以用於其他語言和平臺。我們鼓勵並將支援Photino.CPP，Photino.Rust，Photino.Go等的開發。

使用Photino Blazor

首先我們建立一個.Net Core控制檯專案，專案SDK最低6.0

在專案中新增wwwroot資料夾

修改專案檔案

<Project Sdk="Microsoft.NET.Sdk.Razor">

	<PropertyGroup>
		<OutputType>WinExe</OutputType>
		<TargetFramework>net7.0</TargetFramework>
		<ImplicitUsings>enable</ImplicitUsings>
		<Nullable>enable</Nullable>
	</PropertyGroup>

	<ItemGroup>
		<PackageReference Include="Photino.Blazor" Version="2.5.0" />
	</ItemGroup>

	<ItemGroup>
		<Content Update="wwwroot\**">
			<CopyToOutputDirectory>Always</CopyToOutputDirectory>
		</Content>
	</ItemGroup>
</Project>

在wwwroot下面建立index.html，並且新增以下內容，用於啟動託管Blazor專案，app的原生就是Blazor載入的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <base href="/" />
    <link href="Demo.styles.css" rel="stylesheet" />
    <style>
        html, body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        h1:focus {
            outline: none;
        }

        a, .btn-link {
            color: #0071c1;
        }

        .btn-primary {
            color: #fff;
            background-color: #1b6ec2;
            border-color: #1861ac;
        }

        .valid.modified:not([type=checkbox]) {
            outline: 1px solid #26b050;
        }

        .invalid {
            outline: 1px solid red;
        }

        .validation-message {
            color: red;
        }

        #blazor-error-ui {
            background: lightyellow;
            bottom: 0;
            box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
            display: none;
            left: 0;
            padding: 0.6rem 1.25rem 0.7rem 1.25rem;
            position: fixed;
            width: 100%;
            z-index: 1000;
        }

        #blazor-error-ui .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
        }
    </style>
</head>

<body>
    <div id="app">載入中...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">?</a>
    </div>
    <script src="_framework/blazor.webview.js"></script>
</body>
</html>

建立_Imports.razor檔案，新增以下程式碼，檔案用於Blazor的全域性引用，減少razor檔案使用using

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Microsoft.Extensions.Logging

建立App.razor檔案，新增以下程式碼，以下程式碼是新增Blazor路由

@using Demo.Shared

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

建立Shared資料夾，在資料夾中建立MainLayout.razor，並且新增以下內容

@inherits LayoutComponentBase

<div>
	@Body
<div>

建立Pages資料夾，在資料夾中建立Index.razor檔案，並且新增頁面功能，頁面是一個點選按鈕新增數量的功能，用於測試Blazor是否正常執行

@page "/"

<span>當前數量 @Count </span>
<button @onclick="OnClick">增加數量</button>

@code {
    private int Count = 1;

    private void OnClick()
    {
        Count++;
    }

}

接下來我們修改Program.cs檔案的程式碼，這裡將是入口，

using Photino.Blazor;

namespace Demo;

public class Program
{
    [STAThread]
    public static void Main(string[] args)
    {
        var appBuilder = PhotinoBlazorAppBuilder.CreateDefault(args);

        appBuilder.RootComponents.Add<App>("#app");

        var app = appBuilder.Build();

        app.MainWindow
            .SetTitle("Photino Blazor Sample");

        AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
        {
            app.MainWindow.OpenAlertWindow("Fatal exception", error.ExceptionObject.ToString());
        };

        app.Run();
    }
}

PhotinoBlazorAppBuilder.CreateDefault是建立了一個類似於WebApi的方法，用於託管我們的介面，

appBuilder.RootComponents.Add<App>("#app");是將App.razor的元件繫結到html的元素id為app的上面，載入的Blazor元件將直接渲染到dom上

app.MainWindow.SetTitle("Photino Blazor Sample");將啟動一個窗體，SetTitle是設定窗體的標題，請注意啟動方法必須加[STAThread]不然可能看不到效果，

然後我們啟動一下專案，效果如圖，當我們點選增加數量發現也是沒問題的

Photino效能

在釋出以後啟動的專案記憶體佔用在63.7MB左右，對比MAUI來說很小了

專案體積：

這個是釋出的單檔案，佔用在3MB以內，佔用也是非常小

在瞭解一下Photino如何實現

Photino.Blazor建立在Photino之上。透過使用Photino的NET。NET NuGet 包。其目的是使.NET開發人員能夠輕鬆地使用Blazor Web UI建立.NET 6及更高版本的桌面應用程式，該UI可以在Windows，Linux和Mac上跨平臺工作，而不是使用Windows Forms，Windows Presentation Foundation（WPF），Xcode，Swift或GTK等技術構建特定於作業系統的UI。它只是將 Blazor 功能新增到 .NET 包。

Photino.Blazor 不是伺服器端 Blazor，也不是 WASM 客戶端 Blazor。當 .NET（控制檯）應用程式啟動時，它使用完整的 .NET 6 框架。框架可以預安裝在計算機上，也可以在“單個檔案應用程式”的情況下與應用程式一起打包。在 Blazor 中執行所有 .NET 程式碼將重定向到與控制檯應用相同的框架。

控制檯應用程式程式以及本機視窗和瀏覽器控制元件的程式都使用相同的框架。這是透過在 photnio 中包含一些 Blazor 原始碼來實現的。Blazor 專案併為此目的對其進行修改。

最低支援是.NET 6

如果你是桌面程式，建議用Blazor寫介面和業務，執行平臺就可以有多個選擇了，比如Photnio，Photnio本身也是跨平臺，你也可以直接在Linux中執行了，用了Blazor就不需要擔心能不能跨平臺了，

來著token的分享

學習交流：737776595

相關文章