Electron vue實現後台多程序（一）

在electron-vue中，一般有兩個程序：主程序和渲染程序。這兩個程序在框架搭建的時候就已經配置好了，它們之間能夠正常的互相通訊。但是，由於某些操作比較耗時等原因，我們需要乙個後台worker，以避免介面阻塞卡頓的不好體驗。調研之後發現，electron可以使用多種後台工作方式：1. webworker；2. 使用隱藏的渲染程序。

webworker有一些優勢：編寫方便，輕量級。但是缺點是：不能直接使用頁面中的資料，node的庫函式對多執行緒支援不安全，打包困難。

使用隱藏的渲染程序優點是可以按照正常的node**編寫，缺點是與主渲染程序互動需要通過主程序來進行。

下面是如何建立隱藏的渲染程序並與另乙個渲染程序互相通訊的示例：

首先，需要確定後台渲染程序的html頁面位置，我們把它稱為worker.html。下面的**新增在index.js中：

const workerurl = process.env.node_env === 'development'
?`worker.html`
: `file:
//$/worker.html`

對於開發模式，worker.html會從dist/electron/資料夾下讀取。

接下來在createwindow()中新增如下**，建立乙個隱藏的渲染視窗，為了除錯方便，可以將show引數設定為true：

workerwindow = new
browserwindow(
})workerwindow.on('closed', () =>)
if (process.env.node_env === 'development') workerwindow.loadfile(workerurl) // 除錯時的載入方式
else workerwindow.loadurl(workerurl)　　// 打包後的載入方式

createwindow()

ipcmain.on('message-from-worker', (event, arg) =>)

ipcmain.on('message-from-renderer', (event, arg) =>)

ipcmain.on('ready', (event, arg) =>)

})message-from-worker表示這個接收到的訊息來自後台渲染程序，message-from-renderer表示訊息來自前端渲染程序。其中sendwindowmessage是乙個向目標視窗傳送訊息的函式：

function
sendwindowmessage(targetwindow, message, payload) 
targetwindow.webcontents.send(message, payload)
}

在worker.html中，需要實現訊息接收響應函式：

同時，還需要處理完畢的資料返回給主程序，此時通過ipcrenderer.send('message-from-worker', )即可完成。

在前端渲染程序中，為了處理方便，我們在main.js中新增了訊息路由：

const  = require('electron')
let callbackcache =
vue.prototype.$ipcrenderer =)
},on: (type, callback) =>)
}}ipcrenderer.on('message-to-renderer', (sender, msg) =>
})}) //
監聽主程序的訊息

之後，在vue**中，就可以使用this.$ipcrenderer.send傳送訊息及this.$ipcrenderer.on接收訊息了

Electron vue實現後台多程序（一）

Electron Vue前端開發準備

初嚐electron vue專案搭建

Electron vue客戶端開發總結

Electron vue實現後台多程序（一）

Electron Vue前端開發準備

初嚐electron vue專案搭建

Electron vue客戶端開發總結

相關推薦