基於vue3.0+electron新開視窗|Electron多開窗體|父子模態視窗

xiaoyan2017發表於2021-02-15

Vue

最近一直在折騰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實現多開視窗的思路，希望對大家有些幫助！?

最後附上一個vite2開發的vue3+vant3.x短視訊例項專案

https://www.cnblogs.com/xiaoyan2017/p/14361160.html

js開啟新視窗
2016-07-13
JS
jQuery在子視窗如何操作父視窗元素
2017-02-13
jQuery
討論關閉子視窗，重新整理父視窗（非模式視窗）
2011-06-28
模式
使用C#開啟新視窗關閉舊視窗的方法;winform中防止重複開啟多個相同子窗體
2011-10-13
C#ORM
js如何在子視窗中關閉父視窗
2017-03-15
JS
js 開啟新視窗方式
2019-02-16
JS
關於父視窗獲取跨域iframe子視窗中的元素
2019-01-08
跨域
基於Electron27+Vite4+React18搭建桌面端專案|electron多開視窗實踐
2023-10-26
ViteReact
javascript如何在彈出視窗給父視窗賦值
2017-03-16
JavaScript賦值
Qt入門（14）——父視窗部件和子視窗部件
2014-09-30
QT
jQuery iframe子視窗獲取父視窗元素簡單介紹
2017-04-06
jQuery
vue 新視窗開啟外連結
2018-12-26
Vue
window.open()開啟新視窗教程
2021-01-22
Windows Phone 中WebBrowser開啟新視窗
2013-01-22
WindowsWeb
FineUI小技巧（5）向子視窗傳值，向父視窗傳值
2014-06-29
UI
基於Android 4.4 開發的多視窗系統開放原始碼
2015-06-06
Android原始碼
JavaScript視窗功能指南之定製新視窗 (轉)
2007-12-04
JavaScript
iframe裡面的頁面呼叫父視窗,左右視窗js函式的方法
2013-12-19
JS函式
父窗體、子窗體關係設定
2017-10-30
Win10如何改變切換視窗開啟所有視窗
2016-12-22
Win10
Android N新特性--多視窗支援
2016-08-07
Android
JavaScript - 模式視窗和非模式視窗
2014-04-01
JavaScript模式
js實現window.open()彈出視窗和父視窗之間相互操作
2017-04-04
JS
C# WinForm 父窗體子窗體傳值
2009-02-11
C#ORM
jQuery子窗體如何取得父窗體的元素
2011-12-26
jQuery
動態設定連線<a>元素新視窗頁面開啟
2017-04-08
vim 多視窗多檔案
2012-10-20
新視窗如何處理
2017-12-11
Go Qt5 建立空白視窗、視窗居中及關閉視窗事件
2020-10-07
GoQT事件
Windows API視窗程式設計 - 空白視窗
2019-07-28
WindowsAPI程式設計
Kali Linux開啟多個終端視窗
2020-04-29
Linux
如何在同一視窗開啟多個Excel
2016-06-14
Excel
在Centos 8 伺服器用tmux多開視窗
2024-04-07
CentOS伺服器UX
拖拽防止火狐瀏覽器開啟新視窗
2019-03-22
瀏覽器
JavaScript中的Window物件(開啟新的視窗)
2017-09-13
JavaScript物件
以post方式傳參方式開啟新視窗
2012-04-01
視窗事件
2018-09-19
事件
JS彈出視窗視窗的位置和大小
2015-01-09
JS

基於vue3.0+electron新開視窗|Electron多開窗體|父子模態視窗

相關文章