electron跨平台仿QQ|微信客户端聊天|vue3+electron聊天应用

Electron是一款非常棒的跨平台构建桌面exe应用程序。拥有成千上万个团队选择使用electron构建跨平台软件。

基于Vue3全家桶+Electron跨平台技术开发聊天应用ElectronQchat。使用到了vue3+electron+antdv+vuex+v3layer等技术实现开发。

实现了发送图文表情消息、图片/视频预览、拖拽发送图片、朋友圈/红包等功能。

支持多开窗口、动态换肤等功能。

• 编辑器：VScode
• 框架技术：Vue3.0+Electron11.2.3+Vuex4+VueRouter@4
• UI组件库：Ant-design-vue^2.0.0 (蚂蚁金服pc端vue3组件库)
• 打包工具：vue-cli-plugin-electron-builder
• 按需引入：babel-plugin-import^1.13.3
• 弹窗插件：V3layer（基于vue3自定义dialog组件）
• 滚动条插件：V3scroll（基于vue3自定义虚拟滚动条）

项目中使用到的electron版本为v11.2.3，官网最新稳定版本为11.3.0。

创建窗口的时候配置frame: false会去掉系统顶部菜单。可通过自定义拖拽区域实现拖动窗体。

设置 -webkit-app-region: drag 可控制可拖拽区域，可拖拽区域里面的元素不能点击，可通过设置 -webkit-app-region: no-drag 来解决。

不过拖拽区域右键会出现如上图所示系统菜单，可通过如下方法快速关闭。

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

    return true
})

顶部导航条模板navbar.vue

electron可以快速创建系统托盘，实现类似QQ托盘闪烁效果。

大家需要提前准备两张尺寸一致的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
}

需要注意ico图标路径，在主进程中__dirname指向了dist_electron目录。
可以在根目录下新建一个静态资源目录，用来放一些静态ico或dll等文件。

好了，基于electron开发跨端聊天应用就暂时分享到这里。后续还会分享一些electron实战项目。谢谢大家的支持哈~~