Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Electron Workshop - Shanghai 2016

Dc13d329db98a4ff44d52013b80e3bf4?s=47 Cheng Zhao
October 14, 2016

Electron Workshop - Shanghai 2016

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

Dc13d329db98a4ff44d52013b80e3bf4?s=128

Cheng Zhao

October 14, 2016
Tweet

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