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?這個是各種各種C#例子代碼，如果窗口不顯示Show=false改成true試試。

　　　　　　那里面的例子是C#以及js對照的，js的明顯沒官網的全， 就算你看完例子也不一定能找到上面代碼中的一些代碼，因為我翻了點源碼。畢竟是初版，啥都慢慢來吧。

　　　　　　今兒的例子我傳到：https://github.com/NMSLanX/ElectronNET.Demo

0x03、結尾

　　　　

　　　　上了歲數了，時間和精力明顯不夠了，自頂而下的學習方法也成為了習慣。

　　　　很多類庫的文檔以及demo對于開發人員來說就是天書，我從來不怪身邊人說："我看不懂，太難了，我不會。"

　　　　我從不侮辱他們的智商，如果有人不懂，那一定是作者以及團隊的事，項目文檔不夠全面，demo的功能覆蓋率低，同時也是生態中每個人的失職！

　　　 ? ?降低學習成本是每個.NET傳教士義務與責任。

　　　　建立生態，保護生態，見者有份。

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

---

.NET社區新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結

以上是生活随笔為你收集整理的入门干货之Electron的.NET实现-Electron.NET的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。