我的electron教程系列
electron教程(一): electron的安裝和項目的創建
electron教程(番外篇一): 開發環境及插件, VSCode調試, ESLint + Google JavaScript Style Guide代碼規范
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode調試TypeScript, TS版本的ESLint
electron教程(二): http服務器, ws服務器, 子進程管理
electron教程(三): 使用ffi-napi引入C++的dll
electron教程(四): 使用electron-builder或electron-packager將項目打包為可執行桌面程序(.exe)
一. 安裝
1.安裝node.js
推薦下載LTS版本(當前為10.16.3), 默認安裝即可.
2.安裝yarn
以管理員模式啟動cmd, 執行指令:
npm install yarn -g
根據官網介紹, Yarn 對你的代碼來說是一個包管理器， 你可以通過它使用全世界開發者的代碼， 或者分享自己的代碼。Yarn 做這些快捷、安全、可靠，所以你不用擔心什么。
在這里, 我們使用yarn來代替默認的npm包管理器
注: 從這一步開始, 任何一步指令執行完成后, 都需要仔細查看cmd窗口中打印的日志.
日志中會有一些關鍵的提示, 比如在你執行yarn add xxx 或npm install xxx之后, 打印了如下日志
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>
11.啟動!
在前面幾步中,我們依次完成了項目的創建、初始化、electron安裝、添加三個必要文件(即package.json、main.js和index.html).
現在, 我們終於可以啟動我們的electron程序了!
確保你的工作目錄為項目根目錄, 並執行指令:
npm start
程序已啟動!
桌面上啟動了一個獨立的程序, 界面的左邊顯示的是渲染后的index.html, 而界面的右面其實是Chrome/Chromium瀏覽器的開發者選項(F12).
如果不需要開發者選項來進行調試的話, 只需要將main.js中的win.webContents.openDevTools()注釋掉,再次通過npm start來啟動我們的程序.
現在, 你可以通過修改index.html, 來給程序的主界面添加一些新元素了.