使用.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内核芬妮下,201402 - 蜗窝科技

作者&#xff1a;wowo 发布于&#xff1a;2014-2-27 17:01分类&#xff1a;统一设备模型在“Linux内核的整体架构”中&#xff0c;蜗蜗有提到&#xff0c;由于Linux支持世界上几乎所有的、不同功能的硬件设备(这是Linux的优点)&#xff0c;导致Linux内核中有一半的代码是设备驱…

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 使…

图表中各个参数的应用( AChartEngine XMultipleSeriesRenderer

图表中各个参数的应用&#xff08; AChartEngine XMultipleSeriesRenderer 运行demo可以发现&#xff0c;它的所有chart都是可以移动&#xff0c;背景色为黑。。。。不过我们有时候会希望chart不动或者改变背景色等一些样式。 这节就介绍一些demo中没有使用的但有很常见的一些关…

用正则匹配多行文本

如果有这样一个字符串 $var "src arr.c build.c eval.c field.c \ missing.c msg.c re.c version.c" 用一般的^\w\s*\s*.*$只能匹配上面的那句&#xff0c;而下面的那一句就无法匹配了 方法一&#xff1a;使用的是perl $var "src arr.c build.c eval.c fiel…

Android之用HttpURLConnection参数以XML形式封装的部分关键代码

HttpURLConnection参数以XML形式封装 //得到连接public static HttpURLConnection setRequest(String urlStr) {HttpURLConnection con = null;try {URL url = new URL(urlStr);try {con = (HttpURLConnection) url.openConnection();con.setDoOutput(true);con.setDoInput(tru…

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

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

ToLookup 和 GroupBy 到底有什么不同?

咨询区 Shlomo&#xff1a;.ToLookup<TSource, TKey> 返回的是 ILookup<TKey, TSource>, 但我发现 ILookup<TKey, TSource> 同时也实现了 IEnumerable<IGrouping<TKey, TSource>> 接口。.GroupBy<TSource, TKey> 直接返回的是 IEnumerabl…

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

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

Android之获取屏幕和视图高和宽

在android中&#xff0c;画布Canvas的高宽其实是屏幕的高宽。 1. WindowManager windowManager getWindowManager(); Display display windowManager.getDefaultDisplay(); screenWidth display.getWidth(); screenHeight display.getHeight(); 2DisplayMetrics d…

Html5 Video 节点

1、支持的视频格式 当前&#xff0c;video 元素支持三种视频格式&#xff1a;格式 IE Firefox Opera Chrome Safari Ogg No 3.5 10.5 5.0 No MPEG4 9.0 No No 5.0 3.0 WebM No 4.0 10.6 6.0 NoO…

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

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

【转】android makefile文件分析

Makefile的规则如下&#xff1a; target ... : prerequisites ... command ... ... target可以是一个目标文件&#xff0c;也可以是Object File&#xff08;例如helloworld.obj&#xff09;&#xff0c;也可以是执行文件和标签。 prerequisites就是生成target所需要的文件或是目…

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

前言某控制台应用程序会随机卡死&#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…

linux内核分析与移植,内核分析移植

1.make menuconfig添加对s3c2440的支持system type--> s3c2440 machine--> smdk24402. __lookup_machine_type处理uboot传来的 machine id 获得一个 表示该id的 machine_desc 结构体smdk2440的 machin_desc 结构体的定义如下/arch/arm/mach-s3c2440/mach-smdk2440.cMA…

Samba服务器简介及自动挂载配置案例

一、简介 Samba是一个工具套件&#xff0c;在Unix上实现SMB(Server Message Block&#xff09;协议&#xff0c;或 者称之为NETBIOS/LanManager协议。SMB协议通常是被windows系列用来实现磁 盘和打印机共享。 SMB应用功能 SAMBA 最初发展的主要目就是要用来沟通Windows 与 Unix…

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

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

Android之退出应用关闭项目每个Activity的总结

思路 我们先封装好一个类叫MyApplication这个类,把这个类设置为单例模式,只有一个对象,然后在这个类里面写一个能装Activity的集合,相当于一个栈,然后每次有activity的时候,就去压进栈,当我要退出应用程序的时候,我们就把不为空的Activity都finish()掉,然后再杀死进程…

Redis持久化RDB和AOF区别

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