如何使用Photino创建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">