Electro桌面应用开发之HelloWorld

最新推荐文章于 2024-10-08 13:00:00 发布

weixin_30393907

最新推荐文章于 2024-10-08 13:00:00 发布

阅读量365

点赞数

文章标签： c# json javascript ViewUI

原文链接：http://www.cnblogs.com/huyouhengbc/p/6020654.html

版权

简介

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"
        }
    }