使用.NET5、Blazor和Electron.NET构建跨平台桌面应用

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 hereTask.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

2fe82e69f246ded6a98dd35a3959eca7.png

  • 构建桌面应用

输入以下命令构建各平台的桌面应用,默认为这些平台生成 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");}
}

bdbb9a03757b3938fb79a5e4f30cb015.png

本文 GitHub 代码

https://github.com/huangmingji/ElectronNETDemon

相关文档

  • ElectronNet

  • Ant Design Blazor

  • ASP.NET Core Blazor

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux内核分析作业3:跟踪分析Linux内核的启动过程

内核源码目录 1、 arch:录下x86重点关注 2、 init&#xff1a;目录下main.c中的start_kernel是启动内核的起点 3、 ipc&#xff1a;进程间通信的目录 实验 使用实验楼的虚拟机打开shell cd LinuxKernel/ qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd rootfs.img 使…

linux安装定制添加输入,Arch Linux--定制自己的Linux操作系統(乙-國際化桌面安裝篇)...

Arch Linux&#xff0d;&#xff0d;定制自己的Linux操作系統&#xff0d;&#xff0d;&#xff0d;&#xff0d;乙&#xff0d;國際化&桌面安裝篇相信大家看了《甲-安裝篇》之後&#xff0c;Arch Linux系統已經可以正常運行了吧&#xff1f;不過&#xff0c;Arch Linux默認…

这几部经典纪录片,竟然还有人没看过?

全世界只有3.14 % 的人关注了爆炸吧知识看纪录片&#xff0c;既可以追溯上下数千年的历史文化&#xff0c;也可以欣赏从宇宙到地心深处的奇妙境界&#xff0c;而及其超级精彩的画面即使定格&#xff0c;也是一幅摄影佳作。纪录片题材广泛、制作精良&#xff0c;观看起来算的上是…

github 上微信判断是否被删除的源码 以及使用解惑

为什么80%的码农都做不了架构师&#xff1f;>>> 从Github上的https://github.com/0x5e/wechat-deleted-friends&#xff0d;&#xff0d;clone出来的代码 今天在我的机器上不能运行了&#xff0c;环境为Mac 10.10 python2.7.10中 提示错误&#xff0c; Traceback (…

坑爹!千万不要在生产环境使用控制台日志

前言某控制台应用程序会随机卡死&#xff0c;一直找不到原因。无意中在控制台敲了下回车&#xff0c;发现程序居然恢复正常了。最后在stackoverflow上找到了这个帖子&#xff1a;How and why does QuickEdit mode in Command Prompt freeze applications?[1]原来是“快速编辑模…

这五部关于海洋的纪录片,每一帧都犹如壁纸!

全世界只有3.14 % 的人关注了爆炸吧知识虽说读万卷书不如行万里路&#xff0c;但现在足不出户也能让你见识到世界各地的奇特风景。今天小编要推荐几部关于海洋的纪录片&#xff0c;这些纪录片从不同方面揭示了深海下面的奥秘&#xff0c;带你领略不一样的神秘景色。&#xff08…

UML类图几种关系的总结

在UML类图中&#xff0c;常见的有以下几种关系:泛化&#xff08;Generalization&#xff09;, 实现&#xff08;Realization&#xff09;,关联&#xff08;Association&#xff09;,聚合&#xff08;Aggregation&#xff09;,组合(Composition)&#xff0c;依赖(Dependency) 1…

Ruby:字符集和编码学习总结

背景 Ruby直到1.9版本才很好的支持了多字节编码&#xff0c;本文简单总结了今天学习的关于Ruby编码方面的知识。 字符串可以使用不同的编码 在.NET中字符串的编码是一致的&#xff0c;Ruby允许字符串有不同的编码&#xff0c;当时我就在想&#xff1a;如果两个不同编码的字符串…

Redis持久化RDB和AOF区别

RDBRDB是Redis内存到硬盘的快照&#xff0c;用于redis持久化&#xff0c;创建RDB二进制文件&#xff0c;将存储在内存中的数据&#xff0c;持久化的放到硬盘中&#xff0c;当我们需要这些数据的时候&#xff0c;启动载入RDB文件&#xff0c;数据将会被存入内存中&#xff0c;其…

央视力荐的这套书,让5岁孩子看漫画,秒懂物理,学习早“开窍”!

▲ 点击查看今年的高考&#xff0c;不得不说&#xff0c;一度被浙江学霸刷屏&#xff01;他总分720分&#xff0c;物理等3门满分的成绩&#xff0c;最终获得“浙江高考状元”。状元能摘得桂冠&#xff0c;除了日积月累的不断努力外&#xff0c;最重要的是&#xff0c;不断调整自…

MongoDB基本操作(增删改查)

2019独角兽企业重金招聘Python工程师标准>>> 基本操作 基本的“增删查改“&#xff0c;在DOS环境下输入mongo命令打开shell&#xff0c;其实这个shell就是mongodb的客户端&#xff0c;同时也是一个js的编译器&#xff0c;默认连接的是“test”数据库。 【出错】 首先…

Kubernetes + .NET Core 的落地实践

1容器化背景本来生活网&#xff08;benlai.com&#xff09;是一家生鲜电商平台&#xff0c;公司很早就停止了烧钱模式&#xff0c;开始追求盈利。既然要把利润最大化&#xff0c;那就要开源节流&#xff0c;作为技术可以在省钱的方面想想办法。我们的生产环境是由 IDC 机房的 1…

传说中的宇宙最水诺奖得主:本科历史学,却凭借“一纸”博士论文摘取诺贝尔物理学奖,出道即巅峰!...

全世界只有3.14 % 的人关注了爆炸吧知识他&#xff0c;到底是不是最水的诺奖得主&#xff1f;超模君曾经介绍了学历史&#xff0c;最终成为数学、物理大牛的威滕&#xff08;传送门&#xff09;&#xff0c;然而竟出现了德布罗意姥爷的高分点赞&#xff01;那今天&#xff0c;超…

基于事件驱动架构构建微服务第13部分:使用来自Apache KAFKA的事件并将投影流传输到ElasticSearch...

原文链接&#xff1a;https://logcorner.com/building-microservices-through-event-driven-architecture-part13-read-model-projection-project-streams-into-elasticsearch/在本教程中&#xff0c;我将展示如何从KAFKA读取流并将流投影到ElasticSearch中。我必须使用来自KAF…

惊呆了!这篇论文全文都是脏话,可编辑部居然对它评价极佳并发表了!

全世界只有3.14 % 的人关注了爆炸吧知识本文转自&#xff1a;募格学术你见过最奇奇怪怪的论文是什么&#xff1f;一教授为了抗议三流科学杂志发送垃圾邮件&#xff0c;回复了一篇全文只重复七个脏话字眼的论文&#xff0c;可没想到的是&#xff0c;它竟然还被 出&#xff01;版…

单IP无TMG拓扑Lync Server 2013:前端服务器

在前面的基础架构和活动目录两篇文章中&#xff0c;我们已经准备好了Lync Server的所有环境。其实今天虽然部署的是Lync Server 2013的Preview版&#xff0c;但实际上与我们部署Lync的步骤以及规范是完全一样的&#xff0c;所以大家完全可以抛开Lync Server 2013 Preview版本本…

MySQL学习笔记之五:存储引擎和查询缓存

一、存储引擎1、InnoDB⑴InnoDB是基于聚簇索引建立的&#xff0c;基于主键索引查询时&#xff0c;性能较好&#xff1b;它的辅助索引中必须包含主键列&#xff1b;因此&#xff0c;若表上的索引较多&#xff0c;为节约空间&#xff0c;主键应尽可能小⑵InnoDB支持自适应hash索引…

利用SOS扩展库进入高阶.NET6程序的调试

有时候我们可能想深入到程序的运行核心&#xff0c;去观察下内存分配情况以及堆栈内保存的东东&#xff0c;那么作为编程新贵的底层框架.NET6&#xff0c;又为我们提供了什么可用的观测工具呢&#xff1f;1.SOS 扩展是什么&#xff1f;SOS扩展库是Windows 附带的调试扩展库&…

java--用 * 打印出各种图形(新手请进)

------------------------------------ 代码&#xff1a; public class PrintTriangle { public static void main(String[] args) { System.out.println("左边正三角形"); printTopLeft(5); System.out.println("左边倒三角形&quo…

这种动作片还需要汽车特效?

1 奇奇怪怪的扣分点又增加了▼2 就是活好&#xff01;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 不愧是律师&#xff01;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 成都马拉松惊现美食街&#xff01;&#xff08;素材来源网络&#xff0c;侵…