總篇43篇 2019年第17篇

背景

公司去年對?CDN?資源服務(wù)器進(jìn)行了遷移，由原來的通過?FTP?方式的文件存儲改為了使用?S3?協(xié)議上傳的對象存儲，部門內(nèi) @柴俊堃 同學(xué)開發(fā)了一個命令行腳本工具?RapidTrans(睿傳)，使用睿傳可以很方便將本地目錄下的資源上傳到?S3?中。

睿傳運行時接收兩個主要參數(shù)，一個為待上傳的本地路徑，一個為上傳到?CDN?后的路徑，我們可以在項目的?package.json?中去配置?scripts執(zhí)行上傳。

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

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

客戶端界面

功能分析

• 桌面客戶端，支持?Windows、Mac?系統(tǒng)

• 本地路徑可以通過文件對話框或拖拽的方式進(jìn)行選擇

• CDN 路徑可以通過輸入框的方式輸入

• 上傳成功后將當(dāng)前選擇的本地路徑和 CDN 的映射關(guān)系存儲，下次再選擇到當(dāng)前目錄的話直接使用之前 CDN 的路徑地址，無需再次輸入

• S3 參數(shù)配置化

• 自動升級

• 覆蓋上傳

技術(shù)選型

• Electron

• Vue

• LowDB?

Electron 簡介

Electron 是由 Github 開發(fā)，基于 Chromium 和 Node.js, 讓你可以使用 HTML, CSS 和 JavaScript 構(gòu)建跨平臺桌面應(yīng)用的開源框架。

Electron 可以讓你使用純 JavaScript 調(diào)用豐富的原生(操作系統(tǒng)) APIs 來創(chuàng)造桌面應(yīng)用。 你可以把它看作一個專注于桌面應(yīng)用的 Node. js 的變體，而不是 Web 服務(wù)器。

簡單點說，用 Electron 可以讓我們在網(wǎng)頁中使用 Node.js 的 API 和調(diào)用系統(tǒng) API。

Vue + Electron 環(huán)境搭建

使用?vue-cli?腳手架和??electron-vue模板進(jìn)行搭建，此處需要注意，由于 electron-vue 模板不支持 vue-cli@3.0，所以要使用 2.0 版本。

# 安裝 vue-cli@2.0，若已安裝則無需重復(fù)安裝
npm install -g vue-cli
vue init simulatedgreg/electron-vue s3_upload_tool

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

目錄結(jié)構(gòu)

├─ .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

應(yīng)用的目錄結(jié)構(gòu)和平常我們用 Vue 做 WEB 端時生成的結(jié)構(gòu)基本差異不大，所以本文我只介紹下與 Web 不同的幾個目錄。

.electron-vue

該目錄下包含 3 個獨立的 Webpack 配置文件

• .electron-vue/webpack.main.config.js?針對于 Electron 的?main?主進(jìn)程打包的配置，配置比較簡單，主要就是將?src/main/index.js?通過?babel-loader?打包，并且生成?commonjs2模塊規(guī)范。

• .electron-vue/webpack.renderer.config.js?針對于 Electron 的?renderer?渲染進(jìn)程打包的配置，此配置主要用來打包 Vue 的應(yīng)用程序，這個配置就和平常我們做 Web 端時 Webpack 的配置基本一樣，處理 Vue、Sass、Image、Html等。

• .electron-vue/webpack.web.config.js?為瀏覽器構(gòu)建?render渲染進(jìn)程的配置，主要針對于發(fā)布到 Web 的情況。

src/main

主進(jìn)程代碼存放位置，涉及到調(diào)取 Node API 、調(diào)用原生系統(tǒng)功能的代碼。

src/renderer

渲染進(jìn)程代碼存放位置，和平常的 Vue 項目基本一樣。

主進(jìn)程與渲染進(jìn)程

在 Electron 中有兩個進(jìn)程，分別為主進(jìn)程和渲染進(jìn)程，主進(jìn)程負(fù)責(zé) GUI 部分，渲染進(jìn)程負(fù)責(zé)頁面的展示。

主進(jìn)程

• 主進(jìn)程通常是在?package.json?的?main字段的腳本進(jìn)程。

• 一個 Electron 應(yīng)用只有一個主進(jìn)程。

• 主進(jìn)程一般用來處理 App 生命周期、系統(tǒng)事件的處理、系統(tǒng)原生GUI。

main.js

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

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

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

app.on('ready', createWindow)

渲染進(jìn)程

index.html

Hello World!

Hello World!

主進(jìn)程使用?BrowserWindow?實例創(chuàng)建頁面。 每個BrowserWindow實例都在自己的渲染進(jìn)程里運行頁面。 當(dāng)一個?BrowserWindow?實例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。

主進(jìn)程和渲染進(jìn)程通訊

進(jìn)程間通信(IPC，Interprocess communication)是一組編程接口，讓開發(fā)者能夠協(xié)調(diào)不同的進(jìn)程，使之能在一個操作系統(tǒng)里同時運行，并相互傳遞、交換信息。

Electron 使用 IPC 的機制，由主進(jìn)程來創(chuàng)建應(yīng)用，渲染進(jìn)程來負(fù)責(zé)繪制頁面，而兩個進(jìn)程之間是無法直接通信的。

渲染進(jìn)程通過ipcRenderer向主進(jìn)程發(fā)送消息，主進(jìn)程通過?ipcMain監(jiān)聽事件，當(dāng)事件響應(yīng)時對消息進(jìn)行處理。

主進(jìn)程監(jiān)聽事件的回調(diào)函數(shù)中會存在?event?對象及arg?對象。arg?對象為渲染進(jìn)程傳遞過來的參數(shù)。

如果主進(jìn)程執(zhí)行的是同步方法，回復(fù)同步信息時，需要設(shè)置event.returnValue，如果執(zhí)行的是異步方法回復(fù)時需要使用?event.sender.send向渲染進(jìn)程發(fā)送消息。

下面代碼為渲染進(jìn)程主動向主進(jìn)程發(fā)送消息，在主進(jìn)程接收后回復(fù)渲染進(jìn)程。

// 主進(jìn)程
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'
})

// 渲染器進(jìn)程
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')

有時候我們也需要由主進(jìn)程主動向渲染進(jìn)程發(fā)送消息，面對這種情況我們可以在主進(jìn)程中通過?BrowserWindow對象的?webContets.send方法向渲染進(jìn)程發(fā)送消息。

// 主進(jìn)程

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

function createWindow () {
let win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html')

// 向渲染進(jìn)程發(fā)送消息
win.webContents.send('main-process-message', 'ping')
}

app.on('ready', createWindow)

// 渲染器進(jìn)程

const { ipcRenderer } = require('electron')
// 監(jiān)聽主進(jìn)程發(fā)送的消息
ipcRenderer.on('main-process-message', (event, arg) => {
console.log(arg) // prints "ping"
})

持久化存儲

在桌面端應(yīng)用中一些用戶設(shè)置通常需要進(jìn)行存持久化存儲，方便以后使用的時候獲取。 我們做 Web 時候通常是使用像?MySQL、Mongodb等數(shù)據(jù)庫進(jìn)行持久化存儲， 但是當(dāng)用戶安裝桌面軟件時候不可能讓用戶在本地安裝這類數(shù)據(jù)庫，所以我們需要一個輕量級的本地化數(shù)據(jù)庫。

lowdb?是一個基于?Lodash?API 的輕量級本地?JSON?數(shù)據(jù)庫，支持?Node.js、browser、Electron。

在我們要開發(fā)的工具中，用戶的?S3?配置，已上傳文件的?CDN目錄等信息是需要進(jìn)行持久化存儲的，所有我們采用的?lowdb進(jìn)行數(shù)據(jù)的存儲。

使用也是非常的簡單，數(shù)據(jù)的讀寫和平常使用?Lodash差不多。

安裝

npm install lowdb -save

數(shù)據(jù)存儲路徑

Electron 提供了獲取系統(tǒng)目錄的方法，可以很方便的進(jìn)行一些系統(tǒng)目錄的獲取。

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

app.getPath('home'); // 獲取用戶的 home 文件夾(主目錄)路徑
app.getPath('userData'); // 獲取當(dāng)前用戶的應(yīng)用數(shù)據(jù)文件夾路徑
app.getPath('appData'); // 獲取應(yīng)用程序設(shè)置文件的文件夾路徑，默認(rèn)是 appData 文件夾附加應(yīng)用的名稱
app.getPath('temp'); // 獲取臨時文件夾路徑
app.getPath('documents'); // 獲取用戶文檔目錄的路徑
app.getPath('downloads'); // 獲取用戶下載目錄的路徑
app.getPath('music'); // 獲取用戶音樂目錄的路徑
app.getPath('pictures'); // 獲取用戶圖片目錄的路徑
app.getPath('videos'); // 獲取用戶視頻目錄的路徑
app.getPath('logs'); // 獲取應(yīng)用程序的日志文件夾路徑
app.getPath('desktop'); // 獲取系統(tǒng)桌面路徑

數(shù)據(jù)庫配置

'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') // 將數(shù)據(jù)庫存放在當(dāng)前用戶的應(yīng)用數(shù)據(jù)文件夾

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)

// 初始化默認(rèn)數(shù)據(jù)
db.defaults({
project: [], // 存儲已上傳項目的 CDN 配置信息
settings: {
ftp: '', // ftp 用戶配置
s3: '', // s3 用戶配置
}
}).write()

module.exports = db

后臺執(zhí)行命令行程序

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

'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('================== 上傳結(jié)束 ================== \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
}

應(yīng)用打包

應(yīng)用開發(fā)完成后需要進(jìn)行打包，我們可以使用?electron-builder?將應(yīng)用打包成 Windows、Mac 平臺的應(yīng)用。

在執(zhí)行npm run build之前需要在?package.json進(jìn)行打包配置的編輯。

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

應(yīng)用更新提示

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

使用?electron-updater?打包的應(yīng)用自動更新非常方便，將打包后 build 目錄下的?latest-mac.yml文件上傳至package.json?中配置的?publish.url?目錄下，并且在主進(jìn)程文件中監(jiān)聽?update-availabl事件。

// 主進(jìn)程 main.js
import { autoUpdater } from 'electron-updater'
// 關(guān)閉自動下載
autoUpdater.autoDownload = false

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

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

// 渲染進(jìn)程 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') {
// 在用戶的默認(rèn)瀏覽器中打開存放應(yīng)用安裝包的網(wǎng)絡(luò)地址
shell.openExternal('http://10.168.0.49/songjinda/s3_tool/download/')
return false
}
}
})
})

總結(jié)

以上是生活随笔為你收集整理的app头像上传vue_Vue+Electron开发跨平台桌面应用实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。