Vue+Electron開發跨平臺桌面應用實踐

来源:https://www.cnblogs.com/88223100/archive/2023/02/15/Practice-of-developing-cross-platform-desktop-application-by-Vue_Electron.html
-Advertisement-
Play Games

公司去年對 CDN 資源伺服器進行了遷移，由原來的通過 FTP 方式的文件存儲改為了使用 S3 協議上傳的對象存儲，部門內 @柴俊堃 同學開發了一個命令行腳本工具 RapidTrans(睿傳)，使用睿傳可以很方便將本地目錄下的資源上傳到 S3 中。 睿傳運行時接收兩個主要參數，一個為待上傳的本地路... ...


背景

公司去年對 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 = '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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記錄--『uni-app、小程式』藍牙連接、讀寫數據全過程
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 本文簡介 這是一次真實的 藍牙收發數據 的全過程講解。 本文使用 uni-app + Vue3 的方式進行開發，以手機app的方式運行（微信小程式同樣可行）。 uni-app 提供了 藍牙 和 低功耗藍牙 的 api ，和微信小程式提供的 ...
  • JS table下載
    時間緊任務重推薦第一種，直接把表格整個拿過來；第二種根據表格的配置和數據進行設置 1、html下載，原生JS downTable(name) { const uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns: ...
  • vue3之非同步組件defineAsyncComponent 使用無效？
    原文地址：我的稀土掘金 介紹：defineAsyncComponent 用於拆分應用為更小的塊，並僅在需要時再從伺服器載入相關組件 官網案例 <script setup> import { defineAsyncComponent } from 'vue' const AdminPage = def ...
  • 百度地圖定位不准，和地位不顯示的問題，解決方案
    直接上重點。 如果是定位不准，Web瀏覽器端， 1，要使用者必須要做個人認證或者企業認證，且通過審核。 2，請求的網頁必須是https協議。 3，請求的功能變數名稱必須是加入到應用的Referer白名單。進入到應用設置里查看。 4，申請的應用類型必須是瀏覽器端。且必須勾選對應的服務。 有時申請地圖服務的人和 ...
  • JavaScript 中 ?. 和 ?? 分別是什麼？
    ?. 和 ?? 是 JavaScript 中的兩個新操作符，分別是可選鏈操作符（optional chaining operator）和空值合併操作符（nullish coalescing operator）。 ?. 操作符 ?. 可選鏈操作符用於訪問可能為空或未定義的屬性或方法，它允許我們安全地訪 ...
  • 解決 Vue3 中路由切換到其他頁面再切換回來時 Echarts 圖表不顯示的問題
    問題復現： 正常狀態下： 切換到其他頁面再切換回來： 問題解決： 其實這個問題的解決方式官網寫得清清楚楚，我們看看官網怎麼解決的： 接下來我用代碼解釋下這句話（正確的做法是，在圖表容器被銷毀之後，調用 echartsInstance.dispose 銷毀實例，在圖表容器重新被添加後再次調用 echa ...
  • Three.js 進階之旅：物理效果-碰撞和聲音 💥
    本文內容主要彙總如何在 Three.js 創建的 3D 世界中添加物理效果，使其更加真實。所謂物理效果指的是對象會有重力，它們可以相互碰撞，施加力之後可以移動，而且通過鉸鏈和滑塊還可以在移動過程中在對象上施加約束。 通過本文的閱讀，你將學習到如何使用 Cannon.js 在 Three.js 中創建... ...
  • canvas畫板（滑鼠和觸摸）
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類