基於vue3.0+electron新開視窗|Electron多開窗體|父子模態視窗
阿新 • • 發佈：2021-02-15
最近一直在折騰Vue3+Electron技術結合的實踐，今天就來分享一些vue3.x和electron實現開啟多視窗功能。
開始本文之前，先來介紹下如何使用vue3和electron來快速搭建專案。
目前electron.js的star高達89.3K+，最新穩定版v11.2.3。
使用vue開發electron應用，網上有個比較火的腳手架electron-vue，不過裡面的版本太低，而且使用的是vue2.x語法。
今天主要分享的是vue3語法開發electron應用，所以只能手動搭建開發環境。
- 安裝最新Vue CLI腳手架。
npm install -g @vue/cli
- 新建vue3專案
具體的選項配置，大家根據需要勾選。
vue create vue3_electron
- vue3專案中整合electron
安裝vue-cli-plugin-electron-builder外掛。
cd vue3_electron vue add electron-builder
之後的安裝過程中會提示安裝electron版本，選擇最新版安裝就行。
- 開發除錯/打包構建
npm run electron:serve npm run electron:build
非常簡單，沒有幾步就能快速手動搭建vue3+electron專案，下面就能愉快的開發了。
一般專案中需要新建多開視窗的功能，使用Electron來建立也是非常簡單的。一般的實現方法是 new BrowserWindow({...}) 視窗，傳入引數配置即可快速新建一個視窗。
<body>
<button id="aaa">開啟A視窗</button>
<button id="bbb">開啟B視窗</button>
<button id="ccc">開啟C視窗</button>
</body>
<script>
import path from 'path'
import { remote } from 'electron'
let BrowserWindow = remote.BrowserWindow;
let winA = null;
let winB = null;
let winC = null;
document.getElementById("aaa").onclick = function(){
winA = new BrowserWindow ({width: 1000, height:800})
winA.loadURL("https://aaa.com/");
winA.on("close", function(){
winA = null;
})
}
document.getElementById("bbb").onclick = function(){
winB = new BrowserWindow ({width: 900, height:650})
winB.loadURL("https://bbb.com/");
winB.on("close", function(){
winB = null;
})
}
document.getElementById("ccc").onclick = function(){
winC = new BrowserWindow ({width: 500, height:500})
winC.loadURL(`file://${__dirname}/news.html`);
winC.on("close", function(){
winC = null;
})
}
</script>具體的引數配置，大家可以去查閱文件，electron官網中都有非常詳細的說明。
https://www.electronjs.org/docs/api/browser-window
但是這種方法每次都要新建一個BrowserWindow，有些挺麻煩的，能不能像下面程式碼片段這樣，直接通過一個函式，然後傳入配置引數生成新視窗，顯然是可以的。
windowCreate({
title: '管理頁面',
route: '/manage?id=123',
width: 750,
height: 500,
backgroundColor: '#f9f9f9',
resizable: false,
maximize: true,
modal: true,
})
background.js配置
'use strict'
import { app, BrowserWindow } from 'electron'
const isDevelopment = process.env.NODE_ENV !== 'production'
import { Window } from './windows'
async function createWindow() {
let window = new Window()
window.listen()
window.createWindows({isMainWin: true})
window.createTray()
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
app.on('ready', async () => {
createWindow()
})
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
新建一個 window.js 來處理主程序所有的函式。
import { app, BrowserWindow, ipcMain, Menu, Tray } from "electron";
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import path from 'path'
export const windowsCfg = {
id: '', //唯一id
title: '', //視窗標題
width: '', //寬度
height: '', //高度
minWidth: '', //最小寬度
minHeight: '', //最小高度
route: '', // 頁面路由URL '/manage?id=123'
resizable: true, //是否支援調整視窗大小
maximize: false, //是否最大化
backgroundColor:'#eee', //視窗背景色
data: null, //資料
isMultiWindow: false, //是否支援多開視窗 (如果為false，當窗體存在，再次建立不會新建一個窗體 只focus顯示即可，，如果為true，即使窗體存在，也可以新建一個)
isMainWin: false, //是否主視窗(當為true時會替代當前主視窗)
parentId: '', //父視窗id 建立父子視窗 -- 子視窗永遠顯示在父視窗頂部 【父視窗可以操作】
modal: false, //模態視窗 -- 模態視窗是禁用父視窗的子視窗，建立模態視窗必須設定 parent 和 modal 選項 【父視窗不能操作】
}
/**
* 視窗配置
*/
export class Window {
constructor() {
this.main = null; //當前頁
this.group = {}; //視窗組
this.tray = null; //托盤
}
// 視窗配置
winOpts(wh=[]) {
return {
width: wh[0],
height: wh[1],
backgroundColor: '#f00',
autoHideMenuBar: true,
titleBarStyle: "hidden",
resizable: true,
minimizable: true,
maximizable: true,
frame: false,
show: false,
webPreferences: {
contextIsolation: false, //上下文隔離
// nodeIntegration: true, //啟用Node整合（是否完整的支援 node）
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
// devTools: false,
webSecurity: false,
enableRemoteModule: true, //是否啟用遠端模組（即在渲染程序頁面使用remote）
}
}
}
// 獲取視窗
getWindow(id) {
return BrowserWindow.fromId(id)
}
// 獲取全部視窗
getAllWindows() {
return BrowserWindow.getAllWindows()
}
// 建立視窗
createWindows(options) {
console.log('------------開始建立視窗...')
console.log(options)
let args = Object.assign({}, windowsCfg, options)
console.log(args)
// 判斷視窗是否存在
for(let i in this.group) {
if(this.getWindow(Number(i)) && this.group[i].route === args.route && !this.group[i].isMultiWindow) {
this.getWindow(Number(i)).focus()
return
}
}
let opt = this.winOpts([args.width || 800, args.height || 600])
if(args.parentId) {
console.log('parentId：' + args.parentId)
opt.parent = this.getWindow(args.parentId)
} else if(this.main) {
console.log(666)
}
if(typeof args.modal === 'boolean') opt.modal = args.modal
if(typeof args.resizable === 'boolean') opt.resizable = args.resizable
if(args.backgroundColor) opt.backgroundColor = args.backgroundColor
if(args.minWidth) opt.minWidth = args.minWidth
if(args.minHeight) opt.minHeight = args.minHeight
console.log(opt)
let win = new BrowserWindow(opt)
console.log('視窗id：' + win.id)
this.group[win.id] = {
route: args.route,
isMultiWindow: args.isMultiWindow,
}
// 是否最大化
if(args.maximize && args.resizable) {
win.maximize()
}
// 是否主視窗
if(args.isMainWin) {
if(this.main) {
console.log('主視窗存在')
delete this.group[this.main.id]
this.main.close()
}
this.main = win
}
args.id = win.id
win.on('close', () => win.setOpacity(0))
// 開啟網址（載入頁面）
/**
* 開發環境: http://localhost:8080
* 正式環境: app://./index.html
*/
let winURL
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
// win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
winURL = args.route ? `http://localhost:8080${args.route}` : `http://localhost:8080`
// 開啟開發者除錯工具
// if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
// win.loadURL('app://./index.html')
winURL = args.route ? `app://./index.html${args.route}` : `app://./index.html`
}
win.loadURL(winURL)
win.once('ready-to-show', () => {
win.show()
})
// 遮蔽視窗選單（-webkit-app-region: drag）
win.hookWindowMessage(278, function(e){
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 100)
return true
})
}
// 關閉所有視窗
closeAllWindow() {
for(let i in this.group) {
if(this.group[i]) {
if(this.getWindow(Number(i))) {
this.getWindow(Number(i)).close()
} else {
console.log('---------------------------')
app.quit()
}
}
}
}
// 建立托盤
createTray() {
console.log('建立托盤')
const contextMenu = Menu.buildFromTemplate([
{
label: '顯示',
click: () => {
for(let i in this.group) {
if(this.group[i]) {
// this.getWindow(Number(i)).show()
let win = this.getWindow(Number(i))
if(!win) return
if(win.isMinimized()) win.restore()
win.show()
}
}
}
}, {
label: '退出',
click: () => {
app.quit()
}
}
])
console.log(__dirname)
const trayIco = path.join(__dirname, '../static/logo.png')
console.log(trayIco)
this.tray = new Tray(trayIco)
this.tray.setContextMenu(contextMenu)
this.tray.setToolTip(app.name)
}
// 開啟監聽
listen() {
// 關閉
ipcMain.on('window-closed', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).close()
if(this.group[Number(winId)]) delete this.group[Number(winId)]
} else {
this.closeAllWindow()
}
})
// 隱藏
ipcMain.on('window-hide', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).hide()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).hide()
}
})
// 顯示
ipcMain.on('window-show', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).show()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).show()
}
})
// 最小化
ipcMain.on('window-mini', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).minimize()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).minimize()
}
})
// 最大化
ipcMain.on('window-max', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).maximize()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).maximize()
}
})
// 最大化/最小化
ipcMain.on('window-max-min-size', (event, winId) => {
if(winId) {
if(this.getWindow(winId).isMaximized()) {
this.getWindow(winId).unmaximize()
}else {
this.getWindow(winId).maximize()
}
}
})
// 還原
ipcMain.on('window-restore', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).restore()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).restore()
}
})
// 重新載入
ipcMain.on('window-reload', (event, winId) => {
if(winId) {
this.getWindow(Number(winId)).reload()
} else {
for(let i in this.group) if(this.group[i]) this.getWindow(Number(i)).reload()
}
})
// 建立視窗
ipcMain.on('window-new', (event, args) => this.createWindows(args))
}
}
然後新建一個 plugins.js 檔案，用來封裝一些呼叫方法。
/**
* 建立視窗
*/
export function windowCreate(args) {
console.log(args)
ipcRenderer.send('window-new', args)
}
/**
* 關閉視窗
*/
export function windowClose(id) {
console.log('視窗id：' + id)
ipcRenderer.send('window-closed', id)
}
// ...
在.vue頁面引入plugins.js，執行建立視窗方法。
<template>
<div class="app">
<h1>This is an new page</h1>
<img src="@assets/v3-logo.png" width="100" alt="">
<p class="mt-10"><a-button type="primary" @click="handleNewWin1">新視窗1</a-button></p>
<p class="mt-10"><a-button type="primary" @click="handleNewWin2">新視窗2</a-button></p>
</div>
</template>
<script>
import {windowClose, windowCreate} from '@/plugins'
export default {
setup() {
const handleNewWin1 = () => {
windowCreate({
title: '管理頁面',
route: '/manage',
width: 1000,
height: 750,
backgroundColor: '#f9f9f9',
resizable: true,
modal: true,
maximize: true,
})
}
const handleNewWin2 = () => {
windowCreate({
title: '關於頁面',
route: '/about?id=13',
width: 750,
height: 450,
backgroundColor: '#f90',
resizable: false,
})
}
...
return {
handleNewWin1,
handleNewWin2,
...
}
}
}
</script>
- 一些小踩坑記錄
1、建立托盤圖示，一開始圖示一直不顯示，以為__dirname指向src目錄，最後除錯發現原來是指向dist_electron
console.log(__dirname) let trayIco = path.join(__dirname, '../static/logo.png') console.log(trayIco)
let trayIco = path.join(__dirname, '../static/logo.png') let tray = new Tray(trayIco)
這樣就能載入本地圖片，顯示托盤圖示了。
2、設定自定義拖拽 -webkit-app-region: drag 無法響應點選事件，無法禁用右鍵選單。
當窗體設定frame: false後，可以通過-webkit-app-region: drag來實現自定義拖動，設定後的拖動區域無法響應其它事件，可以給需要點選的連結或者按鈕設定-webkit-app-region: no-drag來實現。
不過還有一個問題，設定-webkit-app-region: drag後，會出現如下圖系統右鍵選單。
最後經過一番除錯，可以通過下面這個方法簡單禁用掉，親測有效~~
win.hookWindowMessage(278, function(e){
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 150)
return true
})
ok，以上就是基於vue3.x+electron實現多開視窗的思路，希望對大家有些幫助！