為什么要使用electron
一：即使在移動(dòng)端和云端大行其道而，桌面應(yīng)用仍然占有重要的位置。和 Web 應(yīng)用比起來(lái)桌面應(yīng)用的優(yōu)點(diǎn)還是很多的：
- 明確的入口，只要把它們放在開始菜單欄或者 dock 上，你就能隨時(shí)打開它們
- 和操作系統(tǒng)之間的交互更良好（快捷鍵，通知欄等，切換應(yīng)用等）
二：但是如果要開發(fā)一個(gè)桌面應(yīng)用的話，windows，linux，mac三種操作系統(tǒng)的開發(fā)語(yǔ)言都是不一樣的?？缙脚_(tái)的特性，是在選擇開發(fā)桌面應(yīng)用的框架中，應(yīng)該優(yōu)先被考慮到的。
三：同時(shí)開發(fā)過(guò)Html和natvie(android， ios)的人應(yīng)該知道，HTML在制作界面方面，是比natvie應(yīng)用要便捷的。因此，一款可以使用前端語(yǔ)言（HTML+CSS+JS）,并且可以跨平臺(tái)的框架，就是我們的最佳選擇。目前，這種框架最出名的就是electron和NW.JS。在網(wǎng)上看了一些對(duì)比，electron比nw的坑少一些，活躍度更高，但是 ** electron不支持XP ** 。具體見(jiàn)如下鏈接 ： https://www.zhihu.com/question/38854224?sort=created
electron簡(jiǎn)介
electron是github的編輯器ATOM使用的應(yīng)用框架?？蚣苊枋?見(jiàn)網(wǎng)站
http://electron.atom.io/
它使用nodejs構(gòu)建，webkit瀏覽器內(nèi)核。完美支持一些高級(jí)JS語(yǔ)言，如ECMA6。并且和其他桌面應(yīng)用一樣，他可以使用nodejs的內(nèi)核操作文件系統(tǒng)。最吸引人的，就是它可以在網(wǎng)頁(yè)的js文件中require nodejs的一些api，直接使用。是不是很酷炫。
入門
首先你需要安裝nodejs和npm，然后執(zhí)行命令
# Install as a development dependency
npm install electron --save-dev
# Install the `electron` command globally in your $PATH
npm install electron -g
安裝在本地或者全局都可以。但是要注意的是，項(xiàng)目中使用的一些node工具包，必須安裝在本地，也就是不能使用-g命令。不然在打包成獨(dú)立的應(yīng)用的時(shí)候，會(huì)掛掉，這點(diǎn)需要注意。
項(xiàng)目結(jié)構(gòu)如下圖：
your-app/
── package.json
── main.js
── index.html
mian.js里，要初始化BrowserWindow模塊來(lái)加載index.html。具體可以見(jiàn)官網(wǎng)的例子
https://github.com/electron/electron-quick-start
值得注意的是，這個(gè)demo有個(gè)坑。在electron-quick-start里的package.json里，依賴的是
"devDependencies": {
"electron-prebuilt": "^1.2.0"
},
electron-prebuilt(https://github.com/electron-userland/electron-prebuilt) 是一個(gè) npm模塊，包含所使用的 Electron 預(yù)編譯版本。也就是說(shuō)，有這個(gè)，你就可以在開發(fā)的時(shí)候運(yùn)行electron的應(yīng)用了，并不需要預(yù)裝electron。而electron-prebuilt的依賴?yán)铮幸粋€(gè)electron-download模塊。據(jù)我猜測(cè)，這個(gè)模塊是用來(lái)下載最新版本的electron二進(jìn)制應(yīng)用的。而且這個(gè)模塊里的url是寫死的github上的下載地址。這也就是為啥很多人給npm設(shè)置了淘寶的源，依然在運(yùn)行demo工程時(shí)還需要下載，并且下載的這么慢的原因。這個(gè)坑糾結(jié)了我好久（因?yàn)槲业拇碚贸鰡?wèn)題了T_T）
其實(shí)我們完全可以手工下載eletron程序，直接運(yùn)行我們的應(yīng)用，具體教程見(jiàn)這里：
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md#手工下載-electron-二進(jìn)制文件
另附上淘寶的開源鏡像https://npm.taobao.org/mirrors/electron
好了，接下來(lái)就可以愉快的開發(fā)electron應(yīng)用了。electron提供了很多的api供大家選擇。包括文件選擇器，剪貼板之類的。具體地址見(jiàn)下方。http://electron.atom.io/docs/api/
打包
打包的話，推薦使用electron-packager(https://github.com/electron-userland/electron-packager)
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
如果沒(méi)有設(shè)定platform，會(huì)默認(rèn)選擇當(dāng)前的系統(tǒng)環(huán)境來(lái)打包。
第一次打包，會(huì)下載platform對(duì)應(yīng)的平臺(tái)的工程。依然使用的是electron-download，依然是寫死的url，沒(méi)有代理的同學(xué)默哀吧。
我的打包命令一般是這樣
electron-packager app代碼位置 應(yīng)用名字 --out 輸入位置
這樣你的應(yīng)用就打包好了，遇到一些坑，我會(huì)繼續(xù)更新文章的~
引用
https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine
