入门干货之Electron的.NET实现-Electron.NET
0x01、Electron.NET
1、介绍
Electron是由Github上的一支团队和一群活跃贡献者维护。用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.Js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。官方地址:https://electronjs.org。Chromium是谷歌浏览器的引擎,Node.js,就是.......还用我说吗?
Electron.Net是对这项技术的C#实现,棒棒的。( .NET Core版本)
2、吐槽
也是两个月没更了,有灰,某些Bug在修复中,刚入门的时候特纠结,现在整理出来了,让老铁门少些烦恼。
3、搭建流程(以下流程是对电脑上没有nodejs痕迹的人来讲,如果你用过nodejs,你还看这步干啥,该干啥干啥去)
a、Electron.NET是基于Electron和Node.js的,因此在你开撸之前需要做点准备工作。
b、安装Node.js 去https://nodejs.org/en/下载
c、打开node.js命令行注册一个配置文件,敲命令:npm config set registry xxx (xxx随便写, 你就写xxx也行, 野路子, 但没毛病)
d、上面那个命令运行完会生成一个.npmrc文件。找到它(c:\User\Administrator\.npmrc),我找不到就用everything搜索。
e、编辑你找到的文件,换一些源,阿里的快,清空所有内容并写入:
registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
f、继续敲命令 npm install -g electron
g、继续敲命令npm install electron-packager --global
h、分别敲node -v和electron -v,看看装没装上
i、如图:
j、不是很懂Node.js的配置,除了这个环境需要,其它我也不用它。
4、开发
a、打开你的vs,下载ElectronNET.API
这个包包。
b、Program.cs里加上.UseElectron(args)。
WebHost.CreateDefaultBuilder(args)
.UseStartup<Startup>()
.UseElectron(args)
.Build();
c、在Startup.cs里,Configure方法中,在app.UseMvc()下面加:
var browserWindow = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions
{
Width = ,
Height = ,
Show = true,
Center=true,
Transparent=true
},$"http://localhost:{ BridgeSettings.WebPort }/1.html");
browserWindow.OnReadyToShow += () => browserWindow.Show();
browserWindow.SetTitle("Electron.NET API Demos");
我解释一下 $"http://localhost:{ BridgeSettings.WebPort }/1.html" ,这个URL参数就是你APP一打开的时候显示的页面。
BridgeSettings.WebPort就是获取你这个mvc绑定在本地的端口,但是跟你配置文件的端口可不一样啊。
比如我的配置文件中指定mvc端口为50000,但是生成的时候端口可能却是8000.
这时候程序上下文所指定的路径为:\你的项目\obj\Host\node_modules\.bin
d、写你的逻辑,就像写网站一样,全部写完,也测试完了,再开始改配置文件:
<ItemGroup>
<DotNetCliToolReference Include="ElectronNET.CLI" Version="*" />
</ItemGroup>
DotNetCliToolReference节点改成上面的样子,因为要用到它的tool.
e、在你的程序包管理控制台中找到你项目路径,刚开始是在外面的,你得cd一下啊,啥样算进去?就是dir能看到你的program.cs就行了。
f、 然后此时,运行dotnet electronize init, 它给你生成一个electron.manifest.json文件。
g、 然后继续dotnet electronize start, 可能会报错,没关系,只要控制台橘黄色方框不灭(运行中)那你就继续等,走两步,没病走两步...
别的电脑没这么报错,我家里的电脑就咔咔的冒红,我鸟都不鸟,demo照样像红太阳一样冉冉升起!
h、效果
这个是之前写的一个动态下雨的页面,水珠子好像被我改得不像了- -,另外文字不居中,实在抱歉- - 因为当时只会css3不太会css.......
有人觉得不应该拿ElectronNET跟WPF比,XAML万岁。嗯呐,万岁,对。见仁见智,老衲涂个清静。
g、资源
更多例子在:https://github.com/ElectronNET/electron.net-api-demos 这个是各种各种C#例子代码,如果窗口不显示Show=false改成true试试。
那里面的例子是C#以及js对照的,js的明显没官网的全, 就算你看完例子也不一定能找到上面代码中的一些代码,因为我翻了点源码。毕竟是初版,啥都慢慢来吧。
今儿的例子我传到:https://github.com/NMSLanX/ElectronNET.Demo
0x02、广告
0x03、结尾
上了岁数了,时间和精力明显不够了,自顶而下的学习方法也成为了习惯。
很多类库的文档以及demo对于开发人员来说就是天书,我从来不怪身边人说:"我看不懂,太难了,我不会。"
我从不侮辱他们的智商,如果有人不懂,那一定是作者以及团队的事,项目文档不够全面,demo的功能覆盖率低,同时也是生态中每个人的失职!
降低学习成本是每个.NET传教士义务与责任。
建立生态,保护生态,见者有份。
入门干货之Electron的.NET实现-Electron.NET的更多相关文章
- Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】
背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已 ...
- Electron实战:创建ELectron开发的window应用安装包
前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中winds ...
- 入门干货之用DVG打造你的项目主页-Docfx、Vs、Github
由于这三项技术涉及到的要点以及内容较多,希望大家有空能自己挖掘一下更多更深的用法. 0x01.介绍 VS,即VS2017以及以上版本,宇宙最好的IDE,集成了宇宙最有前景的平台,前阶段也支持了宇宙最好 ...
- 入门干货之Grpc的.Net实现-MagicOnion
此文章简单残暴,学习成本较低,你可以跟着我一起撸代码,一起吐槽,一起砸键盘.以下操作均为 core2.0 环境. 0x01.Grpc 1.介绍 Google主导开发的RPC框架,使用HTTP/2协议 ...
- Swoole引擎原理的快速入门干货
更多内容,欢迎关注微信公众号:全菜工程师小辉~ 过去一年使用PHP和Java两种技术栈完成了一个游戏服务器项目.由于项目中有高频的网络请求,所以PHP技术栈尝试使用Swoole引擎(基于事件的高性能异 ...
- Vue入门干货,以及遇到的坑
一.安装环境及Vue脚手架搭建 参考文档:https://www.jianshu.com/p/1626b8643676 二.开发文档 官方文档:https://cn.vuejs.org/v2/guid ...
- 初探Electron,从入门到实践
本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在开始之前,我想您一定会有这样的困惑:标题里的Electron ...
- 【Electron】Electron开发入门
Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...
- Electron入门应用打包exe(windows)
最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...
随机推荐
- 【Notification】屏蔽特定应用的通知提示
须要默认屏蔽特定app的通知提示 设置app是否接收通知的界面 点击每一个条目进去的界面 AppNotificationSettings extends SettingsPreferenceFragm ...
- Linux禁用显示“缓冲调整”
Linux禁用显示"缓冲调整" youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -o total used free shared ...
- 前端笔记---塌陷top
一.在设置盒子div的子元素的外边框margin-top,子元素属性不起作用,父元素下沉: <!DOCTYPE html> <html lang="en"> ...
- linux 磁盘管理三部曲——(3)mount挂载,/etc/fstab配置文件
当我们分完区,并做好文件系统格式化,就到了最后的挂载mount了,挂载完毕就可以使用磁盘设备了. 一.什么是挂载,卸载 任何块设备都不能直接访问,需挂载在目录上访问 挂载: 将额外文件系统与根文件系统 ...
- 对jbox2d引擎的一些回顾与思考(swing实现demo)
JBox2d回顾与思考 jbox2d 是 box2d 的java移植,感觉国内网络上针对jbox2d的教程还比较少(通常是box2d).回顾一下这几天的学习历程顺便写下博主的所思所想. swing实现 ...
- 【HTML5】input元素type属性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- for循环语句以及输出语句
action() { int i; //定义变量 lr_start_transaction("submit_answer"); //开始事物 for(i=0; i ...
- three.js实现3D模型展示
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能 ...
- 王者齐聚!Unite 2017 Shanghai 日程讲师全揭晓
汇聚了来自全球的 Unity开发者.发行商.培训家及爱好者的 Unite 2017 Shanghai 即将于于 5 月 11 日-13日在上海·国际会议中心隆重举行.Unite 大会是由 Unity ...
- treeview插件使用:根据子节点选中父节点
鄙人公司没有专门的前端,所以项目开发中都是前后端一起抡.最近用bootstrap用的比较频繁,发现bootstrap除了框架本身的样式组件外,还提供了多种插件供开发者选择.本篇博文讲的就是bootst ...