Electron Workshop - Shanghai 2016

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. ᨀᨀ