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