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，寫入以下內容

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）