Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ELECTRON WORKSHOP ਞᤰELECTRONጱٵ॓ૡ֢ ▸ ਞᤰNode.js ▸ ਥᗑғ
 https://nodejs.org/en/ ▸ Ӿࢵ᳒؟ғ
 https://npm.taobao.org/mirrors/node/ v6.7.0/

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ELECTRON WORKSHOP ಑୏ELECTRON

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ELECTRON WORKSHOP ಑୏QUICK START ೒೫

Slide 13

Slide 13 text

ELECTRON WORKSHOP ಑୏QUICK START

Slide 14

Slide 14 text

ELECTRON WORKSHOP ELECTRONଫአጱच๜ᕮ຅ quick-start package.json main.js index.html renderer.js { "name":"electron-quick-start", "version":"0.0.1", "main":"main.js" } ଫአጱݷᑍ ଫአጱᇇ๜ ଫአጱفݗ෈կ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Hello World!

We are using node document.write(process.versions.node) require('./renderer.js')

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ᨀᨀ