This is an old revision of the document!
electron quickstart
From scratch
npm init npm i electron-prebuilt --save-dev
Resulted files
- node_modules
- package.json
Simple test
/package.json
{
"name": "my-first-electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "ssm2017",
"license": "MIT",
"devDependencies": {
"electron-prebuilt": "^0.37.2"
}
}
/index.js
var app = require('app');
var BrowserWindow = require('browser-window');
app.on('ready', function() {
var mainWindow = new BrowserWindow({
width: 800,
height: 600,
'web-preferences': {
'web-security': false,
"webgl": true
}
})
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// mainWindow.loadUrl('http://html5test.com/'); // to see what is available
// mainWindow.openDevTools(); // to show the dev tools by default
})
/index.html
<html>
<head>
<title>yo</title>
</head>
<body>
<p>coucou</p>
<script type="text/javascript">
require('./app.js');
</script>
</body>
</html>
/app.js
document.write("the current version of io.js is " + process.version)
var fs = require('fs');
var contents = fs.readFileSync('./package.json', 'utf8');
alert(contents);
Multi windows
/package.json
{
"name": "second",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron-prebuilt": "^0.37.2"
}
}
/app.js
var app = require('app');
var BrowserWindow = require('browser-window');
var ipc = require('ipc');
app.on('ready', function() {
var mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadUrl('file://' + __dirname + '/main.html');
var prefsWindow = new BrowserWindow({
width: 400,
height: 400,
show: false
})
prefsWindow.loadUrl('file://' + __dirname + '/prefs.html');
ipc.on('show-prefs', function() {
prefsWindow.show();
})
ipc.on('hide-prefs', function() {
prefsWindow.hide();
})
})
/main.html
<!DOCTYPE html>
<html>
<head>
<title>main</title>
</head>
<body>
main
<script type="text/javascript">
require('./main.js');
</script>
</body>
</html>
/main.js
var remote = require('remote');
var ipc = require('ipc');
var Menu = remote.require('menu');
var menu = Menu.buildFromTemplate([
{
label: 'Electron',
submenu: [
{
label: 'Prefs',
click: function() {
ipc.send('show-prefs')
}
}
]
}
])
Menu.setApplicationMenu(menu);
/prefs.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Prefs
<script type="text/javascript">
var ipc = require('ipc');
var button = document.createElement('button');
button.textContent = 'Hide';
button.addEventListener('click', function() {
ipc.send('hide-prefs');
});
document.body.appendChild(button);
</script>
</body>
</html>