使用.net5blazor和electron.net构建跨平台桌面应用

dotNET跨平台 dotNET跨平台     2023-02-16     178

关键词:

Electron.NET是一个嵌入了ASP.NET Core的Electron的封装,通过Electron.NET可以构建基于.NET5的跨平台的桌面应用,使得开发人员只需要使用ASP.NET Core和 Blazor就可以胜任桌面应用的开发工作。

开发环境

  • 操作系统Windows/macOS/Linux

  • .NET5.0

  • npm

创建新项目

  • 创建文件夹
mkdir ElectronNETDemon
  • 创建解决方案
dotnet new sln
  • 创建项目ElectronNETDemon
dotnet new blazorserver -f net5.0 -o ElectronNETDemon
  • 将项目“ElectronNETDemon/ElectronNETDemon.csproj”添加到解决方案中。
dotnet sln ElectronNETDemon.sln add ElectronNETDemon
  • 切换到项目目录
cd ElectronNETDemon
  • 将包“ElectronNET.API”的 PackageReference 添加到项目ElectronNETDemon
dotnet add package ElectronNET.API
  • 修改Program.cs使用Electron扩展
public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        
            webBuilder.UseElectron(args);
            webBuilder.UseStartup<Startup>();
        );
  • 修改Startup.cs,打开Electron窗口
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    ...

    // Open the Electron-Window here
    Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
  • 删除应用上的 https 相关配置
  1. launchSettings.json

  2. Startup.cs

app.UseHsts();
app.UseHttpsRedirection();
  • 启动应用程序
  1. 要启动应用程序,请确保已将'ElectronNET.CLI'软件包安装为全局工具:

dotnet tool install ElectronNET.CLI -g
  1. 然后初始化Electron.NET项目,electronnet.manifest.json应该出现在你的 ASP.NET Core项目中。

electronize init
  1. 运行以下命令启动程序

electronize start

第一次启动期间可能需要等待漫长的时间,如启动失败可以设置 npm 的源镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 构建桌面应用

输入以下命令构建各平台的桌面应用,默认为这些平台生成 x64 包。

electronize build /target win
electronize build /target osx
electronize build /target linux

如需构建 X86 的包,请使用以下命令

electronize build /target custom "win7-x86;win32" /electron-arch ia32

将包“AntDesign”的 PackageReference 添加到项目ElectronNETDemon

dotnet add package AntDesign --version 0.1.0-*
  • 修改Startup.cs,在项目中注册Antdesign
public void ConfigureServices(IServiceCollection services)

    services.AddAntDesign();
    
    ...
  • 在 wwwroot/index.html(WebAssembly) 或 Pages/_Host.cshtml(Server) 中引入静态文件
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
  • 在 _Imports.razor 中加入命名空间
@using AntDesign
  • 为了动态地显示弹出组件,需要在 App.razor 中添加一个 组件。
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

<AntContainer />
  • 最后我们就可以在 razor 页面中使用 AntDesign,在Index.razor加入以下代码,触发按钮的点击事件
@inject MessageService _message
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />


<Button Type="primary" OnClick="Success">Hello World!</Button>

@code 
    private async Task Success()
    
        await _message.Success("This is a success message");
    

本文 GitHub 代码

https://github.com/huangmingji/ElectronNETDemon

相关文档

  • ElectronNet

  • Ant Design Blazor

  • ASP.NET Core Blazor

.NET 5 Blazor 服务器 OKTA 身份验证显示 HTTP 错误 400

】.NET5Blazor服务器OKTA身份验证显示HTTP错误400【英文标题】:.NET5BlazorServerOKTAAuthenticationshowingHTTPError400【发布时间】:2022-01-2110:36:25【问题描述】:将ASP.NETCore(.NET5)Blazor服务器与OKTA结合使用。OKTA日志页面已提示。我在提交OKTAuid/p... 查看详情

Azure 应用服务中的 .NET5 Blazor 服务器应用返回“您无权查看此目录或页面”

】Azure应用服务中的.NET5Blazor服务器应用返回“您无权查看此目录或页面”【英文标题】:.NET5BlazorServerappinAzureAppServicesreturns"Youdonothavepermissiontoviewthisdirectoryorpage"【发布时间】:2021-06-1120:00:11【问题描述】:我正在尝试通... 查看详情

使用java加密和解密密码使用啥API和算法

】使用java加密和解密密码使用啥API和算法【英文标题】:WhatAPIandalgorithmtobeusedtoencryptanddecryptapasswordusingjava使用java加密和解密密码使用什么API和算法【发布时间】:2012-12-1202:16:33【问题描述】:我目前正在使用Java创建应用程序... 查看详情

如何使用 php 和 mysql 使用纬度和经度进行几何搜索

】如何使用php和mysql使用纬度和经度进行几何搜索【英文标题】:Howtodoageometricsearchusinglatitudeandlongitudeusingphpandmysql【发布时间】:2010-05-0311:30:54【问题描述】:有没有人知道如何使用纬度和经度搜索使用纬度和经度使用php和mysql... 查看详情

Cocoa - 为啥使用 NSInteger 和 CGFloat 而不是使用 int 和 float,或者总是使用 NSNumber?

】Cocoa-为啥使用NSInteger和CGFloat而不是使用int和float,或者总是使用NSNumber?【英文标题】:Cocoa-WhyusingNSIntegerandCGFloatinsteadofusingintandfloator,always,NSNumber?Cocoa-为什么使用NSInteger和CGFloat而不是使用int和float,或者总是使用NSNumber?【发... 查看详情

学习和使用svn和github——开篇

  本文是学习和使用SVN和GitHub之开篇,主要讲的有四点内容:  一,介绍基层程序员对SVN功能的认识和使用程度  二,阐述我要学习和使用SVN和GitHub的原因  三,简要描述SVN和GitHub在使用上的区别和简... 查看详情

如何使用 usestate 和 setstate 而不是 this.setState 使用 react 和 typescript?

】如何使用usestate和setstate而不是this.setState使用react和typescript?【英文标题】:Howtouseusestateandsetstateinsteadofthis.setStateusingreactandtypescript?【发布时间】:2020-09-1618:38:06【问题描述】:我想使用react和typescript实现一个DragAndDrop组件,... 查看详情

使用和需要的区别

】使用和需要的区别【英文标题】:differencebetweenuseandrequire【发布时间】:2010-10-2616:46:33【问题描述】:谁能解释use和require之间的区别,无论是直接使用还是在ns宏中作为:use和:require使用?【问题讨论】:另见***.com/questions/103581... 查看详情

使用 AVAssetWriter 和 AVAssetReader 进行音频录制和播放

】使用AVAssetWriter和AVAssetReader进行音频录制和播放【英文标题】:UsingAVAssetWriterandAVAssetReaderforAudioRecordingandPlayback【发布时间】:2015-02-0409:19:33【问题描述】:我的应用使用AVAssetReader播放iPod库中的歌曲。现在我想添加录音功能。... 查看详情

使用 Selenium 使用 WindowHandles 跟踪和迭代选项卡和窗口的最佳方法

】使用Selenium使用WindowHandles跟踪和迭代选项卡和窗口的最佳方法【英文标题】:BestwaytokeeptrackanditeratethroughtabsandwindowsusingWindowHandlesusingSelenium【发布时间】:2018-02-2508:23:47【问题描述】:我们正在使用Seleniumwebdriver为InternetExplorer1... 查看详情

Google Reader 和 Twitter:使用 python 脚本归档和使用推文

】GoogleReader和Twitter:使用python脚本归档和使用推文【英文标题】:GoogleReaderandTwitter:archiveandusetweetswithpythonscript【发布时间】:2012-02-1712:26:27【问题描述】:我想从Twitter中的标签中存档推文。我正在使用Google阅读器,我的订阅类... 查看详情

使用距离和纬度和经度计算位置

】使用距离和纬度和经度计算位置【英文标题】:Calculatingalocationusingdistanceandlatitudeandlongitude【发布时间】:2021-05-1003:56:05【问题描述】:我有五个纬度和经度以及它们与某个位置的距离。问题是,有什么方法可以使用这些信息... 查看详情

使用 Express 和 GraphQL 而不是简单地使用 Node.js 和 GraphtQL 有啥好处?

】使用Express和GraphQL而不是简单地使用Node.js和GraphtQL有啥好处?【英文标题】:WhatisthebenefitofusingExpresswithGraphQLinsteadofsimplyusingNode.jswithGraphtQL?使用Express和GraphQL而不是简单地使用Node.js和GraphtQL有什么好处?【发布时间】:2019-11-170... 查看详情

SHTML 和 DHTML - 应该使用它们,为啥不使用它们?

】SHTML和DHTML-应该使用它们,为啥不使用它们?【英文标题】:SHTMLandDHTML-Shouldtheybeused,whyaren\'tthey?SHTML和DHTML-应该使用它们,为什么不使用它们?【发布时间】:2018-06-1618:13:23【问题描述】:随着HTML5的发布,我们是否应该继续... 查看详情

使用 SpriteKit 和内置物理引擎移动和跳跃精灵

】使用SpriteKit和内置物理引擎移动和跳跃精灵【英文标题】:MovingandjumpingaspriteusingSpriteKitandthebuilt-inphysicsengine【发布时间】:2014-07-1617:48:29【问题描述】:我目前正在为iOS开发一款平台游戏,并决定使用SpriteKit。我已经使用过th... 查看详情

static和extern使用/static和const联合使用

  static:1.修饰局部变量,被static修饰局部变量,延长生命周期,跟整个应用程序有关          *被static修饰局部变量,只会分配一次内存           查看详情

“使用”和“重新绑定”变量之间的含义和区别是啥?

】“使用”和“重新绑定”变量之间的含义和区别是啥?【英文标题】:Whatarethemeaningsanddifferencesbetween"uses"and"rebinds"avariable?“使用”和“重新绑定”变量之间的含义和区别是什么?【发布时间】:2018-01-0503:58:40【... 查看详情

acegi安全和生成注册和使用

grailsgenerate-registration 查看详情