Vue3.0+Electron聊天室|electron跨平臺仿QQ客戶端|vue3.x聊天應用

基於vue3+electron11跨端仿製QQ桌面應用實戰Vue3ElectronQchat。

使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技術構建跨平臺模仿QQ|TIM介面聊天應用。實現了傳送富文字訊息、圖片/視訊/連結預覽、拖拽傳送圖片、呼叫dll截圖、朋友圈等功能。支援多開視窗|父子modal視窗、換膚等操作。

一、技術棧

• 編碼工具：vscode
• 框架技術：vue3.0+electron11.2.3+vuex4+vue-router@4
• 元件庫：ant-design-vue^2.0.0 (螞蟻金服pc端vue3元件庫)
• 打包工具：vue-cli-plugin-electron-builder
• 按需引入：babel-plugin-import^1.13.3
• 彈窗元件：v3layer（基於vue3封裝的自定義對話方塊元件）
• 滾動條元件：v3scroll（基於vue3封裝的美化系統滾動條）
• 向量圖示：阿里iconfont字型圖示庫

二、目錄結構

◆ 一睹效果

◆ electron實現新開視窗/多窗體並存

專案支援新開多個視窗，只需呼叫公共createWin方法並傳入配置引數即可快速新開一個視窗。

// 關於視窗
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,
    })
}

支援如下引數配置：

// 視窗引數配置
export const winConfig = {
    id: null,               // 視窗唯一id
    background: '#fff',     // 背景色
    route: '',              // 路由地址url
    title: '',              // 標題
    data: null,             // 傳入資料引數
    width: '',              // 視窗寬度
    height: '',             // 視窗高度
    minWidth: '',           // 視窗最小寬度
    minHeight: '',          // 視窗最小高度
    x: '',                  // 視窗相對於螢幕左側座標
    y: '',                  // 視窗相對於螢幕頂端座標
    resize: true,           // 是否支援縮放
    maximize: false,        // 最大化視窗
    isMultiWin: false,      // 是否支援多開視窗（為true則會支援建立多個視窗）
    isMainWin: false,       // 是否主視窗（為true則會替代之前主視窗）
    parent: '',             // 父視窗（傳入父視窗id）
    modal: false,           // 模態視窗（需設定parent和modal選項）
    alwaysOnTop: false,     // 是否置頂視窗
}

至於如何使用vue3+electron搭建專案和建立多視窗，之前有過一篇分享文章，大家可以去看看。

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

◆ electron自定義無邊框窗體拖拽/禁用系統右鍵選單

專案採用無邊框模式  frame: false  如上圖所示區域是自定義拖拽導航欄。支援傳入標題、標題顏色/背景色、是否透明背景等功能。

但有一個問題，設定 -webkit-app-region: drag 之後，點選滑鼠右鍵會彈出系統選單，總感覺是一種偽拖拽效果，可通過如下方法在建立窗體的時候暫時給遮蔽掉。

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

    return true
})

至於如何自定義導航條及最大化/最小化/關閉按鈕，之前也有過一篇分享文章，大家感興趣可以去看一看。

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

◆ electron實現QQ托盤圖示/閃爍

關閉主窗體的時候，會提示直接關閉軟體還是最小化到系統托盤。

// 關閉視窗
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)
    }
}

由於專案支援開啟多個視窗，在關閉的時候需要判斷是否是主視窗，如果不是則直接傳入該視窗id進行關閉，如果是主視窗，則會出現彈窗提示。

// 建立系統托盤圖示
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
}

大家需要準備兩個大小一樣的ico圖示，其中一個透明即可。通過定時器控制 setImage() 函式來顯示ico圖示，達到閃爍效果。

通過呼叫 flashTray(true|false) 方法來開啟/停止托盤閃爍。

注意：圖示路徑如果不正確，則無法顯示托盤圖示，大家可以 console.log(__dirname) 來檢視路徑。預設是輸出dist_electron目錄。

◆ vue3.0全域性對話方塊/虛擬滾動條元件

大家看到的專案中有一些彈窗是使用vue3自定義元件來實現的。另外專案中的滾動條也是使用vue3自定義封裝替代系統滾動條。

之前也有過兩篇相關的技術分享，這裡就不詳細介紹了，大家感興趣也可以去看看哈。

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

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

◆ vue3.x+electron專案配置/打包配置

專案搭建之後，根目錄會有一個vue.config.js專案配置檔案。可進行一些簡單的環境/外掛配置，另外electron-builder打包引數也可以在裡面進行配置。

/**
 * @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", //圖示路徑
                }
            }
        }
    }
}

◆ ant-design-vue元件庫按需引入

有時候專案開發，需要用到一些元件庫裡面的個別功能，這時按需引入最適合，會減少打包後的大小。

安裝按需引入外掛  npm i babel-plugin-import -D 並在babel.config.js裡面進行相關引入配置。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 按需引入第三方外掛
  plugins: [
    [
      'import',
      {
        'libraryName': 'ant-design-vue',
        'libraryDirectory': 'es',
        'style': 'css',
      }
    ]
  ]
}

這時候就可以按需引入ant-design-vue元件了，樣式檔案會自動引入的。

// 按需引入ant-design-vue元件庫
import {
    Button, message, Tabs, Checkbox, Image, Upload
} from 'ant-design-vue'

// ...

const Plugins = (app) => {
    app.use(Button)
    app.use(Tabs)
    app.use(Checkbox)
    app.use(Image)
    app.use(Upload)

    // ...

    app.config.globalProperties.$message = message
}

export default Plugins

◆ electron實現截圖功能

專案中的截圖功能，本想著自己搗鼓一個，後來時間有限，就使用了一個微信截圖dll來實現。可實現基本功能，並且打包後也可以截圖。

// 螢幕截圖
ipcMain.on('win-capture', () => {
    console.log('呼叫微信dll截圖...')
    let printScr = execFile(path.join(__dirname, '../static/screenShot/PrintScr.exe'))
    printScr.on('exit', (code) => {
        if(code) {
            console.log(code)
        }
    })
})

如果出現打包後，截圖功能失效，需要在vue.config.js的打包配置中新增  extraResources 欄位配置。

// 拷貝靜態資源目錄到指定位置
"extraResources": [
    {
        "from": "./static",
        "to": "static"
    },
],

from表示檔案原路徑，to表示打包後資源放置的路徑。打包之後會在resources目錄下有個static目錄。

另外還需注意：

1、專案路徑不能含有中文，否則打包會出錯！

2、儘量不要使用 getCurrentInstance 函式來操作store或router，打包也會出錯！

3、在渲染程式，也就是.vue頁面，使用ipcRenderer或remote出現如下錯誤

 Uncaught TypeError: fs.existsSync is not a function 

則需要配置  nodeIntegration: true  來開啟Node環境支援。

OK，基於Vue3+Electron開發桌面端仿Q應用就分享到這裡。希望對大家有所幫助哈~~ ??

最後附上一個vite2+vue3+vant3短視訊例項專案

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