入門乾貨之Electron的.NET實現-Electron.NET

0x0一、Electron.NET

　　一、介紹

　　　　Electron是由Github上的一支團隊和一羣活躍貢獻者維護。用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron經過將Chromium和Node.Js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。官方地址：https://electronjs.org。Chromium是谷歌瀏覽器的引擎，Node.js,就是.......還用我說嗎？

　　　　Electron.Net是對這項技術的C#實現，棒棒的。( .NET Core版本)

　　二、吐槽

　　　　也是兩個月沒更了，有灰，某些Bug在修復中，剛入門的時候特糾結，如今整理出來了，讓老鐵門少些煩惱。

　　三、搭建流程(如下流程是對電腦上沒有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的配置，除了這個環境須要，其它我也不用它。

　　四、開發

　　　　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

0x0二、廣告

　　　　

0x0三、結尾

　　　　

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

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

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

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

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