從零開始學Electron筆記(一)初識 Electron,并用 Electron 建構我們的第一個應用。
前端技術在最近幾年迅猛發展,在任何開發領域我們都能看到前端的身影,從PC端到手機端,從APP到小程式,似乎前端已經無所不能,這就要求我們需要不斷地去學習來提升自己!前段時間尤大通過直播介紹了一下Vue3.0開發的心路曆程并放話今年釋出,Deno v1.0 的釋出,揚言要幹掉Node,摸了摸日漸稀疏的頭發,表示真心學不動了,但摸了摸幹癟但口袋表示扶我起來我還能學!
接下來我們要說到但是一個可以開發桌面級應用的架構Electron。
先簡單介紹一下Electron,它是由GitHub團隊開發,目前在GitHub上star已經超過了83k,還是非常受歡迎的。
官方網站:https://www.electronjs.org/
GitHub位址:https://github.com/electron/electron
那Electron到底是個什麼東西呢?官方網站首頁用一句話為我們進行了概括:
使用 JavaScript,HTML 和 CSS 建構跨平台的桌面應用程式
從上面這句話我們可以看出,作為前端開發者,我們也可以根據基本的web開發語言來開發桌面級的應用,聽起來還是很誘人的,但是還會誘人擔心開發的軟體會不會存在一些與原生語言開發的有差距呢?這點不必擔心,很多大公司也都在用Electron進行開發并有許多非常成功的案例,如我們程式員用到的VSCode,Atom等就是基于Electron開發的。
接下來我們來看一張圖來進一步搞清楚Electron:
從上圖可以看出Electron基于了谷歌的核心Chromium,為我們提供了強大的UI支援,使我們不用再考慮各浏覽器的相容性問題。Node.js為我們提供了強大的後端服務支撐,可以非常友善的內建管理npm包,Native API為我們提供了多平台的統一API,可以在Windows,Mac和Linux等不同平台上進行運作。
接下來我們就通過Electron來從最基本的hello world開始進行開發。
首先我們需要安裝Node.js,安裝方式還是很簡單的,在官網上找到下載下傳位址一路确認即可安裝成功。
官網位址:https://nodejs.org/zh-cn/
安裝成功後我們在電腦的指令行工具中輸入 node -v ,npm -v,如果這兩個指令都傳回相應的版本資訊說明我們已經安裝成功來,我們最好安裝node v7 以上的版本。
Electron官方網站其實已經為我們初學者提供了一個簡單的應用 https://www.electronjs.org/docs/tutorial/first-app#installing-electron,但是本着開發者的精神我們還是要一步一步地将代碼進行敲打才能融入到腦子裡,接下來本人寫的代碼可能跟官方的有些出入,但大體上是一緻的。
首先我們在本地建立一個檔案夾 electron-demo,然後進入該目錄通過指令行的方式輸入 npm init ,這樣我們就初始化了一個node開發環境,并在檔案夾下會生成一個package.json 的檔案,如下:
然後我們通過指令行的方式引入electron包 npm install electron --save ,基于網絡原因可能下載下傳會慢一些,我們可以通過淘寶鏡像的cnpm進行下載下傳。
安裝完成後我們在electron檔案夾下建立index.html和index.js檔案,最後目錄結構如下:
我們在index.html内寫入了一個最基本的hello world,就像我們平時寫html檔案一樣,接下來就是重點的index.js檔案了。
1 const {app, BrowserWindow} = require('electron');
2
3 function createWindow() {
4 // 建立浏覽器視窗
5 let win = new BrowserWindow({
6 width: 800, // 寬
7 height: 600, // 高
8 webPreferences: { // 啟用node可以在渲染程序中使用
9 nodeIntegration: true
10 }
11 });
12
13 // 并且為你的應用加載index.html
14 win.loadFile('index.html');
15
16 // 打開開發者工具
17 win.webContents.openDevTools();
18
19 // 将 win 置為 null,防止占用記憶體
20 win.on('closed', () => {
21 win = null;
22 });
23 }
24
25 app.on('ready', () => {
26 createWindow();
27 });
在上面的代碼中,我都加了注釋,代碼看起來其實并不複雜,就是引入electron,然後根據electron提供的方法打開一個800*600的視窗。
接下來我們看一下官方為我們提供的js寫法:
1 const {app, BrowserWindow} = require('electron')
2
3 function createWindow() {
4 // 建立浏覽器視窗
5 const win = new BrowserWindow({
6 width: 800,
7 height: 600,
8 webPreferences: {
9 nodeIntegration: true
10 }
11 })
12
13 // 并且為你的應用加載index.html
14 win.loadFile('index.html')
15
16 // 打開開發者工具
17 win.webContents.openDevTools()
18 }
19
20 // Electron會在初始化完成并且準備好建立浏覽器視窗時調用這個方法
21 // 部分 API 在 ready 事件觸發後才能使用。
22 app.whenReady().then(createWindow)
23
24 //當所有視窗都被關閉後退出
25 app.on('window-all-closed', () => {
26 // 在 macOS 上,除非使用者用 Cmd + Q 确定地退出,
27 // 否則絕大部分應用及其菜單欄會保持激活。
28 if (process.platform !== 'darwin') {
29 app.quit()
30 }
31 })
32
33 app.on('activate', () => {
34 // 在macOS上,當單擊dock圖示并且沒有其他視窗打開時,
35 // 通常在應用程式中重新建立一個視窗。
36 if (BrowserWindow.getAllWindows().length === 0) {
37 createWindow()
38 }
39 })
40
41 // 您可以把應用程式其他的流程寫在在此檔案中
42 // 代碼 也可以拆分成幾個檔案,然後用 require 導入。
從上面官方提供的寫法可以看出在 app啟動和關閉時做了相應的操作,這些後續我們會逐漸用到。
待index.js完成後我們再對package.json進行如下修改:
1 {
2 "name": "electron-demo",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "start": "electron ."
8 },
9 "author": "",
10 "license": "ISC",
11 "dependencies": {},
12 "devDependencies": {
13 "electron": "^9.0.5"
14 }
15 }
在 scripts 中增加了一個 start 的啟動方式,接下來我們就可以通過 npm run start 來啟動我們的demo項目來,最終的運作結果如下:
最後我們再來看一下整個項目的運作過程,當我們運作 npm run start 時其實是運作了 package.json 中 scripts 中的 electron . 的指令,然後hi通過 package.json 中的 main 字段找到 index.js,這個index.js 我們可以随便命名,一般命名為 main.js,本人隻是在 npm init 的時候就用了預設的 index.js,當找到index.js後執行裡面的代碼,就是我們上面所說的執行electron建立一個視窗,通過 loadFile() 方法執行index.html檔案,生成來一個我們想要的視窗應用。
我們可以了解為package.json中定義的入口檔案main就是主程序,一般一個程式隻有一個主程序,一個或多個線程,我們可以利用這一個主程序打開多個線程,即打開了多個類似于index.html的視窗。