技術文章 » 如何使用Photino建立Blazor專案進行跨平臺

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

2023-03-25 21:00:45

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">