翻譯 | 《JavaScript Everywhere》第18章 帶Electron的桌面應用程式

前端毛小悠發表於2020-12-06
JavaScript

翻譯 | 《JavaScript Everywhere》第18章 帶Electron的桌面應用程式

寫在最前面

大家好呀，我是毛小悠，是一位前端開發工程師。正在翻譯一本英文技術書籍。

為了提高大家的閱讀體驗，對語句的結構和內容略有調整。如果發現本文中有存在瑕疵的地方，或者你有任何意見或者建議，可以在評論區留言，或者加我的微信：code\_maomao，歡迎相互溝通交流學習。

(σﾟ∀ﾟ)σ…:*☆哎喲不錯哦

第18章 帶Electron的桌面應用程式

我第一次接觸個人計算機是在一個充滿Apple II機器的學校實驗室中進行的。

每週一次，我和我的同學被老師帶進教室，給了一些軟盤，並給出了有關如何載入應用程式（通常是Oregon Trail）的粗略說明。在這些課程上，除了記得自己發呆之外，我對其他事情記不清了。自1980年代中期以來，個人計算機已經走了很長一段路，但是我們仍然需要依靠桌面應用程式來執行許多工。

通常，我可能會訪問電子郵件客戶端、文字編輯器、聊天客戶端、電子表格軟體、音樂流服務以及其他多個桌面應用程式。一般，這些應用程式具有與Web應用程式等效的功能，但是桌面應用程式的便利性和整合性可以為使用者帶來很多好處。但是，多年來，建立這些應用程式的能力一直非常缺乏。值得慶幸的是，今天，我們能夠使用網路技術來構建功能全面的桌面應用程式，而且學習曲線很小。

我們正在構建什麼

在接下來的幾章中，我們將為Notedly的社交筆記應用程式構建一個桌面客戶端。我們的目標是使用JavaScript和Web技術來開發桌面應用程式，使用者可以下載並安裝在計算機上。目前，該應用程式將是一個簡單的實現，它將我們的Web應用程式包裝在桌面應用程式shell中。以這種方式開發我們的應用程式將使我們能夠快速將桌面應用程式傳送給感興趣的使用者，同時為我們提供了以後為桌面使用者引入自定義應用程式的靈活性。

我們將如何構建它

要構建我們的應用程式，我們將使用Electron，它是一個開放原始碼的框架，用於使用Web技術構建跨平臺的桌面應用程式。它可以利用Node.js和Chrome的基礎瀏覽器引擎Chromium來工作。

這意味著作為開發人員，我們可以使用瀏覽器、Node.js和特定於作業系統的功能，而這些功能通常在Web環境中不可用。Electron最初是由GitHub為Atom文字編輯器開發的，但此後一直用作大小應用程式的平臺，包括Slack，VS Code，Discord和WordPress Desktop。

入門

在開始開發之前，我們需要將專案啟動程式檔案複製到我們的電腦上。

專案的原始碼包含了開發應用程式所需的所有指令碼和對第三方庫的引用。

要將程式碼克隆到我們的本地計算機，請開啟終端，切換到儲存專案的目錄，然後git clone專案儲存庫。如果你已經研究過API和Web章節，則可能已經建立了一個 notedly目錄來保持專案程式碼的有條理：

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/desktop.git
$ cd desktop
$ npm install

安裝第三方依賴項

通過製作本書的入門程式碼的副本，並在目錄中執行npm install，你無需為任何第三方依賴項再次執行npm install。

該程式碼的結構如下：

  • /src

    這是你隨書一起進行開發的目錄。

  • /solutions

    該目錄包含每章的解決方案。
    如果你卡住了，這些可以供你參考。

  • /final

    該目錄包含最終的工作專案。

建立專案目錄並安裝依賴項之後，我們就可以開始開發了。

我們的第一個電子應用程式

將我們的程式碼儲存庫克隆到我們的電腦後，讓我們開發我們的第一個Electron應用程式。如果你在src目錄中查詢，則會看到其中有一些檔案。index.html檔案包含了HTML標記。目前，該檔案將用作Electron的“渲染器過程”，這意味著它將是我們Electron應用程式顯示為視窗的網頁。

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

我們將在index.js檔案中設定我們的Electron應用程式。在我們的應用程式中，該檔案將包含Electron所謂的“主程式”，它定義了應用程式shell。主要過程通過在Electron中建立一個BrowserWindow例項來工作，該例項用作應用程式shell。

index.js與main.js

在我們的案例應用中的其他部分都是用的index.js命名，但是通常在軟體開發中命名main.js來命名“主程式”。讓我們設定主要過程以顯示包含HTML頁面的瀏覽器視窗。首先，匯入Electron的應用程式，然後寫src/index.js中的browserWindow功能：

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

現在，我們可以定義應用程式的browserWindow並定義應用程式將載入的檔案。在src/index.js中，新增以下內容：

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

// to avoid garbage collection, declare the window as a variable
let window;

// specify the details of the browser window
function createWindow() {
  window = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {
    nodeIntegration: true
   }
  });

  // load the HTML file
  window.loadFile('index.html');

  // when the window is closed, reset the window object
  window.on('closed', () => {
   window = null;
  });
}

// when electron is ready, create the application window
app.on('ready', createWindow);

有了這個，我們開始準備在本地執行我們的桌面應用程式。在終端應用程式中，從專案目錄中執行以下命令：

$ npm start

該命令將執行電子src/index.js，啟動我們應用程式的開發環境版本（請參閱圖18-1）。

圖18-1。執行啟動命令將啟動我們的“ Hello World” Electron應用程式

macOS應用程式視窗詳細資訊

macOS處理應用程式視窗的方式與Windows不同。當使用者單擊“關閉視窗”按鈕時，應用程式視窗將關閉，但應用程式本身不會退出。單擊macOS擴充套件塢中的應用程式圖示將重新開啟應用程式視窗。Electron允許我們實現此功能。將以下內容新增到src/index.js檔案的底部：

// quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS only quit when a user explicitly quits the application
  if (process.platform !== 'darwin') {
   app.quit();
  }
});

app.on('activate', () => {
  // on macOS, re-create the window when the icon is clicked in the dock
  if (window === null) {
   createWindow();
  }
});

新增此功能後，你可以通過退出應用程式並使用npm start命令重新執行它來檢視這些更改。現在，如果使用者正在使用macOS訪問我們的應用程式，則他們在關閉視窗時將看到預期的行為。

開發者工具

由於Electron基於Chromium瀏覽器引擎（Chrome，Microsoft Edge，Opera和許多其他瀏覽器），它還使我們能夠使用Chromium的開發人員工具。這使我們能夠執行與瀏覽器環境中相同的所有的JavaScript除錯。讓我們檢查我們的應用程式是否處於開發模式，如果是，請在應用程式啟動時自動開啟開發工具。

要執行此檢查，我們將使用electronic-util庫。這是一小部分的實用程式，可讓我們輕鬆檢查系統條件並簡化常見Electron的樣式程式碼。

現在，我們將使用is模組，這將使我們能夠檢查我們的應用程式是否處於開發模式。

在我們的src/index.js檔案的頂部，匯入模組：

const { is } = require('electron-util');

現在，在我們的應用程式程式碼中，我們可以在window.loadFile(*index.html*) 載入我們的HTML檔案，當應用程式處於開發環境中時，它將開啟開發工具（圖18-2）：

// if in development mode, open the browser dev tools
if (is.development) {
  window.webContents.openDevTools();
}

圖18-2。現在，當我們在開發過程中開啟應用程式時，瀏覽器開發工具將自動開啟。

Electron安全警告

你可能會注意到，當前我們的Electron應用程式顯示了與不安全的內容安全策略（CSP）相關的安全警告。我們將在下一章中解決此警告。

通過輕鬆訪問瀏覽器開發工具，我們為開發客戶端應用程式做好了充分的準備。

Electron API

桌面開發的優點之一是，通過Electron API，我們可以訪問作業系統級別的功能，而這些功能在Web瀏覽器環境中是不可用的，其中包括：

  • 通知事項

  • 本機檔案拖放

  • macOS暗模式

  • 自定義選單

  • 健壯的鍵盤快捷鍵

  • 系統對話方塊

  • 應用托盤

  • 系統資訊

你可以想象，這些選項使我們能夠為桌面客戶端新增一些獨特的功能並改善使用者體驗。我們不會在簡單的示例應用程式中使用它們，但是你需要熟悉它們。Electron的文件提供了每個Electron API的詳細示例。此外，Electron團隊還建立了electron-api-demos，這是一個功能齊全的Electron應用程式，演示了Electron API的許多獨特功能。

結論

在本章中，我們探討了使用Electron通過Web技術構建桌面應用程式的基礎。Electron環境為我們（作為開發人員）提供了一個向使用者提供跨平臺桌面體驗的機會，而無需學習多種程式語言和作業系統的複雜性。藉助我們在本章中探索的簡單設定以及Web開發的知識，我們為構建健壯的桌面應用程式做好了充分的準備。在下一章中，我們將研究如何將現有的Web應用程式合併到Electron Shell中。

如果有理解不到位的地方，歡迎大家糾錯。如果覺得還可以，麻煩你點贊收藏或者分享一下，希望可以幫到更多人。

相關文章