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

如何,使用,photino,创建,blazor,项目,进行,跨平台 · 浏览次数 : 510

小编点评

# Generation Content **Step 1: Define the Content** ```csharp using Photino.Blazor; namespace Demo; public class Program { [STAThread] public static void Main(string[] args) { // ... } } ``` **Step 2: Create the Application** ```csharp PhotinoBlazorAppBuilder.CreateDefault(args); appBuilder.RootComponents.Add("#app"); var app = appBuilder.Build(); ``` **Step 3: Configure App Settings** ```csharp app.MainWindow.SetTitle("Photino Blazor Sample"); app.Run(); ``` **Step 4: Configure Startup** ```csharp app.Run(); ``` **Step 5: Generate App Content** ```csharp // ... ``` **Step 6: Build the Application** ```csharp PhotinoBlazorAppBuilder.CreateDefault(args); appBuilder.RootComponents.Add("#app"); var app = appBuilder.Build(); app.Run(); ``` **Step 7: Run the Application** ``` app.MainWindow.OpenAlertWindow("Fatal exception", error.ExceptionObject.ToString()); ``` **Step 8: Run the Application in Different Environments** ``` // ... ``` **Note:** This is a simplified example. You can modify it to include additional content and features.

正文

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写界面和业务,运行平台就可以有多个选择了,比如PhotnioPhotnio本身也是跨平台,你也可以直接在Linux中运行了,用了Blazor就不需要担心能不能跨平台了,

来着token的分享

学习交流:737776595

与如何使用Photino创建Blazor项目进行跨平台相似的内容:

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

Photino是什么 Photino是一组使用Web (HTML/CSS/JavaScript)UI创建桌面应用程序的技术。TryPhotino.io 维护 .NET 构建,并鼓励社区开发 Photino.Native 控件以用于其他语言和平台。我们鼓励并将支持Photino.CPP,Photino

原来.NET写的Linux桌面这么好看?

如何使用Blazor在Linux平台下运行Desktop程序 本文将讲解如何使用Blazor运行跨平台应用,应用到的技术有以下几点 Blazor Masa Blazor Photino.Blazor Ubuntu 用于验证跨平台性,并且是否提高开发效率,Blazor和Photino一块使用的技术称为

如何使用csproj构建C#源代码组件NuGet包?

一般我们构建传统的NuGet包,都是打包和分发dll程序集文件。 至于打包和分发C#源代码文件的做法,比较少见。 那么这种打包源代码文件的做法,有什么优点和缺点呢? 优点: 方便阅读源代码。 方便断点调试。 减少 Assembly 程序集模块加载个数。 更利于发布期间的剪裁(PublishTrimm

如何使用JavaScript实现在线Excel附件的上传与下载?

前言 在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Excel中附带一些Word,CAD图等等。同样的,类比到Web端,现在很多人用的在线Excel是否也可以像本地一样实现附件文件的操作呢?答案是肯定的,不过和本地不同的是,Web端不会直接打开附件,而是使用超链接单

如何使用前端表格控件实现数据更新?

前言 小编之前分享过一篇文章叫《如何使用前端表格控件实现多数据源整合?》。今天,继续为大家介绍如何使用前端表格控件来更新已连接的数据源信息。 环境准备 SpreadJS在线表格编辑器: SpreadJS 前端表格控件新版本新增了一款报表插件,该插件基于 SpreadJS 本身强大的表格能力,在 Da

如何使用Node.js、TypeScript和Express实现RESTful API服务

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Express是一个保持最小规模的灵活的 Node.js Web应用程序开发框架,为Web和移动应用程序提供一组强大的功能。使用Node

如何使用前端表格控件实现多数据源整合?

前言 作为表格产品的典型应用场景之一,几乎所有的行业都会存在类 Excel 报表开发这样的应用场景,而在这些应用场景中,经常会遇见下面的这些痛点: 报表数据往往来自多个不同的数据源,需要报表系统能够同时连接多个数据源,并融合不同的数据格式 实际的报表中需要对数据结果进行逻辑计算,例如销售的环比和同比

如何使用Python和Plotly绘制3D图形

本文分享自华为云社区《Plotly绘制3D图形》 ,作者:柠檬味拥抱。 在数据可视化领域,三维图形是一种强大的工具,可以展示数据之间的复杂关系和结构。Python语言拥有丰富的数据可视化库,其中Plotly是一款流行的工具,提供了绘制高质量三维图形的功能。本文将介绍如何使用Python和Plotly

如何使用 JS 判断用户是否处于活跃状态

有时候,我们需要在网页判断用户是否处与非活跃状态,如果用户长时间没有在页面上进行任何操作,我们则判定该用户是非活跃的。 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。

如何使用Tushare+ Backtrader进行股票量化策略回测

更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流。 典型股票量化回测流程 典型的股票量化策略回测流程包括以下几个步骤: 数据获取:首先需要获取所需的股票市场数据,包括股票价格、交易量、财务数据等。这些数据可以从金融数据供应商、交易所、财经网站或者专门的数据