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

开发环境

创建新项目

  • 创建文件夹
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

相关文档

使用.NET5、Blazor和Electron.NET构建跨平台桌面应用的更多相关文章

  1. Electron+Vue开发跨平台桌面应用

    Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某 ...

  2. VS Code + NWJS(Node-Webkit)0.14.7 + SQLite3 + Angular6 构建跨平台桌面应用

    一.项目需求 最近公司有终端桌面系统需求,需要支持本地离线运行(本地数据为主,云端数据同步),同时支持Window XP,最好跨平台.要求安装配置简单(一次性打包安装),安装包要小,安装时间短,可离线 ...

  3. 使用 nw-builder 构建跨平台桌面应用程序

    NW.js 是一个使用 Web 技术创建本地应用的框架,如 HTML.JavaScript 和 CSS.简单地说,当你在使用普通的流程开发一个 Web 应用时,开发完成后,运行一个生成器,将所有东西编 ...

  4. 快速了解Electron:新一代基于Web的跨平台桌面技术

    本文引用了作者“ ConardLi”的<用JS开发跨平台桌面应用,从原理到实践>一文部分内容,原文链接:segmentfault.com/a/1190000019426512,感谢原作者的 ...

  5. Electron+React+七牛云 实战跨平台桌面应用(最新更新)

    课程资料获取链接:点击这里 前市场上对 Electron 的呼声很高,它几乎是 Web 开发人员开发桌面客户端的唯一途径,很多大厂都使用 Electron 开发自己的原生应用.Electron 天生适 ...

  6. 使用electron构建跨平台Node.js桌面应用

    最近,把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件,使用的是electron,这里简单分享一下使用electron的一些经验和心得. 一.如何使用electron把 ...

  7. 使用electron构建跨平台Node.js桌面应用经验分享

    by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6154 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随 ...

  8. [.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux)

    [.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux) 1.关于跨平台 上篇中介绍了MVC的发展历程,说到ASP.NET ...

  9. NativeScript - JS 构建跨平台的原生 APP

    使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...

随机推荐

  1. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  2. 11.4.4 LVS-Fullnat

    lvs-fullnat(双向转换) 通过请求报文的源地址为DIP,目标为RIP来实现转发:对于响应报文而言,修改源地址为VIP,目标地址为CIP来实现转发: CIP --> DIP VIP -- ...

  3. 将Oracle数据库数据每天备份恢复一次数据到另一台服务器上两份数据

    1.创建用户,授权,创建测试数据 创建用户 CREATE USER test identified by 123; 授权 grant dba to test; 创建测试数据 create table ...

  4. canvas 实现简单的画板功能添加手机端效果 1.01

    在上次的基础上,加了一些代码,手机端可操作 访问网址:https://chandler712.github.io/Item/ <!-- 简单版画板 --> <!DOCTYPE htm ...

  5. HC(Histogram-based Contrast) 基于直方图对比度的显著性

    HC(Histogram-based Contrast) 基于直方图对比度的显著性 来源于: 2011, Global contrast based salient region detection, ...

  6. 【UE4 C++ 基础知识】<12> 多线程——FRunnable

    概述 UE4里,提供的多线程的方法: 继承 FRunnable 接口创建单个线程 创建 AsyncTask 调用线程池里面空闲的线程 通过 TaskGraph 系统来异步完成一些自定义任务 支持原生的 ...

  7. 绘制PCB电路原理图的8种方法

    1.选择集成电路,变压器,晶体管等组件,这些组件体积庞大,有许多引脚并在电路中起主要作用,然后从选定的参考引脚中抽取,以减少错误. 2.如果PCB上标有元件编号(如VD870,R330,C466等), ...

  8. 使用jQuery-UI来实现一个Ajax的自动完成功能(自动填充搜索框的下拉值)

    首先你要在.net拓展包中去搜索  jquery ui (Combined Libray)安装这么个文件 第二部   在控制器中添加我们根据输入搜索框的值获取符合的记录集的action 第三步  有了 ...

  9. Kubernetes Deployment 源码分析(一)

    概述Deployment 基础创建 DeploymentReplicaSet滚动更新失败回滚历史版本回滚其他特性小结 概述 Deployment 是最常用的 Kubernetes 原生 Workloa ...

  10. 挂载iscsi存储

    参考连接:https://segmentfault.com/a/1190000005853387?utm_source=tag-newest 安装客户端工具,iscsi-initiator yum i ...