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 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/ ▸ ౲ᘏ޸եᤈӥғ
  2. 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ཛྷࣘ
  3. 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) ؙਂᑻݗ੒᨝ጱݒᰁ
  4. 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) ڠୌӞӻᑻݗ
  5. 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
  6. 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) ಑୏୏ݎᘏૡٍ
  7. 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) ࣁଫአ᫹فਠ౮෸ڠୌᑻݗ
  8. 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>