electron 的混合桌面之路
首先假裝很厲害的樣子介紹一下Github 官方制作的Atom代碼編輯器,這個編輯器是使用electron技術開發的號稱21世紀最富有變化的可擴展的編輯器(A hackable text editor for the 21st Century)。
- 界面簡單直觀,代碼高亮,智能提示補全的功能都還算強大貼心
- 它可擁有灰常多的插件,插件的編寫也十分便利,javascript就可以為其寫插件
- 最重要的是它讓無數人看到了HTML/CSS/JS桌面程序的未來
electron 究竟是個啥?
一句話:這是個在Node.js平台上運行的為了一些專門的功能而制作的瀏覽器
node.js: 一個編程專用的瀏覽器環境,可寫JavaScript
electron: 打包了一個特制的chrome瀏覽器和node.js ,然后我們加載網頁就行了,嚯嚯噠
那么,怎么使用這個electron,牛的很的技術呢
主要有以下幾個步驟:
- 下載並安裝node.js
- 檢查node.js和npm是否安裝成功(npm就是node.js 的一個商店,專門提供各種小功能【各種模塊】)
- 下載electron,注意:在線安裝不行的話請出門右轉選擇離線安裝
- 安裝electron或者直接使用
- 編寫第一個應用
1.下載並安裝node.js
node.js官網:https://nodejs.org/en/ 建議下載 4.x的版本,這個版本已經實現對ES6不錯的支持了
2.檢查node.js和npm是否安裝成功
- 命令行:node -v
- 命令行: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
- 命令行:electron .\ (你編寫的應用的那個文件夾下執行)
- 離線安裝的同學,請戳開electron.exe 把那個文件夾甩進去
5.編寫第一個應用
- 隨便弄個文件夾,新建一個文件:package.json
-
打開package.json,寫入如下內容
-
JSON格式
- name -> 你的應用名字
- version -> 版本號
- main: ->程序的主邏輯文件,node.js的寫法
-
編寫main.js,寫入內容如下

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