electron安裝

electron 的混合桌面之路

首先假裝很厲害的樣子介紹一下Github 官方制作的Atom代碼編輯器，這個編輯器是使用electron技術開發的號稱21世紀最富有變化的可擴展的編輯器（A hackable text editor for the 21st Century）。

1. 界面簡單直觀，代碼高亮，智能提示補全的功能都還算強大貼心
2. 它可擁有灰常多的插件，插件的編寫也十分便利，javascript就可以為其寫插件
3. 最重要的是它讓無數人看到了HTML/CSS/JS桌面程序的未來

electron 究竟是個啥？

一句話：這是個在Node.js平台上運行的為了一些專門的功能而制作的瀏覽器
node.js: 一個編程專用的瀏覽器環境，可寫JavaScript
electron： 打包了一個特制的chrome瀏覽器和node.js ,然后我們加載網頁就行了，嚯嚯噠

那么，怎么使用這個electron，牛的很的技術呢

主要有以下幾個步驟：

1. 下載並安裝node.js
2. 檢查node.js和npm是否安裝成功（npm就是node.js 的一個商店，專門提供各種小功能【各種模塊】）
3. 下載electron，注意：在線安裝不行的話請出門右轉選擇離線安裝
4. 安裝electron或者直接使用
5. 編寫第一個應用

1.下載並安裝node.js

node.js官網：https://nodejs.org/en/ 建議下載 4.x的版本，這個版本已經實現對ES6不錯的支持了

2.檢查node.js和npm是否安裝成功

1. 命令行：node -v
2. 命令行：npm -v

3.下載electron

electron官網：http://electron.atom.io/ PS.應該是，我覺得
GitHub 坐標：https://github.com/electron/electron api 官方文檔才是解決問題的王道
中文翻譯官方文檔：https://github.com/electron/electron/tree/master/docs-translations/zh-CN
3. npm 在線下載

 - 命令行:npm install electron -g (加g 全局安裝，自動添加到環境變量)
 - 命令行:cd your-app-path 
 - 命令行:electron .\ （應用跑起來）

4. 離線下載

->到各家鏡像網站摸一個electron下來 對應平台摸搞錯了，很尷尬的
寶寶鏡像：https://npm.taobao.org/mirrors/electron/
GitHub：https://github.com/electron/electron/releases
csdn 下載頻道：地址忘了，自己找，我才懶得翻歷史記錄呢

4.安裝electron或者直接使用

如果上面的步驟沒有出現錯誤提示，那么直接使用即可，: D

1. 命令行：electron .\ (你編寫的應用的那個文件夾下執行)
2. 離線安裝的同學，請戳開electron.exe 把那個文件夾甩進去

5.編寫第一個應用

1. 隨便弄個文件夾，新建一個文件：package.json

2. 打開package.json，寫入如下內容

3. 

4. JSON格式

   • name -> 你的應用名字
   • version -> 版本號
   • main: ->程序的主邏輯文件，node.js的寫法

5. 編寫main.js，寫入內容如下

剩下的事情就是如何編寫頁面了，看官方文檔吧，騷年！
我感覺優化的好的的話，以后Photoshop都可以用electron寫！
當然C/C++的功底是必須的，哈哈！
PS. 現在可以用ES6寫electron了，兼容性問題不大！
electron 參考工具鏈：http://electron.atom.io/community/
LOL全新客戶端也要用electron（准確的說的是直接編譯的CEF）