electron-建立一個hello world應用

時間 2019-11-13

標籤 electron 建立一個 hello world 應用简体版

原文原文鏈接

在進行該章內容以前，咱們假設你已經正確的建立了一個package.json文件以及安裝完成electron.如今咱們經過electron建立第一個桌面的應用。css

建立一個新的文件main.js，而且寫入下面的代碼。html

const {
    app,
    BrowserWindow
} = require('electron')
const url = require('url')
const path = require('path')
let win

function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600
    })
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }))
}
app.on('ready', createWindow)

另外咱們還須要建立一個index.html,而且在該文件裏面寫入下面的語句。node

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <h1>Hello World</h1>
    We are using node
    <scrip>document.write(process.versions.node)</scrip>
    Chrome
    <script>
        document.write(process.versions.chrome)
    </script>
    and Electron
    <script>
        document.write(process.versions.electron)
    </script>

</body>

</html>

咱們以後咱們經過命令行輸入以下的命令，卻可運行應用。chrome