Vue+Electron開發跨平臺桌面應用實踐-有解無憂

背景

公司去年對 CDN 資源服務器進行了遷移，由原來的通過 FTP 方式的檔案存盤改為了使用 S3 協議上傳的物件存盤，部門內 @柴俊堃同學開發了一個命令列腳本工具 RapidTrans(睿傳)，使用睿傳可以很方便將本地目錄下的資源上傳到 S3 中，

睿傳運行時接收兩個主要引數，一個為待上傳的本地路徑，一個為上傳到 CDN 后的路徑，我們可以在專案的 package.json 中去配置 scripts執行上傳，

npm run rapid-trans -- -s "/home/demo/work/mall2016/release/串列頁" -p "2016/m/list"

用了一段時間后覺得如果選擇本地路徑的時候可以通過可視化的檔案選擇器的方式選擇就太好了，團隊一直在做客戶端方向技術的儲備，所以為了更方便團隊的使用產生了將睿傳封裝成 GUI 的跨平臺客戶端的想法，

客戶端界面

功能分析

桌面客戶端，支持 Windows、Mac 系統
本地路徑可以通過檔案對話框或拖拽的方式進行選擇
CDN 路徑可以通過輸入框的方式輸入
上傳成功后將當前選擇的本地路徑和 CDN 的映射關系存盤，下次再選擇到當前目錄的話直接使用之前 CDN 的路徑地址，無需再次輸入
S3 引數配置化
自動升級
覆寫上傳

技術選型

Electron
Vue
LowDB

Electron 簡介

Electron 是由 Github 開發，基于 Chromium 和 Node.js, 讓你可以使用 HTML, CSS 和 JavaScript 構建跨平臺桌面應用的開源框架，

Electron 可以讓你使用純 JavaScript 呼叫豐富的原生(作業系統) APIs 來創造桌面應用，你可以把它看作一個專注于桌面應用的 Node. js 的變體，而不是 Web 服務器，

簡單點說，用 Electron 可以讓我們在網頁中使用 Node.js 的 API 和呼叫系統 API，

Vue + Electron 環境搭建

使用 vue-cli 腳手架和 electron-vue模板進行搭建，此處需要注意，由于 electron-vue 模板不支持 [email protected]，所以要使用 2.0 版本，

# 安裝 [email protected]，若已安裝則無需重復安裝
npm install -g vue-cli
vue init simulatedgreg/electron-vue s3_upload_tool

# 安裝依賴并運行
cd s3_upload_tool
npm install
npm run dev

目錄結構

├─ .electron-vue
│  ├─ webpack.main.config.js
│  ├─ webpack.renderer.config.js
│  └─ webpack.web.config.js
├─ build
│  └─ icons/
├─ dist
│  ├─ electron/
│  └─ web/
├─ node_modules/
├─ src
│  ├─ main
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer
│  │  ├─ components/
│  │  ├─ router/
│  │  ├─ store/
│  │  ├─ App.vue
│  │  └─ main.js
│  └─ index.ejs
├─ static/
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md

應用的目錄結構和平常我們用 Vue 做 WEB 端時生成的結構基本差異不大，所以本文我只介紹下與 Web 不同的幾個目錄，

`.electron-vue`

該目錄下包含 3 個獨立的 Webpack 組態檔

.electron-vue/webpack.main.config.js 針對于 Electron 的 main 主行程打包的配置，配置比較簡單，主要就是將 src/main/index.js 通過 babel-loader 打包，并且生成 commonjs2模塊規范，
.electron-vue/webpack.renderer.config.js 針對于 Electron 的 renderer 渲染行程打包的配置，此配置主要用來打包 Vue 的應用程式，這個配置就和平常我們做 Web 端時 Webpack 的配置基本一樣，處理 Vue、Sass、Image、Html等，
.electron-vue/webpack.web.config.js 為瀏覽器構建 render渲染行程的配置，主要針對于發布到 Web 的情況，

`src/main`

主行程代碼存放位置，涉及到調取 Node API 、呼叫原生系統功能的代碼，

`src/renderer`

渲染行程代碼存放位置，和平常的 Vue 專案基本一樣，

主行程與渲染行程

在 Electron 中有兩個行程，分別為主行程和渲染行程，主行程負責 GUI 部分，渲染行程負責頁面的展示，

主行程

主行程通常是在 package.json 的 main欄位的腳本行程，
一個 Electron 應用只有一個主行程，
主行程一般用來處理 App 生命周期、系統事件的處理、系統原生GUI，

main.js

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

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

  // 然后加載 app 的 index.html.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

渲染行程

index.html

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

主行程使用 BrowserWindow 實體創建頁面，每個BrowserWindow實體都在自己的渲染行程里運行頁面，當一個 BrowserWindow 實體被銷毀后，相應的渲染行程也會被終止，

主行程和渲染行程通訊

行程間通信（IPC，Interprocess communication）是一組編程介面，讓開發者能夠協調不同的行程，使之能在一個作業系統里同時運行，并相互傳遞、交換資訊，

Electron 使用 IPC 的機制，由主行程來創建應用，渲染行程來負責繪制頁面，而兩個行程之間是無法直接通信的，

渲染行程通過ipcRenderer向主行程發送訊息，主行程通過 ipcMain監聽事件，當事件回應時對訊息進行處理，

主行程監聽事件的回呼函式中會存在 event 物件及arg 物件，arg 物件為渲染行程傳遞過來的引數，

如果主行程執行的是同步方法，回復同步資訊時，需要設定event.returnValue，如果執行的是異步方法回復時需要使用 event.sender.send向渲染行程發送訊息，

下面代碼為渲染行程主動向主行程發送訊息，在主行程接收后回復渲染行程，

// 主行程
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'https://www.cnblogs.com/88223100/archive/2023/02/15/pong'
})

// 渲染器行程
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

有時候我們也需要由主行程主動向渲染行程發送訊息，面對這種情況我們可以在主行程中通過 BrowserWindow物件的 webContets.send方法向渲染行程發送訊息，

// 主行程

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

function createWindow () {   
  let win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
  
  // 向渲染行程發送訊息
  win.webContents.send('main-process-message', 'ping')
}

app.on('ready', createWindow)

// 渲染器行程

const { ipcRenderer } = require('electron')
// 監聽主行程發送的訊息
ipcRenderer.on('main-process-message', (event, arg) => {
  console.log(arg) // prints "ping"
})

持久化存盤

在桌面端應用中一些用戶設定通常需要進行存持久化存盤，方便以后使用的時候獲取，我們做 Web 時候通常是使用像 MySQL、Mongodb等資料庫進行持久化存盤，但是當用戶安裝桌面軟體時候不可能讓用戶在本地安裝這類資料庫，所以我們需要一個輕量級的本地化資料庫，

lowdb 是一個基于 Lodash API 的輕量級本地 JSON 資料庫，支持 Node.js、browser、Electron，

在我們要開發的工具中，用戶的 S3 配置，已上傳檔案的 CDN目錄等資訊是需要進行持久化存盤的，所有我們采用的 lowdb進行資料的存盤，

使用也是非常的簡單，資料的讀寫和平常使用 Lodash差不多，

安裝

npm install lowdb -save

資料存盤路徑

Electron 提供了獲取系統目錄的方法，可以很方便的進行一些系統目錄的獲取，

const { app, remote } = require('electron')

app.getPath('home'); // 獲取用戶的 home 檔案夾（主目錄）路徑
app.getPath('userData'); // 獲取當前用戶的應用資料檔案夾路徑
app.getPath('appData'); // 獲取應用程式設定檔案的檔案夾路徑，默認是 appData 檔案夾附加應用的名稱
app.getPath('temp'); // 獲取臨時檔案夾路徑
app.getPath('documents'); // 獲取用戶檔案目錄的路徑
app.getPath('downloads'); // 獲取用戶下載目錄的路徑
app.getPath('music'); // 獲取用戶音樂目錄的路徑
app.getPath('pictures'); // 獲取用戶圖片目錄的路徑
app.getPath('videos'); // 獲取用戶視頻目錄的路徑
app.getPath('logs'); // 獲取應用程式的日志檔案夾路徑
app.getPath('desktop'); // 獲取系統桌面路徑

資料庫配置

'use strict'

const DataStore = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const path = require('path')
const fs = require('fs-extra')
const { app, remote } = require('electron')

const APP = process.type === 'renderer' ? remote.app : app

const STORE_PATH = APP.getPath('userData') // 將資料庫存放在當前用戶的應用資料檔案夾

if (process.type !== 'renderer') {
  if (!fs.pathExistsSync(STORE_PATH)) {
    fs.mkdirpSync(STORE_PATH)
  }
}

const adapter = new FileSync(path.join(STORE_PATH, '/data.json'))

const db = DataStore(adapter)

// 初始化默認資料
db.defaults({
  project: [], // 存盤已上傳專案的 CDN 配置資訊
  settings: {
    ftp: '', // ftp 用戶配置
    s3: '', // s3 用戶配置
  }
}).write()

module.exports = db

后臺執行命令列程式

由于睿傳是一個命令列工具，并沒有對外提供 Node.js API，所以用戶點擊上傳按鈕時候需要通過 Electron在后臺運行命令列程式，并且將命令列運行的日志實時渲染到應用的日志界面中，所以在這里利用 Node.js 的 child_process子行程的方式來處理，

'use strict'
import { ipcMain } from 'electron'
import { exec } from 'child_process'
import path from 'path'
import fixPath from 'fix-path'
import { logError, logInfo, logExit } from './log'
const cmdPath = path.resolve(__static, 'lib/rapid_trans') // 睿傳路徑
let workerProcess
ipcMain.on('upload', (e, {dirPath, cdnPath, isCover}) => {
  runUpload(dirPath, cdnPath, isCover)
})

function runUpload (dirPath, cdnPath, isCover) {
  let cmdStr = `node src/rapid-trans.js -s "${dirPath}" -p "${cdnPath}" -q`
  if (isCover) {
    cmdStr += ' -f'
  }
  fixPath()
  logInfo('================== 開始上傳 ================== \n')
  workerProcess = exec(cmdStr, {
    cwd: cmdPath
  })
  workerProcess.stdout.on('data', function (data) {
    logInfo(data)
  })

  workerProcess.stderr.on('data', function (data) {
    logError(data)
  })

  workerProcess.on('close', function (code) {
    logExit(code)
    logInfo('================== 上傳結束 ================== \n')
  })
}

// log.js
'use strict'
const win = global.mainWindow
export function logInfo (msg) {
  win.webContents.send('logInfo', msg)
}

export function logError (msg) {
  win.webContents.send('logError', msg)
}

export function logExit (msg) {
  win.webContents.send('logExit', msg)
}

export default {
  logError,
  logExit,
  logInfo
}

應用打包

應用開發完成后需要進行打包，我們可以使用 electron-builder 將應用打包成 Windows、Mac 平臺的應用，

在執行npm run build之前需要在 package.json進行打包配置的編輯，

{
  "build": {
    "productName": "S3上傳工具",  // 應用名稱，最終生成的可執行檔案的名稱
    "appId": "com.autohome.s3", // 應用 APP.ID
    "directories": {
      "output": "build" // 打包后的輸出目錄
    },
    "asar": false, // 關閉 asar 格式
    "publish": [
      {
        "provider": "generic", // 服務器提供商
        "url": "http://xxx.com:8003/oss" // 更新服務器地址
      }
    ],
    "releaseInfo": {
      "releaseNotes": "新版更新" // 更新說明
    },
    "files": [
      "dist/electron/**/*",
      {
        "from": "dist/electron/static/lib/rapid_trans/node_modules",
        "to": "dist/electron/static/lib/rapid_trans/node_modules"
      } // 將睿傳的依賴打包進應用
    ],
    // 平臺的一些配置
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    // 應用圖示
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  }
}

應用更新提示

由于軟體不進行 App Store 的上架，只在團隊內部使用沒有配置證書，不配置證書的話 Mac 中無法進行自動更新安裝，所以我們在檢測到用戶的當前版本不是最新版本的時候是采用的彈層提示的方式讓用戶自己下載，

使用 electron-updater 打包的應用自動更新非常方便，將打包后 build 目錄下的 latest-mac.yml檔案上傳至package.json 中配置的 publish.url 目錄下，并且在主行程檔案中監聽 update-availabl事件，

// 主行程 main.js
import { autoUpdater } from 'electron-updater'
// 關閉自動下載
autoUpdater.autoDownload = false

// 應用可更新
autoUpdater.on('update-available', (info) => {
  // 通知渲染行程應用需要更新
  mainWindow.webContents.send('updater', info)
})

app.on('ready', () => {
  if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
})

// 渲染行程 updater.js
import { ipcRenderer, shell } from 'electron'
import { MessageBox } from 'element-ui'

ipcRenderer.on('updater', (e, info) => {
  MessageBox.alert(info.releaseNotes, `請升級${info.version}版本`, {
    confirmButtonText: '立即升級',
    showClose: false,
    closeOnClickModal: false,
    dangerouslyUseHTMLString: true,
    callback (action) {
      if (action === 'confirm') {
        // 在用戶的默認瀏覽器中打開存放應用安裝包的網路地址
        shell.openExternal('http://10.168.0.49/songjinda/s3_tool/download/')
        return false
      }
    }
  })
})

作者|宋金達

本文來自博客園，作者：古道輕風，轉載請注明原文鏈接：https://www.cnblogs.com/88223100/p/Practice-of-developing-cross-platform-desktop-application-by-Vue_Electron.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/543927.html

標籤：其他

上一篇：記錄--前端實作登錄拼圖驗證

下一篇：002. html篇之《表格》