electron+vue3.x+antdv電腦版聊天|electron-vue3仿QQ聊天應用

前言

2021年了，vue3開發也需要加緊提上日程，最近一直在搗鼓Electron+Vue3結合的項目。前段時間有給大家分享一個vue3仿抖音短視頻實例項目。今天帶來的是最新研發的Vue3+Electron跨平臺電腦端聊天exe應用程序。

採用無邊框模式，自定義導航欄菜單。

基本實現了圖文消息、圖片/視頻預覽、截圖、拖拽發送圖片、朋友圈等功能。

搭建技術

編碼+技術：vscode | vue3.0+electron11.2.3+vuex4+vue-router@4
組件庫：ant-design-vue (阿里桌面端vue3組件庫)
彈窗組件：v3layer（vue3自定義彈窗組件）
滾動條組件：v3scroll（vue3自定義滾動條組件）
打包工具：vue-cli-plugin-electron-builder
按需引入：babel-plugin-import^1.13.3

目錄結構

electron+vue3自定義無邊框導航條

爲了讓項目UI更加漂亮，採用了frame:false無邊框窗體，所以需要自定義頂部導航菜單。通過-webkit-app-region:drag快速實現一個可拖拽區域。

拖拽區域裏面的元素無法響應點擊事件，可以通過設置-webkit-app-region:no-drag來解除。另外最大化/最小化/關閉按鈕也需要自定義實現。

不過有個問題，如上圖：拖拽區域右鍵會有系統菜單，大家如果對項目要求高的話，可以通過下面的方法快速屏蔽掉。

// 屏蔽系統右鍵菜單
win.hookWindowMessage(278, () => {
    win.setEnabled(false)
    setTimeout(() => {
        win.setEnabled(true)
    }, 100)

    return true
})

由於之前有過相關分享，大家感興趣可以去看看下面這篇文章。

electron+vue3實現自定義導航菜單欄

electron多開器|父子modal窗口

項目支持多個窗口同時存在，父子模態窗口。

// 關於窗口
const handleAboutWin = () => {
    createWin({
        title: '關於',
        route: '/about',
        width: 380,
        height: 280,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

// 換膚窗口
const handleSkinWin = () => {
    createWin({
        title: '換膚',
        route: '/skin',
        width: 720,
        height: 475,
        resize: false,
    })
}

// 朋友圈窗口
const handleFZoneWin = () => {
    createWin({
        title: '朋友圈',
        route: '/fzone',
        width: 550,
        height: 700,
        resize: false,
    })
}

// 界面管理器窗口
const handleUIManager = () => {
    createWin({
        title: '界面管理器',
        route: '/uimanager',
        width: 400,
        height: 475,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

通過如上方法即可快速生成一個新窗口，只需傳入配置參數就行。

之前也有過相關分享文章，這裏就不詳細介紹了，大家可以去看下。

electron創建多窗體|父子模態窗體

electron實現系統托盤

窗體關閉的時候會提示，直接退出程序，還是最小化到托盤。

const handleWinClose = () => {
    if(winCfg.window.isMainWin) {
        let $el = v3layer({
            type: 'android',
            content: '是否最小化至托盤，不退出程序？',
            btns: [
                {
                    text: '殘忍退出',
                    style: 'color:#ff5438',
                    click: () => {
                        $el.close()
                        store.commit('LOGOUT')
                        setWin('close')
                    }
                },
                {
                    text: '最小化至托盤',
                    style: 'color:#00d2ff',
                    click: () => {
                        $el.close()
                        win.hide()
                    }
                }
            ]
        })
    }else {
        setWin('close', winCfg.window.id)
    }
}

大家需要提前準備兩個大小一致的ico圖標，一個透明即可。通過定時器控制切換顯示。

// 創建系統托盤圖標
let tray = null
let flashTimer = null
let trayIco1 = path.join(__dirname, '../static/tray.ico')
let trayIco2 = path.join(__dirname, '../static/tray-empty.ico')

createTray() {
    const trayMenu = Menu.buildFromTemplate([
        {
            label: '我在線上', icon: path.join(__dirname, '../static/icon-online.png'),
            click: () => {...}
        },
        {
            label: '忙碌', icon: path.join(__dirname, '../static/icon-busy.png'),
            click: () => {...}
        },
        {
            label: '隱身', icon: path.join(__dirname, '../static/icon-invisible.png'),
            click: () => {...}
        },
        {
            label: '離開', icon: path.join(__dirname, '../static/icon-offline.png'),
            click: () => {...}
        },
        {type: 'separator'},
        {
            label: '關閉所有聲音', click: () => {...},
        },
        {
            label: '關閉頭像閃動', click: () => {
                this.flashTray(false)
            }
        },
        {type: 'separator'},
        {
            label: '打開主窗口', click: () => {
                try {
                    for(let i in this.winLs) {
                        let win = this.getWin(i)
                        if(!win) return
                        if(win.isMinimized()) win.restore()
                        win.show()
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
        {
            label: '退出', click: () => {
                try {
                    for(let i in this.winLs) {
                        let win = this.getWin(i)
                        if(win) win.webContents.send('win-logout')
                    }
                    app.quit()
                } catch (error) {
                    console.log(error)
                }
            }
        },
    ])
    this.tray = new Tray(this.trayIco1)
    this.tray.setContextMenu(trayMenu)
    this.tray.setToolTip(app.name)
    this.tray.on('double-click', () => {
        // ...
    })
}
// 托盤圖標閃爍
flashTray(flash) {
    let hasIco = false

    if(flash) {
        if(this.flashTimer) return
        this.flashTimer = setInterval(() => {
            this.tray.setImage(hasIco ? this.trayIco1 : this.trayIco2)
            hasIco = !hasIco
        }, 500)
    }else {
        if(this.flashTimer) {
            clearInterval(this.flashTimer)
            this.flashTimer = null
        }
        this.tray.setImage(this.trayIco1)
    }
}
// 銷燬托盤圖標
destoryTray() {
    this.flashTray(false)
    this.tray.destroy()
    this.tray = null
}

electron-builder打包配置

項目根目錄下的vue.config.js文件，可以進行簡單的項目配置及electron打包配置。

/**
 * @Desc     vue3項目配置文件
 * @Time     andy by 2021-02
 * @About    Q：282310962  wx：xy190310
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啓https
        https: false,
        // 編譯完是否打開網頁
        open: false,
        
        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路徑別名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@module', path.join(__dirname, 'src/module'))
            .set('@plugins', path.join(__dirname, 'src/plugins'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    },

    // 插件配置
    pluginOptions: {
        electronBuilder: {
            // 配置後可以在渲染進程使用ipcRenderer
            nodeIntegration: true,

            // 項目打包參數配置
            builderOptions: {
                "productName": "electron-qchat", //項目名稱 打包生成exe的前綴名
                "appId": "com.example.electronqchat", //包名
                "compression": "maximum", //store|normal|maximum 打包壓縮情況(store速度較快)
                "artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", //打包後安裝包名稱
                // "directories": {
                //     "output": "build", //輸出文件夾（默認dist_electron）
                // },
                "asar": false, //asar打包
                // 拷貝靜態資源目錄到指定位置
                "extraResources": [
                    {
                        "from": "./static",
                        "to": "static"
                    },
                ],
                "nsis": {
                    "oneClick": false, //一鍵安裝
                    "allowToChangeInstallationDirectory": true, //允許修改安裝目錄
                    "perMachine": true, //是否開啓安裝時權限設置（此電腦或當前用戶）
                    "artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}", //打包後安裝包名稱
                    "deleteAppDataOnUninstall": true, //卸載時刪除數據
                    "createDesktopShortcut": true, //創建桌面圖標
                    "createStartMenuShortcut": true, //創建開始菜單圖標
                    "shortcutName": "ElectronQChat", //桌面快捷鍵圖標名稱
                },
                "win": {
                    "icon": "./static/shortcut.ico", //圖標路徑
                }
            }
        }
    }
}

ok，以上就是electron+vue3開發跨平臺聊天應用實例。希望大家喜歡哈~~✏️

vue3.0+vant3+v3popup移動端h5仿微信聊天實例

electron+vue3.x+antdv電腦版聊天|electron-vue3仿QQ聊天應用

前言

搭建技術

目錄結構

electron+vue3自定義無邊框導航條

electron多開器|父子modal窗口

electron實現系統托盤

electron-builder打包配置

vxe-table的合併行以及同一行的合併列

軟件測試從自動化到智能化，大模型開始加入

數據結構筆記淺記（十二）雙向隊列

數據結構筆記淺記（十一）單向隊列

數據結構筆記淺記（八）列表

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結