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应用