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

Electron Workshop - Shanghai 2016

Cheng Zhao
October 14, 2016

Electron Workshop - Shanghai 2016

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

Cheng Zhao

October 14, 2016
Tweet

More Decks by Cheng Zhao

Other Decks in Programming

Transcript

  1. ՗ᵭ୏ত
    ਍ԟᖫٟELECTRONଫአ
    ELECTRON WORKSHOP 2016 SHANGHAI

    View Slide

  2. ELECTRON WORKSHOP
    ىԭ౯
    ▸ ᩶౮
    ▸ ڠ᭜ԧElectron໛ຝ
    ▸ ࣁGitHubૡ֢
    ▸ ཻᬨىဳғhttps://github.com/zcbenz

    View Slide

  3. ELECTRON WORKSHOP
    ᬯེWORKSHOPጱፓຽ
    ▸ ԧᥴElectronጱचᏐᎣᦩ
    ▸ ൫ୌঅᖫٟElectronଫአጱሾह
    ▸ ਍ԟElectronଫአጱच๜ຝ຅
    ▸ ᛔ૩ᖫٟӞӻElectronଫአ

    View Slide

  4. ELECTRON WORKSHOP
    ▸ Electronݢզਖ਼ᗑᶭ಑۱౮ໟᶎଫአ
    ▸ ֵአChromium֢ԅ୚ක
    ▸ رᦜࣁᗑᶭӾֵአNode.js
    ▸ ൉׀ԧӞॺJavaScript APIӨᔮᕹԻ԰
    ՋԍฎELECTRON

    View Slide

  5. ELECTRON WORKSHOP
    ग़ᬰᑕຝ຅
    Ԇᬰᑕ
    ᗑᶭ ᗑᶭ … … …

    View Slide

  6. ELECTRON WORKSHOP
    ֵአNODE.JSഴګݱӻᬰᑕ
    Ԇᬰᑕ
    ᗑᶭ … … …
    Node.js
    Node.js
    Node.js
    ᗑᶭ Node.js

    View Slide

  7. ELECTRON WORKSHOP
    ᗑᶭԏᳵፘ԰ᵍᐶ҅Ԇᬰᑕ޾ᗑᶭአIPC᭗מ
    Ԇᬰᑕ
    ᗑᶭ … … …
    Node.js
    Node.js
    Node.js
    ᗑᶭ Node.js
    IPCᬰᑕᳵ᭗מ

    View Slide

  8. ELECTRON WORKSHOP
    ਞᤰELECTRONጱٵ॓ૡ֢
    ▸ ਞᤰNode.js
    ▸ ਥᗑғ

    https://nodejs.org/en/
    ▸ Ӿࢵ᳒؟ғ

    https://npm.taobao.org/mirrors/node/
    v6.7.0/

    View Slide

  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/
    ▸ ౲ᘏ޸եᤈӥғ

    View Slide

  10. ELECTRON WORKSHOP
    ಑୏ELECTRON

    View Slide

  11. ELECTRON WORKSHOP
    ӥ᫹QUICK START
    ▸ ಑୏https://github.com/electron/electron-quick-start
    ▸ ӥ᫹ZIP෈կғ

    View Slide

  12. ELECTRON WORKSHOP
    ಑୏QUICK START
    ೒೫

    View Slide

  13. ELECTRON WORKSHOP
    ಑୏QUICK START

    View Slide

  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"
    }
    ଫአጱݷᑍ
    ଫአጱᇇ๜
    ଫአጱفݗ෈կ

    View Slide

  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ཛྷࣘ

    View Slide

  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)
    ؙਂᑻݗ੒᨝ጱݒᰁ

    View Slide

  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)
    ڠୌӞӻᑻݗ

    View Slide

  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

    View Slide

  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)
    ಑୏୏ݎᘏૡٍ

    View Slide

  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)
    ࣁଫአ᫹فਠ౮෸ڠୌᑻݗ

    View Slide

  21. ELECTRON WORKSHOP
    ELECTRONଫአጱच๜ᕮ຅
    quick-start
    package.json
    main.js
    index.html
    renderer.js

    Hello World!
    We are using node
    <br/>document.write(process.versions.node)<br/>

    <br/>require('./renderer.js')<br/>

    View Slide

  22. ELECTRON WORKSHOP
    ELECTRONଫአጱच๜ᕮ຅
    quick-start
    package.json
    main.js
    index.html
    renderer.js // ᬯӻ෈կ᯾ᶎՋԍ᮷ဌํ֦҅ݢզࣁᬯ᯾ᶎֵአNode.jsጱAPI

    View Slide

  23. ELECTRON WORKSHOP
    ಑۱ELECTRONଫአ
    ▸ ਞᤰelectron-packagerғ
    npm install -g electron-packager
    electron-packager . --platform=win32 --arch=x64 —version=1.4.3
    ▸ ಑۱

    View Slide

  24. ᨀᨀ

    View Slide