Electron.js折腾记(一):getStart

第一步,下载electron

这个网址http://electron.atom.io/
下载Get started
这个东西下载下来就是一个这个,好像是一个向导之类的吧
Electron.js折腾记(一):getStart_第1张图片

然后按照提示clone一个简单的quick-start

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

一个简单的electron结构

  • package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "author": "HawenXing"
}
  • main.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()


  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})
  • index.html
  <body>
    <h1>Hello World!h1>
    
    We are using node <script>document.write(process.versions.node)script>,
    Chromium <script>document.write(process.versions.chrome)script>,
    and Electron <script>document.write(process.versions.electron)script>.
  body>

运行app

首先需要 npm electron-prebuilt
electron-prebuilt 是npm的模块,包含了ELectron的pre-compiled.

//如果是全局安装的 
npm electron-prebuilt -g 
//那么可以执行 electron . 运行electron
//如果是本地安装的,那么在安装的node_modules的bin中运行
./node_modules/.bin/electron .

Windows中运行
$ .\electron\electron.exe your-app\

执行效果
Electron.js折腾记(一):getStart_第2张图片

你可能感兴趣的:(node)