electron+vue高仿微信客户端聊天|electron-vue聊天室仿微信界面

electron-vchat聊天室是基于electron+vue+electron-vue+vuex等技术仿制微信pc桌面聊天实例项目。实现了消息发送 /表情，图片 /视频预览，拖拽上传 /粘贴截图发送 /微信截图，右键功能、朋友圈 /红包 /换肤等功能

Electron跨平台实例：仿微信桌面端聊天室

• 架构技术：electron + electron-vue + vue
• 状态管理：Vuex
• 地址路由：Vue-router
• 字体图标：阿里 iconfont 字体图标库
• 弹窗插件：wcPop
• 打包工具：electron-builder
• 图片组件：vue-photo-preview
• 视频组件：vue-video-player

electron-vue构建项目后，主进程入口页面是src/main/index.js

import { BrowserWindow, app, ipcMain, Tray, Menu } from 'electron'

// 引入主线程公共配置
import Common from './utils/common'


if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\/g, '\\')
}

let mainWin
let tray
let forceQuit = false
let logined = false


function createMainWin() {
  mainWin = new BrowserWindow({
    // 背景颜色
    // backgroundColor: '#ebebeb',
    width: Common.WIN_SIZE_MAIN.width,
    height: Common.WIN_SIZE_MAIN.height,
    title: Common.WIN_TITLE,
    useContentSize: true,
    autoHideMenuBar: true,
    // 无边框窗口
    frame: false,
    resizable: true,
    // 窗口创建的时候是否显示. 默认值为true
    show: false,
    webPreferences: {
      // devTools: false,
      webSecurity: false
    }
  })

  mainWin.setMenu(null)
  mainWin.loadURL(Common.WIN_LOAD_URL())

  mainWin.once('ready-to-show', () => {
    mainWin.show()
    mainWin.focus()
  })

  // 判断最小化到系统托盘
  mainWin.on('close', (e) => {
    if(logined && !forceQuit) {
      e.preventDefault()
      mainWin.hide()
    }else {
      mainWin = null
      app.quit()
    }
  })

  initialIPC()
}

app.on('ready', createMainWin)

app.on('activate', () => {
  if(mainWin === null) {
    createMainWin()
  }
})

app.on('before-quit', () => {
  forceQuit = true
})

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') {
    app.quit()
  }
})

...

electron实现托盘图标及闪烁效果

let flashTrayTimer = null
let trayIco1 = `${__static}/icon.ico`
let trayIco2 = `${__static}/empty.ico`
let apptray = {
  // 创建托盘图标
  createTray() {
    tray = new Tray(trayIco1)
    const menu = Menu.buildFromTemplate([
      {
 label: '打开主界面',
 icon: `${__static}/tray-ico1.png`,
 click: () => {
   if(mainWin.isMinimized()) mainWin.restore()
   mainWin.show()
   mainWin.focus()
   
   this.flashTray(false)
 }
      },
      {
 label: '关于',
      },
      {
 label: '退出',
 click: () => {
   if(process.platform !== 'darwin') {
     mainWin.show()
     // 清空登录信息
     mainWin.webContents.send('clearLoggedInfo')
     
     forceQuit = true
     mainWin = null
     app.quit()
   }
 }
      },
    ])
    tray.setContextMenu(menu)
    tray.setToolTip('electron-vchat v1.0.0')

    // 托盘点击事件
    tray.on('click', () => {
      if(mainWin.isMinimized()) mainWin.restore()
      mainWin.show()
      mainWin.focus()

      this.flashTray(false)
    })
  },
  // 托盘图标闪烁
  flashTray(bool) {
    let hasIco = false

    if(bool) {
      if(flashTrayTimer) return
      flashTrayTimer = setInterval(() => {
 tray.setImage(hasIco ? trayIco1 : trayIco2)
 hasIco = !hasIco
      }, 500)
    }else {
      if(flashTrayTimer) {
 clearInterval(flashTrayTimer)
 flashTrayTimer = null
      }

      tray.setImage(trayIco1)
    }
  },
  // 销毁托盘图标
  destroyTray() {
    this.flashTray(false)
    tray.destroy()
    tray = null
  }
}

electron中配置frame: false后，窗口将以无边框展示，原先的顶部操作栏就没有了，需要自定义配置。

// 置顶窗口
handleFixTop() {
	this.isAlwaysonTop = !this.isAlwaysonTop
	currentWin.setAlwaysonTop(this.isAlwaysOnTop)
},

// 最小化
handleMin() {
	currentWin.minimize()
},

// 最大化
handleMax() {
	if(!currentWin.isMaximizable()) return
	if(currentWin.isMaximized()) {
		currentWin.unmaximize()
		this.SET_WINMAXIMIZE(false)
	}else {
		currentWin.maximize()
		this.SET_WINMAXIMIZE(true)
	}
},

项目中使用的是设置-webkit-app-region: drag 进行局部拖动
注意：默认设置-webkit-app-region: drag后，下面的元素不能点击操作，可通过设置需点击元素no-drag即可。

vue中设置div可编辑contenteditable=“true” 自定义双向绑定v-model ，定位光标处插入动态表情。

具体介绍：https://juejin.im/post/5e141ffc5188253a57049a63

最后，附上最近项目实战案例，希望能喜欢

• taro+react仿微信聊天IM实例
  https://www.cnblogs.com/xiaoyan2017/p/12039544.html
• uniapp+vue仿抖音短视频|直播app实例
  https://www.cnblogs.com/xiaoyan2017/p/11835641.html