HelloWorld for electron
$ git clone https://github.com/downgoon/hello-electron.git
$ cd hello-electron
$ npm start
$ electron-packager . --overwrite --out=target --icon=img/hello
$ npm run-script package
package.json
"scripts": {
"start": "electron .",
"package": "electron-packager . --overwrite --out=target --icon=img/hello"
},
package````start````npm
Mac````target/helloworld-electron-darwin-x64/helloworld-electron.app
index.html````Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
c1-index.html
index.html````node.js
web serverhttp://127.0.0.1:8080/index.html
var http = require('http');
var fs = require('fs');
http.createServer( function (request, response) {
console.log('request comming: ' + request.url);
fs.readFile('index.html', function (err, data) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(data.toString());
response.end();
});
}).listen(8080);
console.log('server running at http://127.0.0.1:8080/');
http````fs
Webhttp
8080Webindex.html
HTTP
server.js
$ node server.js
server running at http://127.0.0.1:8080/
request comming: /index.html
c2-server.js
nodeB/Selectron````index.html
var electron = require('electron');
electron.app.on('ready', function createWindow () {
new electron.BrowserWindow(
{width: 800, height: 600}
).loadURL('file://' + __dirname + "/index.html")
} );
main.js
URLURL
.loadURL('file://' + __dirname + "/index.html")
loadURL````electron````var electron = require('electron');
electron
app
: app.on('ready', function () {})
BrowserWindow
: new electron.BrowserWindow()
loadURL
htmlnode main.js````electron
nodenpm
$ node main.js
Error: Cannot find module 'electron'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
npm````node.js````maven````java````maven````pom.xml````npm````package.json
package.json
{
"name": "hello-electron",
"version": "0.0.1-SNAPSHOT",
"description": "HelloWorld electron",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "~1.6.2"
}
}
3
name````version
main.js````electron .````electron````npm````npm install -g electron
-g
electron-1.6.2
$ npm start
electron .
c3-main.js
index.html````CSS````javascript
<body>
<h1>Hello World!</h1>
<textarea rows="10"></textarea>
<button onclick="alert('you click write');">Write</button>
</body>
<head>
<style type="text/css">
body {
margin: 0;
}
textarea {
width: 100%;
border: none;
background: #eee;
margin: 10px 0;
padding: 0;
outline: none;
}
</style>
</head>
gitc4-interaction
electron````.html````node.js
var fs = require('fs');
var myTextarea = document.getElementsByTagName('textarea')[0];
var myButton = document.getElementsByTagName('button')[0];
// get input from textarea and write it into message.txt
function writeFile() {
var text = myTextarea.value;
fs.writeFileSync('message.txt',
text, 'utf8');
}
myButton.onclick = writeFile;
javascriptnodeDOMelectron
index.html
JS
<body>
<h1>Hello World!</h1>
<textarea rows="10"></textarea>
<button>Write</button>
</body>
<script>
require('./renderer.js')
</script>
gitc5-callnode
electron
node.js````chromium
``````Runtime``JavaScriptAPI
npm install electron --save-prod
npm install electron-packager -g
package.json
"dependencies": {
"electron": "^1.6.11",
}
npm
npm install
npm install
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
$ electron-packager .
$ tree helloworld-electron-darwin-x64 -L 1
helloworld-electron-darwin-x64
LICENSE
LICENSES.chromium.html
helloworld-electron.app // Mac
version
sourcedir
app````app
appname
: package.json````productName````name````name````productName
``````electronMac
Windows````Linux````--platform=````--arch=``
--platform````--arch````Mac````Mac
--all
3--platform=darwin --arch=x64````Mac
64--platform=win32 --arch=x64````Win
Flags3
--overwrite
--icon=./img/hello
****windowshello.ico
Machello.icns````.icns
Windows--out ./target
--platform
: linux, win32, darwin, mas, all--arch
: ia32, x64, armv7l, all
package.json
"scripts": {
"start": "electron .",
"package": "electron-packager . --overwrite --out=target --icon=img/hello",
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --out=target --icon=img/hello.icns",
"package-win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --out=target --icon=img/hello.ico",
"package-linux": "electron-packager . --overwrite --platform=linux --arch=x64 --out=target --icon=img/hello.png"
},
$ npm run package-linux // Linux
$ npm run package-win // Windows
$ npm run package-mac // Mac
icon.ico````.png````.icns
$ npm run installer-mac
package````npm run package-mac
jquery
<script src="js/jquery.js">
</script>
electron
issues-1
jquery
electron
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="js/jquery.js">
</script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
commit ebe00af32992041 c1-index.html
commit b730d4a1c605f6 c2-server.js
commit 230a72cac9104364 c3-main.js
commit be3f65bce233fd c4-interaction
commit b6f9befb7ac67c5 c5-callnode
commit 25093f4ba4ccd13 c6-electron-summary
c3-main.js
$ git checkout 230a72cac9104364