對於electron是個新手,下面純屬個人理解。如有錯誤，歡迎指出。
一.安裝
如果你本地按照github上的
# Install the `electron` command globally in your $PATH
npm install electron-prebuilt -g
安裝不起來的話，沒事。按照這個博友的方法來安裝即可。
Electron安裝
二.Electron是什么
類似NW.js。但是好像比它強大很多。而且社區很活躍，很有前途。
三.廢話不多說，直接上實例。
main.js（主進程）
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
function createWindow(){
mainWindow = new BrowserWindow({
width:800,
height:400
})
mainWindow.loadURL(`file://${__dirname}/index.html`);
mainWindow.webContents.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready',createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
1.創建窗口的用法：
BrowserWindow 類讓你有創建一個瀏覽器窗口的權力。
當然這里面有很多options
new BrowserWindow([options])
optionsObjectwidthInteger - 窗口寬度,單位像素. 默認是800.heightInteger - 窗口高度,單位像素. 默認是600.xInteger - 窗口相對於屏幕的左偏移位置.默認居中.yInteger - 窗口相對於屏幕的頂部偏移位置.默認居中...等等
2.
app 模塊是為了控制整個應用的生命周期設計的
app有很多事件：
ready:當 Electron 完成初始化時被觸發，常用的
window-all-closed:當所有的窗口都被關閉時觸發，常用的
quit:當應用程序正在退出時觸發，常用的
....等等
3.mainWindow.webContents.openDevTools()這個是調用開發者工具的，用來調試頁面
4.所以上面的js應該就很好理解了吧。
html:
<!DOCTYPE html>
<html>
<head>
<title>zqz_electron</title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { alert('zqz click item 1'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
menu.popup(remote.getCurrentWindow());
}, false);
</script>
<body>
<input type="file">選取文件</input>
</body>
</html>
頁面要注意：
1. html中的require('electron').remote與js中的electron = require('electron')是不一樣的。
remote是什么：
remote 模塊提供了一種在渲染進程（網頁）和主進程之間進行進程間通訊（IPC）的簡便途徑
在這里，js就是主進程，頁面中的js就是渲染進程。
如果要使得獨立js中與頁面js的代碼互相操作。必要要使用這樣的通訊途徑。(這個例子沒有很好的驗證，在我下一篇的例子上就有，還有ipc)
2.Menus：是用來創建一個新的菜單.
3.MenuItem：菜單項模塊允許你向應用或menu添加選項
package.json
{ "name": "zqz", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron main.js" }, "devDependencies": { } }
運行：
效果：
