Electron11模仿QQ+微信桌面端聊天|vue3.x+antdv+electron跨端聊天應用

xiaoyan2015發表於2021-02-28
Vue跨端

一、專案簡介

基於vue3.x全家桶和electron跨平臺技術仿製QQ|微信聊天應用。使用了Vue3.0+Electron11+Antdv+Vuex4+V3Layer+V3Scrll等技術構架開發。基本實現了圖文訊息、連結/視訊/圖片預覽、拖拽傳送圖片、截圖dll、朋友圈等功能。

技術框架

  • 編輯器：vscode
  • Vue3全家桶：vue3.0+vuex4+vue-router@4
  • 跨平臺框架：electron11.2.3
  • 打包工具：vue-cli-plugin-electron-builder
  • UI元件庫：ant-design-vue (螞蟻金服網頁vue3元件庫)
  • 彈出框元件：v3layer (vue3桌面端彈窗元件)
  • 滾動條元件：v3scroll (vue3自定義模擬滾動條)
  • 環境配置：nodejs + npm/yarn

專案結構目錄

vue3自定義dialog和scroll滾動條

專案中的一部分彈窗是使用vue3自定義元件實現，另外滾動條是基於vue3模擬系統滾動條來實現效果。
Electron11模仿QQ+微信桌面端聊天|vue3.x+antdv+electron跨端聊天應用
鑑於之前有過相關的分享，這裡就不詳細介紹了。
vue3自定義元件之全域性dialog彈窗元件
vue3自定義元件之模擬美化系統滾動條元件

electron自定義頂部選單欄

為了讓UI美觀一致，專案採用的是無邊框模式。建立窗體的時候設定frame:false即可實現去掉軟體頂部自帶選單。
可以通過-webkit-app-region:drag來實現自定義拖拽區域。
electron提供了相應方法來實現自定義最大化/最小化/關閉按鈕。

至於具體如何實現自定義導航，大家可以去看看下面這篇文章。
electron+vue3自定義頂部導航條|最大/小/關閉按鈕
另外需要注意：拖拽區域右鍵會彈出如下系統選單。

為了追求完美，如何去掉呢？經過一番測試，暫時可以通過如下方法遮蔽掉。

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

    return true
})

electron仿QQ托盤圖示/閃爍效果

大家都知道QQ圖示的閃爍功能讓人影響深刻。使用electron一樣也可以實現這一效果。


在開發之前，需要準備好兩個尺寸一致的ico圖示，其中一個透明就好。
Electron11模仿QQ+微信桌面端聊天|vue3.x+antdv+electron跨端聊天應用
然後通過定時器，來進行切換顯示即可。

// 建立系統托盤圖示
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主程式中__dirname指向了dist_electron目錄。
這樣就可以在根目錄下新建一個static目錄，然後path.join(__dirname, '../static/favicon.ico')就能識別到本地圖示了。

electron-builder打包配置

在建立專案的時候，會有一個vue.config.js檔案。可用來配置一些簡單的vue3專案，另外也可以進行一些electron打包配置項。

/**
 * @Desc     vue3+electron專案/打包配置
 * @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", //圖示路徑
                }
            }
        }
    }
}

最後還需注意：

  • 專案路徑最好不要包含中文，打包的時候會報錯！
  • 在頁面中最好不要使用getCurrentInstance來操作store或router，打包也會報錯！
  • 在頁面中使用ipcRenderer或remote，記得在建立視窗的時候配置nodeIntegration:true和enableRemoteModule:true，否則打包會報錯！
  • 呼叫dll來截圖，打包後無效！可以配置extraResources來解決。
// 拷貝靜態資源目錄到指定位置
"extraResources": [
    {
        "from": "./static",
        "to": "static"
    },
],

好了，以上就是vue3+electron開發跨平臺仿製QQ聊天軟體的一些介紹。希望大家喜歡哈~~

vue3.0+vant3高仿抖音短視訊|聊天直播例項

本作品採用《CC 協議》，轉載必須註明作者和本文連結
本文為原創文章，未經作者允許不得轉載，歡迎大家一起交流 QQ（282310962） wx（xy190310）

相關文章