首页 > 其他分享 >如何使用Photino创建Blazor项目进行跨平台

如何使用Photino创建Blazor项目进行跨平台

时间:2023-03-25 18:56:23浏览次数:43  
标签:创建 app 跨平台 Photino using NET 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">

标签:创建,app,跨平台,Photino,using,NET,Blazor
From: https://www.cnblogs.com/hejiale010426/p/17255336.html

相关文章