electron教程(一): electron的安裝和項目的建立

    added 253 packages from 162 contributors and audited 1117 packages in 42.157s
    found 5 vulnerabilities (1 low, 4 high)
    run `npm audit fix` to fix them, or `npm audit` for details html

就是要求用戶執行npm audit fix指令, 用於檢測項目依賴中的漏洞並自動安裝須要更新的有漏洞的依賴，而沒必要再本身進行跟蹤和修復。

在接下來的教程中, 讀者須要仔細觀察每個步驟的日誌, 及時進行修復, 本文將再也不反覆提醒.

3.安裝編譯環境

在cmd中, 執行指令:

npm install -g windows-build-tools

這個步驟將安裝python2.7和msbuild等內容.

4.設置環境變量

在cmd中, 執行指令:

npm config set python python2.7
npm config set msvs_version 2017

第一句指令, 指定了使用python2.7做爲編譯環境(在上一步中已經安裝), electron並不支持python3.x.

在指定了環境變量以後, 用戶不須要將本機中其餘python卸載.

第二句指令, 指定了使用項目使用的msvs版本.

若是你的電腦中安裝了VS, 須要把VS的MSBuild.exe添加到環境變量中, 具體步驟爲:

右鍵個人電腦->屬性->高級系統設置->環境變量->系統變量->編輯->新建->添加vs的MSBuild.exe目錄:

"你的vs安裝目錄"\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin

5.建立項目目錄

新建一個文件夾, 做爲你的項目根目錄. 目錄和路徑務必不要使用任何中文, 也儘可能不要出現空格.

在cmd窗口中, 使用cd命令, 將當前目錄更改成項目根目錄.

6.建立項目

執行指令:

npm init -y

這一步咱們使用npm初始化了項目, 並自動在項目根目錄創建了一個package.json文件, 這裏咱們暫時無論這個文件, 稍後再對它進行配置.

7.安裝electron

執行指令:

yarn add electron@latest --save-dev

這個指令將在你的項目中,安裝electron的最新版.

若是你想要安裝其餘版本的electron, 就把latest修改成對應的版本號,如electron@5.0.6或electron@beta

8.修改package.json

推薦使用vscode進行編輯.

內容以下:

{
  "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": "^6.0.10"
  }
}

我已經在package.json中添加了一些內容:

"start": "electron ./src/main.js"

指定了一個啓動腳本, 以後能夠經過這個腳原本啓動你的程序, 它將用electron來啓動src目錄下的main.js.

還能夠看到"devDependencies"中有一項"electron": ^6.0.10

這裏羅列出了你安裝的模塊, 以及對應的版本. 當你使用yarn add或npm install安裝模塊後, 這裏將自動更新.

9.添加main.js

在上一步中, 咱們在package.js中指定了項目啓動入口: ./src/main.js.

下面咱們建立這個文件, 並添加內容:

在項目根目錄下, 新建一個src目錄,用於存放源碼, 在src目錄下, 建立main.js文件.

添加以下內容:

// /////////////////////////////////////////////////////////////////////////
// electron
const {app, BrowserWindow} = require('electron');

// 保持對window對象的全局引用，若是不這麼作的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win;

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

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

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

  // 當 window 被關閉，這個事件會被觸發。
  win.on('closed', () => {
    // 取消引用 window 對象，若是你的應用支持多窗口的話，
    // 一般會把多個 window 對象存放在一個數組裏面，
    // 與此同時，你應該刪除相應的元素。
    win = null;
  });
}

// Electron 會在初始化後並準備
// 建立瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow);

// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
  // 不然絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在macOS上，當單擊dock圖標而且沒有其餘窗口打開時，
  // 一般在應用程序中從新建立一個窗口。
  if (win === null) {
    createWindow();
  }
});

// 在這個文件中，你能夠續寫應用剩下主進程代碼。
// 也能夠拆分紅幾個文件，而後用 require 導入。
// ////////////////////////////////////////////////////////

10.添加index.html

在上一步的main.js中, 咱們指定加載了一個html文件, 這個html文件, 就是程序的主頁面.

在項目根目錄下, 新建一個html目錄,用於存放與前端有關的內容, 在html目錄下, 建立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>