跨平臺桌面應用 Electron 嘗試（VS2019）

iZaix發表於2020-11-19

VisualStudio下 Electron初次使用

Electron是什麼

Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術建立原生程式的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。如果你可以建一個網站，你就可以建一個桌面應用程式。
Electron 基於 Chromium 和 Node.js，在以前傳統的做法中，想要降低多平臺應用的開發成本，可能直接在伺服器部署一套網站，然後利用其他封裝的殼來充當應用，比如webview、Webkit、CefSharp等等，真正跨平臺的仍是HTML，但是windows下的操作與互動並不能直接帶到Mac或其他裝置，Electron 出現給我們帶來了新的思路與方法，同時HTML頁面本地化的載入也為應用的美化帶來了更多選擇。

叨叨一下：簡單的來說就是，終於不要搞那醜陋的WinForm了，什麼DevExpress、ComponentOne啊，或者是WPF啊都不用想了，基於業務的表單操作，那不是web頁就搞定了嗎（套上官言，什麼前後端分離啊、跨平臺啊、領域驅動啊、快速迭代啊、部署遷移啥的），而且好看啊，看看微軟前面還在VisualStudio2019史上最強IDE，後面VSCode也悄悄用的Electron，多長見識總是沒壞處的。

Electron部署

在使用Electron之前，需要先安裝好node,npm,electron，node.js的安裝直接在官網下載就好，同時會幫我們安裝好npm。
在這裡插入圖片描述
關於Electron的安裝，最好是替換成國內映象，直接使用npm我是沒有成功，關於替換方法如下：

臨時使用
npm --registry https://registry.npm.taobao.org install express
持久使用
npm config set registry https://registry.npm.taobao.org
配置後可通過下面方式來驗證是否成功
npm config get registry 或 npm info express
通過cnpm使用（推薦）
npm install -g cnpm --registry=https://registry.npm.taobao.org

接著使用cnpm安裝Electron

cnpm install -g electron

好了，安裝完成之後檢查一下
在這裡插入圖片描述

應用實踐

下面，嘗試建立一個Electron的應用（我用的VS2019）
在這裡插入圖片描述
第一步，在package.json檔案中，新增專案引用
儲存之後會提示缺失，但是之前已經安裝過了，怎麼會又提示安裝呢？仔細觀察，在VS中electron元件的引用路徑是在專案目錄下，而我們之前命令控制檯安裝的確是存在於C盤

C:\Users\iZaix\AppData\Roaming\npm\node_modules

兩種方式處理：

將引用目錄指向全域性npm包目錄
複製一份依賴包放在對應路徑下（我使用的這個方式）

在這裡插入圖片描述
第二步，修改server.js檔案，並新增想要展示的HTML頁，可以參考官方示例 。我的這個引用的是GitHub上的文件
修改server.js

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

// 保持win物件的全域性引用,避免JavaScript物件被垃圾回收時,視窗被自動關閉.
let win

function createWindow () {
  //建立瀏覽器視窗
  win = new BrowserWindow({width: 800, height: 600})

  // 載入應用的 index.html
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

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

  // 關閉window時觸發下列事件.
  win.on('closed', () => {
    // 取消引用 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引入獨立的js檔案.

建立index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>