Electro桌面應用開發之HelloWorld

時間 2019-11-12

標籤 electro 桌面應用開發 helloworld 简体版

原文原文鏈接

簡介

Electron (http://http://electron.atom.io‎)提供了一個使用Node.js進行桌面應用開發的環境。本文介紹了一個基於Electron的HelloWorld應用的開發過程。html

第一步：建立應用源代碼文件

在本地新建一個HelloWorld目錄, 並建立以下文件node

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目錄下運行以下命令如下載和安裝Electronchrome

npm install electron --save-dev

該命令將Electron安裝在node_modules目錄下，同時也在package.json文件中添加Electron的相關信息npm

package.json

{
    "name": "HellowworldApp",
    "version": "0.1.0",
    "main": "main.js",
    "devDependencies": {
        "electron": "^1.4.4"
        }
    }

第三步：運行HelloWorld應用

在HelloWorld目錄下運行以下命令以運行HelloWorld應用。json

.\node_modules\.bin\electron .

第四步：打包HelloWorld應用

使用electron-packager生成能夠在本地直接運行的應用程序。windows

首先使用-g選項安裝electron-packager。app

npm install electron-packager -g

其次在HelloWorld目錄下運行以下命令以安裝HelloWorld應用。electron

npm install .

而後運行以下命令將HelloWorld應用打包ui

electron-packager .

在Windows 7環境下該命令會生成HellowworldApp-win32-x64目錄，包含HellowworldApp.exe和其它所需的文件。atom

總結

本文介紹了一個基於Electron的HelloWorld應用的開發過程。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Electro桌面應用開發之HelloWorld

簡介

第一步： 建立應用源代碼文件

第二步： 安裝Electron

第三步： 運行HelloWorld應用

第四步： 打包HelloWorld應用

總結

第一步：建立應用源代碼文件

第二步：安裝Electron

第三步：運行HelloWorld應用

第四步：打包HelloWorld應用