Electron Workshop - Shanghai 2016

The slides for the Electron workshop at Shanghai HACK×FDU.

Transcript

1. ՗ᵭ୏ত ਍ԟᖫٟELECTRONଫአ ELECTRON WORKSHOP 2016 SHANGHAI
2. ELECTRON WORKSHOP ىԭ౯ ▸ ᩶౮ ▸ ڠ᭜ԧElectron໛ຝ ▸ ࣁGitHubૡ֢ ▸ ཻᬨىဳғhttps://github.com/zcbenz
3. ELECTRON WORKSHOP ᬯེWORKSHOPጱፓຽ ▸ ԧᥴElectronጱचᏐᎣᦩ ▸ ൫ୌঅᖫٟElectronଫአጱሾह ▸ ਍ԟElectronଫአጱच๜ຝ຅ ▸ ᛔ૩ᖫٟӞӻElectronଫአ
4. ELECTRON WORKSHOP ▸ Electronݢզਖ਼ᗑᶭ಑۱౮ໟᶎଫአ ▸ ֵአChromium֢ԅ୚ක ▸ رᦜࣁᗑᶭӾֵአNode.js ▸ ൉׀ԧӞॺJavaScript APIӨᔮᕹԻ԰ ՋԍฎELECTRON
5. ELECTRON WORKSHOP ग़ᬰᑕຝ຅ Ԇᬰᑕ ᗑᶭ ᗑᶭ … … …
6. ELECTRON WORKSHOP ֵአNODE.JSഴګݱӻᬰᑕ Ԇᬰᑕ ᗑᶭ … … … Node.js Node.js Node.js ᗑᶭ Node.js
7. ELECTRON WORKSHOP ᗑᶭԏᳵፘ԰ᵍᐶ҅Ԇᬰᑕ޾ᗑᶭአIPC᭗מ Ԇᬰᑕ ᗑᶭ … … … Node.js Node.js Node.js ᗑᶭ Node.js IPCᬰᑕᳵ᭗מ
8. ELECTRON WORKSHOP ਞᤰELECTRONጱٵ॓ૡ֢ ▸ ਞᤰNode.js ▸ ਥᗑғ
 https://nodejs.org/en/ ▸ Ӿࢵ᳒؟ғ
 https://npm.taobao.org/mirrors/node/ v6.7.0/
9. ELECTRON WORKSHOP ਞᤰELECTRON npm config set registry https://registry.npm.taobao.org set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron ▸ Ӿࢵ᳒؟ӥ᫹ғ
 https://npm.taobao.org/mirrors/ electron/1.4.3/ ▸ ౲ᘏ޸եᤈӥғ
10. ELECTRON WORKSHOP ಑୏ELECTRON
11. ELECTRON WORKSHOP ӥ᫹QUICK START ▸ ಑୏https://github.com/electron/electron-quick-start ▸ ӥ᫹ZIP෈կғ
12. ELECTRON WORKSHOP ಑୏QUICK START ೒೫
13. ELECTRON WORKSHOP ಑୏QUICK START
14. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js { "name":"electron-quick-start", "version":"0.0.1", "main":"main.js" } ଫአጱݷᑍ ଫአጱᇇ๜ ଫአጱفݗ෈կ
15. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ୚አElectronཛྷࣘ
16. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ؙਂᑻݗ੒᨝ጱݒᰁ
17. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ڠୌӞӻᑻݗ
18. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ࣁᑻݗٖ᫹ف୮ڹፓ୯ӥጱindex.html
19. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ಑୏୏ݎᘏૡٍ
20. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ࣁଫአ᫹فਠ౮෸ڠୌᑻݗ
21. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js <body> <h1>Hello World!</h1> We are using node <script> document.write(process.versions.node) </script> </body> <script> require('./renderer.js') </script>
22. ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js // ᬯӻ෈կ᯾ᶎՋԍ᮷ဌํ֦҅ݢզࣁᬯ᯾ᶎֵአNode.jsጱAPI
23. ELECTRON WORKSHOP ಑۱ELECTRONଫአ ▸ ਞᤰelectron-packagerғ npm install -g electron-packager electron-packager . --platform=win32 --arch=x64 —version=1.4.3 ▸ ಑۱
24. ᨀᨀ