【译】使用Blazor构建桌面应用
随着最近.NET Core 3的正式发布,我认为我会尝试一个有趣的小实验。我喜欢使用Electron来创建基于Web的桌面应用程序。我想了解有关Blazor(ASP.NET系列的最新成员)的更多信息。在这篇文章中,我将向您确切演示如何在15分钟内开始使用Blazor和Electron!
先决条件
.NET Core 3.0 SDK
Node.js with npm
确保同时安装 .NET Core SDK 和 Node.js(您可以使用 dotnet--version
和 node--version
检查版本)。我们需要.NET Core 3.0,因为我们将使用dotnet new搭建Blazor应用程序。我们还需要Electron.NET的.NET Core 3.0,该库允许Electron和.NET集成。Node.js用于下载,配置实际的Electron实例并与之集成。
设定
安装程序需要一些简单的步骤。尽管大多数步骤只是命令,但是有2个文件需要手动编辑。设置完项目后,只需要一个命令就可以启动它!
命令
mkdir blazor-electron-demo
cd blazor-electron-demo
dotnet new blazorserver --no-https
dotnet add package ElectronNET.API
dotnet new tool-manifest
dotnet tool install ElectronNET.CLI
dotnet electronize init
相当多的命令块,但是它们都很简单,不需要任何用户交互。让我们细分每个命令的作用:
mkdir blazor-electron-demo cd blazor-electron-demo
|
为我们的项目创建一个文件夹,并将其设置为当前工作目录。确保将其更改为您首选的项目名称! |
dotnetnewblazorserver--no-https
|
使用脚手架模板创建了一个新的服务器端Blazor应用程序,不使用HTTPs。 |
dotnet addpackageElectronNET.API
|
安装NuGet程序包,该程序包将Electron支持添加到ASP.NET应用程序。 |
dotnetnewtool-manifest
|
增加了对本地安装的“ dotnet”工具的支持。 |
dotnet tool installElectronNET.CLI
|
在项目本地安装所需的 ElectronNET.CLI。 |
dotnet electronize init
|
设置Electron.NET清单并更新启动配置文件。 |
所有命令应按顺序执行,并且一次执行一个。一旦它们全部完成,您仅需更改两个文件即可运行该应用程序!
文件修改
为了使ASP.NET应用程序(在本例中为Blazor应用程序)与Electron集成,我们需要对 Program.cs
和 Startup.cs
进行修改。在 Program.cs
中:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using ElectronNET.API; // ADD THIS!
namespace blazor_electron_demo
{ public class Program { public static void Main(string[] args) { CreateHostBuilder(args).Build().Run(); } public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>() .UseElectron(args); // ADD THIS! }); }
}
在 Startup.cs
中:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using blazor_electron_demo.Data;
using ElectronNET.API; // ADD THIS!
namespace blazor_electron_demo
{ public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton<WeatherForecastService>(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); // ADD THIS! Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); } }
}
随着这两个文件的更新,我们现在可以在Electron内运行我们的应用程序了!
使用
运行
我们的应用程序可以两种不同的方式运行。通过命令行或通过Visual Studio的“运行”对话框(通过在使用dotnet electroize init的安装过程中添加的启动配置文件)进行。
dotnet electronize start
Blazor在桌面应用程序中运行
调试
运行后,您可以从Visual Studio的“调试”>“附加到进程...”中附加调试器,并按项目名称进行过滤。运行.NET应用程序时,断点将完全按预期工作。您甚至可以调试Razor文件中的代码!唯一的缺点是,当您需要进行更改时,必须停止应用程序,编辑更改并重新启动它。我们稍后再讨论。
发布
感谢Electron.NET,我们可以通过一个命令将应用程序发布到特定于平台的安装程序中!
dotnet electronize build /target win
# OR
dotnet electronize build /target osx
# OR
dotnet electronize build /target linux
Windows Note: 我确实遇到了一个例外
Thegiven key'target'wasnotpresentinthe dictionary.
在mingw64
提示符下运行命令时。使用本机cmd
或powershell
提示符再次尝试命令。
此命令将在./bin/desktop文件夹下创建一个新的安装程序。在内部,您将找到适合您平台的安装程序!
样例代码
我创建了一个GitHub存储库,展示了我们刚刚进行的所有更改。如果遇到问题,请使用它作为资源,或者在Twitter上与我联系!
注意事项
虽然这两种技术的结合很有趣,但确实有其缺点。从开发人员工作流问题到API不匹配,这些问题可能很烦人,但对于使用Blazor和Electron而言,它们决不是交易障碍。
开发人员工作流程
最严重的问题是迭代开发过程缓慢。此时,开发人员的工作流程包括启动应用程序,手动附加调试器,测试应用程序,然后停止应用程序进行更改并最终重新启动周期。如果没有更改后的热重载功能,这将大大增加开发难度。Electron.NET的维护者建议在浏览器中开发该应用程序以完成大部分任务,并且仅切换到electronic进行定期测试。
Electron API/Interop
Electron.NET很年轻,但是功能全面。创建从C#和.NET到JavaScript&Node.js / Electron的功能桥梁并非易事。但是您很有可能会发现未实现的方法或事件。请记住,Electron.NET是人们在业余时间创建的免费库。每个功能可能都不存在,但这就是开源的光芒所在。如果您在API或功能中发现了一个漏洞,需要进行一些工作,那么请分叉该项目并尝试自己找到修复程序。大多数时候,构建软件是协作的成果,帮助解决问题而不是仅仅等待解决问题会非常有意义。
总结
我们创建了一个全新的Blazor项目,借助Electron.NET增加了对Electron的支持,并创建了一个准备发布的安装程序!尽管在使用开发堆栈进行这种尖端构建时确实存在一些警告,但绝对没有阻止您使用Blazor构建不可思议的桌面应用程序的警告。在像您这样的开发人员的帮助下,Electron.NET将继续改进!
特别向Rob Horner和John Sedlak表示感谢,感谢他帮助编辑本文!谢谢罗伯和约翰!
与往常一样,如果您喜欢这篇文章,请在Twitter上告诉我!如果您有任何问题或不了解某些内容,也请告诉我!我非常感谢您的反馈!
【译】使用Blazor构建桌面应用相关推荐
- 所有受限制的应用程序包_【译】使用Blazor构建桌面应用
随着最近.NET Core 3的正式发布,我认为我会尝试一个有趣的小实验.我喜欢使用Electron来创建基于Web的桌面应用程序.我想了解有关Blazor(ASP.NET系列的最新成员)的更多信息. ...
- 亲自实践Blazor构建桌面应用程序
首先是安装.NET Core 3.0 与Node.js .Net Core 版本为:3.0.100 Node.js安装版本为:v12.13.0 用到的8个命令 mkdir blazor-electro ...
- AngularJS 和 Electron 构建桌面应用
译]使用 AngularJS 和 Electron 构建桌面应用 原文: Creating Desktop Applications With AngularJS and GitHub Electro ...
- 使用 AngularJS 和 Electron 构建桌面应用
使用 AngularJS 和 Electron 构建桌面应用 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨 ...
- html getelementbyid 修改图片_如何使用HTML、CSS和JS轻松构建桌面应用程序
HTML,CSS和JavaScript语言是否可以真正用于构建桌面应用程序? 答案是肯定的. 在这篇文章中,我们将主要关注Electron如何使用HTML.CSS和Javascript等网络技术来创建 ...
- 使用 Electron 构建桌面应用
作者:kmokidd 链接:https://zhuanlan.zhihu.com/p/20225295 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 译者注:前一段 ...
- pywebview:使用python构建桌面客户端应用
前言 我编写了一些python程序,但我并不满足与只用命令行运行,我希望能构建一个具有界面的桌面客户端应用,来运行我python程序的各种功能. 作为一个前端工程师,我最熟悉的当然就是Electron ...
- 使用 Electron 构建桌面应用程序的介绍
事实上的团队协作软件,Visual Studio Code - 在撰写本文时市场上最受欢迎的代码编辑器之一,以及WhatsApp的桌面版本都有一个共同点:它们都是用Electron构建的.js.随着这 ...
- 【使用Blazor构建web应用程序 .NET 6篇 上】
Build web applications with Blazor 使用Blazor构建web应用程序 .NET 6篇 上 使用Blazor构建web应用程序 第一节Introduction (介绍 ...
最新文章
- 要不要读博?机器学习博五学生和强化学习博士展开了一场battle
- 马斯克炮轰微软:OpenAI不是你的工具人
- 【KEIL·单片机·扫盲贴】关于ARM单片机程序内存使用情况的细致讨论。
- python mysql 错误处理_Python-MySQL中的错误处理
- linux shell 等待输入_shell中获得用户的输入
- c c 语言写的四六级词汇系统,2020英语四六级词汇积累:以c开头的单词(二)
- 干货 | 双目摄像头实现手势识别,完美还原人体运动手势
- 应用层DNS:域名系统(DNS:Domain Name Systems)
- 关于机器学习会议的点评
- 浅谈SQL Server identity列的操作方法
- IE、firefox下怎样获得自定义属性的值
- 数学建模层次分析法例题及答案_斩获国际特等奖!兰理工数学建模团队为百年校庆献礼...
- JUnit 4 vs JUnit 5
- 设计篇-网页设计规范
- 【论文解读 arXiv 2019 | DEAN】DEAN: Learning Dual Emotion for Fake News Detection on Social Media
- ue4Make Rot From x
- 数据结构与算法--哈夫曼树应用
- [数据科学]000.我为什么当数据科学家
- 浅析溯源(2):如何实现区块链溯源
- 领袖的七个非常重要的根性-余世维
热门文章
- prototype.js 和jquery-1.6.2.js冲突问题解决方法
- 初学者java学习计划_初学者:计划在Windows 7 Media Center中录制直播电视的时间
- 什么是Google Play保护以及如何确保Android安全?
- windows os x_如何立即在OS X上获取Windows样式的窗口捕捉
- Linux之ACL权限控制
- 基本线程同步(三)在同步的类里安排独立属性
- 要做好性能测试,该掌握些什么?
- 实施Exchange 2013中的 MailTip
- OpenStack开启亚洲之旅
- 2013-10-10