Not long ago, I shared with you a vue3+ Vant3 development imitation Douyin short video project. Today, I bring you the newly developed VUe3 + Electron cross-platform imitation QQ/ wechat chat application.

Vue3.0-electronic-chat is a chat software based on the combination of VUE3 family bucket and electron cross-platform technology. Vue3 + Electron11 + ANTDV + V3Scroll and other technologies are used to support opening multiple Windows and skin changing functions.

Using the technology

  • Vue3 Family bucket: vue3.0+vuex4+vue-router@4
  • Cross-platform framework: electron11.2.3
  • Packer: vuE-cli-plugin-electron – Builder
  • Component library: Ant-Design-Vue (VuE3 component library on Ant Financial Desktop)
  • Dialog box component: V3Layer (Vue3 desktop popup component)
  • Scroll bar component: V3Scroll (vue3 custom beautify scroll bar)
  • Font icon: Ali iconfont icon

Project directory structure

The electron version used in the project is V11.2.3, and the latest stable version is 11.3.0, with frequent updates and iterations.

If you’re not familiar with the electron cross-platform technology, check out the documentation.

www.electronjs.org/docs

Electron creates the borderless navigation bar

In order to make the whole project more beautiful, only use the bezel-less mode. To remove the system top menu bar, set frame: false when creating the window. Maximize/minimize and close buttons are also customizable.

Css3 style -webkit-app-region: drag Controls the dragable region. Elements in the dragable region cannot be clicked. To resolve this problem, set -webkit-app-region: no-drag.

Right-click in the drag area and the system menu as shown in the above image will appear. In order to make the project more advanced, you can quickly screen it through the following method.

win.hookWindowMessage(278, () => {
    win.setEnabled(false)
    setTimeout(() => {
        win.setEnabled(true)
    }, 100)

    return true
})
Copy the code

Check out our previous post on how to customize the navigation bar and the close button in the upper right corner.

Vue3 + electron build without borders navigation bar | biggest/small/close button

Electron | create tray icon tray

The electron website has detailed documentation on how to create an icon similar to the QQ system tray.

www.electronjs.org/docs/api/tr…

const handleWinClose = () => { if(winCfg.window.isMainWin) { let $el = v3layer({ type: 'android', content: 'Should I minimize to tray without exiting the program? ', BTNS: [{color:#ff5438', style: 'color:#ff5438', click: () => {$el.close() store.mit ('LOGOUT') setWin('close')}}, {text-align: left; style: 'color:#00d2ff', click: () => { $el.close() win.hide() } } ] }) }else { setWin('close', winCfg.window.id) } }Copy the code

/** * @time Andy by 2021-02 Q: 282310962 wx: xy190310 */ 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: 'I'm on line ', icon: Path. The join (__dirname, '.. / static/icon - online. PNG '), click: () = > {...}}, {label: 'busy' icon: Path. The join (__dirname, '.. / static/icon - busy. PNG '), click: () = > {...}}, {label: 'stealth' icon: Path. Join (__dirname, '.. / static/icon - invisible. PNG '), click: () = > {...}}, {label: 'leave' icon: path.join(__dirname, '../static/icon-offline.png'), click: () => {...} }, {type: 'separator'}, { label: 'to close all the sound, click: () = > {...}}, {label:' closed head flashing, click: () = > {enclosing flashTray (false)}}, {type: 'separator'}, {label: 'open main window ', 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: 'exit ', 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 }Copy the code

Call flashTray (false | true) can be quickly closed/open tray flashing function.

In addition, when creating the tray, you need to pay attention to the ICO icon path. You can debug development by printing the output path through console.log(__dirname).

Vue3 + electron custom pop-up | new window

The popover in the project is divided into vuE3 custom component and ELECTRON new open form two ways.

The specific implementation method is not introduced in detail here, we can go to see the following two shared articles.

Vue3.x Custom global dialog box component v3Layer

Electron custom multiple Windows | modal form the father and the son

Vue3 + electron on-demand introduction | packaging configuration

Since some of the features in the Ant-Design-Vue component library are needed in the project, it is best to introduce them on demand. Packing won’t reduce volume.

Configure in babel.config.js.

Module. exports = {presets: ['@vue/cli-plugin-babel/preset'], // Preset to introduce third-party plugins: [['import', {'libraryName': 'ant-design-vue', 'libraryDirectory': 'es', 'style': 'css', } ] ]}Copy the code

In addition, you can do some simple project configuration and some configuration items packed in electron Builder in vue.config.js.

/ / const path = require('path') module.exports = {... // After the pluginOptions are configured, the rendering process can use ipcRenderer nodeIntegration: true, // project package parameters are configured. {productName ":" the electron - qchat ", / / project name Packaging generated exe prefix name "appId" : "com. Example. Electronqchat", / / package name "compression will" : "Maximum", / / store | normal | maximum compression packaging is fast (store) "artifactName" : "${productName}-${version}-${platform}-${arch}.${ext}", // "directories": { // "output": "Build ", // output folder (default dist_electron) //}," ASar ": false, //asar package "extraResources": [{"from": ". "Static"},], "nsis" : {" oneClick ": false, / / a key installation" allowToChangeInstallationDirectory ": true, / / allowed to modify the installation directory" perMachine ": "DeleteAppDataOnUninstall ": true, // Delete data when uninstalling "createDesktopShortcut": True, // Create desktop icon "createStartMenuShortcut": true, // Create start menu icon "shortcutName": "ElectronQChat", // desktop shortcut icon name}, "win": {" icon ":". / static/shortcut. Ico ", / / icon path}}}}}Copy the code

End, based on vue3. X +electron development cross-platform imitation QQ chat application to share here, thank you for reading. 💪

Finally, a vuE3 imitation douyin app short video example is attached

Juejin. Cn/post / 692460…