Electron簡單例子

時間 2021-05-27

標籤 html node web npm json 瀏覽器服務器 app electron 函數欄目 HTML 简体版

原文原文鏈接

Electron 可使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。咱們能夠把它看做一個 Node. js 的變體，它專一於桌面應用而不是 Web 服務器端。html

從開發的角度來看，Electron 應用本質上是一個 Node. js 應用程序。與 Node.js 模塊相同，應用的入口是 package.json 文件。一個簡單的 Electron 項目包含三個基本文件：package.json，index.hmtl，main.js 。node

package.json 是 Node.js項目的配置文件。
index.html 是桌面應用的界面頁面。
main.js 是應用的啓動入口文件。

建立項目

咱們在指定路徑中新建一個名爲 my_electron 的文件夾做爲項目根目錄，而後在命令工具中使用 cd 命令，將當前目錄更改成項目根目錄：web

>cd C:\Users\lu\Desktop\my_electron

以下圖所示：npm

而後執行 npm init 命令進行項目初始化，以下圖所示：json

命令執行成功後，項目根目錄下會建立一個 package.json 文件，若是所有選擇默認配置，則能夠直接執行 npm init -y 命令。瀏覽器

修改package.json

咱們能夠修改建立好的 package.json 文件，在 scripts 中添加腳本命令，以下所示：服務器

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js"
  },
  "keywords": [],
  "author": "Silenzio",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.2"
  }
}

咱們在這個文件中指定了一個啓動腳本，以後能夠經過這個腳原本啓動程序，它將用 electron 來啓動 src 目錄下的 main.js 文件。app

還能夠看到在這個文件中的 "devDependencies" 中有一項 "electron": "^10.1.2"，表示將 electron 安裝成功並添加到依賴中。electron

建立main.js文件

咱們在項目的根目錄下建立一個 src 文件夾，並在這個文件夾中建立一個 main.js 文件，這個文件就是應用的啓動入口文件。函數

Electron 應用使用 JavaScript 開發，其工做原理和方法與 Node.js 開發相同。electron 模塊包含了 Electron 提供的全部 API 和功能，引入方法和 Node.js 模塊同樣，均可以經過 require() 來引入，例如：

const electron = require('electron')

electron 模塊所提供的功能都是經過命名空間暴露出來的。例如 electron.app 負責管理 Electron 應用程序的生命週期，electron.BrowserWindow 類負責建立窗口等。

示例：

例如咱們要在 main.js 文件中建立窗口，內容以下所示：

// 引入electron
const {app, BrowserWindow} = require('electron');
let win;

function createWindow() {
  // 建立瀏覽器窗口
  win = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加載index.html文件
  win.loadFile('../html/index.html');

  // 自動打開開發者工具
  win.webContents.openDevTools();

  // 當 window 被關閉，這個事件會被觸發
  win.on('closed', () => {
    win = null;
  });
}

// Electron 會在初始化後並準備，建立瀏覽器窗口時，調用這個函數
app.on('ready', createWindow);
// 當所有窗口關閉時退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

添加index.html文件

在上面的 main.js 文件中咱們指定了一個 index.html 文件，這個 html 文件，就是程序的主頁面。

因此咱們還須要在項目的根目錄下建立一個 html 文件夾，在這個文件夾中建立一個 index.html 文件，內容以下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>my_electron</title>
  </head>
  <body>
    <h1>你好，俠課島!</h1>
  </body>
</html>

啓動項目

在完成了項目的建立、初始化項目、安裝 electron 、建立必要文件這幾個步驟以後，如今咱們就能夠開始啓動項目啦。由於咱們已經在 package.json 文件中設置了腳本命令，因此只須要直接在項目根目錄下直接以下指令便可：

npm start

命令執行完成以後，程序後被啓動，以下圖所示：

此時桌面上啓動了一個獨立的程序，這個程序中界面的左邊顯示的是渲染後的 index.html ，界面的右邊部分則是 Chrome/Chromium 瀏覽器的開發者選項。由於咱們在 main.js 文件中設置了 win.webContents.openDevTools(); ，因此在啓動程序時會自動打開開發者工具。若是須要開發者工具，只須要將這句代碼註釋，而後再次啓動程序便可。

相關標籤/搜索

每日一句

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