背景

公司去年對 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://mp.weixin.qq.com/s/ttRU7VtgGknzEmeEkObK-g

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

背景