Electron學習筆記[1]

什麼是Electron

Electron(最初名爲Atom Shell[3])是GitHub開發的一個開源框架。它允許使用Node.js(作爲後端)和Chromium(作爲前端)完成桌面GUI應用程序的開發。

Electron 可以讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你可以把它看作一個專注於桌面應用的 Node.js 的變體,而不是 Web 服務器。

很多很著名的桌面應用都是使用Electron作爲框架搭建的,比如說Atom,VSCode等.

安裝Electron

在已經安裝NodeJS環境後

npm install -g electron-prebuilt

第一個程序,Hello World

首先,現在要寫新工程的新建的文件夾內運行如下命令,初始化.

npm init

然後根據提示進行配置,不想配置的就一路回車好了

然後,新建一個index.js 和 index.html

index.js內容如下:

const {app, BrowserWindow} = require('electron')
app.on('ready', function(){
  var mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  mainWindow.loadURL('file://' + __dirname + '/index.html');
})

index.html內容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

然後再命令行裏使用如下命令執行剛剛寫的程序(不要漏掉最後的那個點):

electron .

結果如圖:

結果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章