Electro桌面應用開發之HelloWorld
阿新 • • 發佈：2018-12-30
簡介
Electron (http://http://electron.atom.io)提供了一個使用Node.js進行桌面應用開發的環境。 本文介紹了一個基於Electron的HelloWorld應用的開發過程。
第一步： 建立應用原始碼檔案
在本地新建一個HelloWorld目錄, 並建立如下檔案
- package.json
{
"name": "HellowworldApp",
"version": "0.1.0",
"main": "main.js"
}- main.js
const {app, BrowserWindow} = require('electron') // Global reference of the window object let win function createWindow () { // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(`file://${__dirname}/index.html`) // Emitted when the window is closed. win.on('closed', () => { win = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } })
- index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
第二步： 安裝Electron
在HelloWorld目錄下執行如下命令以下載和安裝Electron
npm install electron --save-dev該命令將Electron安裝在node_modules目錄下，同時也在package.json檔案中新增Electron的相關資訊
- package.json
{ "name": "HellowworldApp", "version": "0.1.0", "main": "main.js", "devDependencies": { "electron": "^1.4.4" } }
第三步： 執行HelloWorld應用
在HelloWorld目錄下執行如下命令以執行HelloWorld應用。
.\node_modules\.bin\electron .
第四步： 打包HelloWorld應用
使用electron-packager生成可以在本地直接執行的應用程式。
首先使用-g選項安裝electron-packager。
npm install electron-packager -g其次在HelloWorld目錄下執行如下命令以安裝HelloWorld應用。
npm install .然後執行如下命令將HelloWorld應用打包
electron-packager . 在Windows 7環境下該命令會生成HellowworldApp-win32-x64目錄，包含HellowworldApp.exe和其它所需的檔案。
總結
本文介紹了一個基於Electron的HelloWorld應用的開發過程。