入门干货之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 = 1152,
                Height = 864,
                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 这个例子代码,如果窗口不显示Show=false改成true试试。

      那里面的例子是C#以及js对照的,js的明显没官网的全, 就算你看完例子也不一定能找到上面代码中的一些代码,因为我翻了点源码。毕竟是初版,啥都慢慢来吧。

      今儿的例子我传到:https://github.com/NMSLanX/ElectronNET.Demo

0x02、广告

    

0x03、结尾

    

    上了岁数了,时间和精力明显不够了,自顶而下的学习方法也成为了习惯。

    很多类库的文档以及demo对于开发人员来说就是天书,我从来不怪身边人说:"我看不懂,太难了,我不会。"

    我从不侮辱他们的智商,如果有人不懂,那一定是作者以及团队的事,项目文档不够全面,demo的功能覆盖率低,同时也是生态中每个人的失职!

       降低学习成本是每个.NET传教士义务与责任。

    建立生态,保护生态,见者有份。

原文地址:https://www.cnblogs.com/NMSLanX/p/8278138.html

时间: 2024-07-30 09:11:27

入门干货之Electron的.NET实现-Electron.NET的相关文章

Electron实战:创建ELectron开发的window应用安装包

前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中windsow平台上面,文章中建议先用grunt-electron-installer 模块来创建windows安装包,grunt这个工具是由Squirrel集成的.进而了解下Squirrel这个工具, 一个可以用来给electron应用的安装更新卸载添加快捷方式的工具.本文主要提及如何在windows平台下

史上最强超融合入门干货:超融合与传统架构特性及收益详细对比

在IT基础架构领域工作有十年了,亲眼目睹和参与了上一代网络存储架构在中国的兴起和衰败.的确,新IT浪潮已经到来,超融合就是诸多风口之一,成为了近几年IT业界备受关注的话题.虽然超融合这个概念已经被厂商热炒了至少两年,但看到市场上依旧存在着很多模糊的定义和理解,所以想整理一些学习笔记和个人见解,希望这些干货内容能对想入门的朋友有所帮助 . 一.超融合的核心特征是什么? 首先大家需要有一个概念,我们看到的这些名词,事实上都是最早推行这些架构的厂商建立起来的,比如Nutanix最早推广的超融合这个概念

好程序员分享自学大数据入门干货

首先,提及大数据一词的概念.大数据本质还在于数据,但是它有着新的特征亮点.包括:数据来源广,数据格式多样化(结构化数据.非结构化数据.Excel文件.文本文件等).数据量大(最少也是TB级别的.甚至可能是PB级别).数据增长速度快等等. 扩展讲大数据的4个基本特征,我们将进行下面额思考: 1.数据来源广? 广泛的数据来源从何而来,通过何种方式进行采集与汇总?相对应的我们出现Sqoop, Cammel,Datax等工具. 在这里还是要推荐下我自己建的大数据学习交流群:529867072,群里都是学

入门干货之用DVG打造你的项目主页-Docfx、Vs、Github

由于这三项技术涉及到的要点以及内容较多,希望大家有空能自己挖掘一下更多更深的用法. 0x01.介绍 VS,即VS2017以及以上版本,宇宙最好的IDE,集成了宇宙最有前景的平台,前阶段也支持了宇宙最好的语言. Github,知名的代码/项目托管平台,不想赘述了,如果干两三年了这个都不认识,自觉转行吧,我不在文章里说什么,但你得晓得,我肯定偷偷的鄙视你了. Docfx,类似JSDoc或Sphinx,可以从源代码中提取注释生成文档之外,而且还有语法支持你加入其他的文件链接到API添加额外的说明,Do

Electron 构建桌面应用程序开发资料整理

Electron 是什么? Electron 是一个程序库,基于Electron库我们可以使用HTML.CSS.JS来开发跨平台桌面应用程序(building cross-platform desktop applications with HTML, CSS, and JavaScript.) 学习资源  Electron 官网文档  https://electron.atom.io/docs/ Electron 实现原理 ? Electron 结合了 Chromium 开源浏览器和带有一系列

用全栈神器electron 打全平台桌面级 app--Music Player

什么是Electron? Electron 技术方案进行桌面端的开发,跨平台兼容 macOS.Windows.Linux 等操作系统.可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序. 快速入门 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服务器. 这不意味着 Electron 是绑定了 GUI 库的 JavaScript.相反,E

Electron打包前端代码

本文主要介绍如何利用Electron将前端代码打包成exe文件. 其实如何通过Electron将前端代码打包成exe文件,其入门教程讲的挺详细的,但是浏览一遍下来还是不太清楚到底该怎么操作,这里只是将其细化分解. 首先,我们需要确保我们的电脑上已经配置好了Node.js环境,如果没有的话,请到Node.js下载并安装配置. 其次,我们需要有一个写好的Electron应用,如果你不嫌麻烦的话,可以按照入门教程中的打造你第一个Electron应用一步一步自己手动创建,但是我会从他的GitHub仓库里

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

本文引用了作者“ ConardLi”的<用JS开发跨平台桌面应用,从原理到实践>一文部分内容,原文链接:segmentfault.com/a/1190000019426512,感谢原作者的无私分享. 1.引言 现在开发IM应用动不动就要求多端——即Android端.iOS端.PC端.Web端等,Android端和iOS端作为两种不同的移动端技术,单独开发和维护还能理解,PC端和Web端如果要单独开发那就有点头大了,必竟开发传统的PC桌面应用成本太高(QT这类技术跟Web技术相比,上手难度大的多

Electron使用与学习

对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出. 一.安装 如果你本地按照github上的 # Install the `electron` command globally in your $PATH npm install electron-prebuilt -g 安装不起来的话,没事.按照这个博友的方法来安装即可.Electron安装 二.Electron是什么 类似NW.js.但是好像比它强大很多.而且社区很活跃,很有前途. 三.废话不多说,直接上实例. main.j