查看: 40|回复: 0

vue+electron聊天|electron仿微信界面

[复制链接]

该用户从未签到

15

主题

18

帖子

86

积分

注册会员

Rank: 2

积分
86
QQ
发表于 2020-1-12 11:12:14 | 显示全部楼层 |阅读模式

项目介绍:
使用Electron+Vue+electron-vue+vuex+Node+vue-video-player等技术构建开发的高仿微信客户端聊天室,实现了消息发送/表情,光标处插入表情,图片/视频预览,微信dll截图,右键菜单,红包/朋友圈/换肤功能。

007360截图20200108103303225.png

技术实现:
  • 框架技术:electron + electron-vue + vue
  • 状态管理:Vuex
  • 地址路由:Vue-router
  • 字体图标:阿里iconfont字体图标库
  • 弹窗插件:wcPop
  • 打包工具:electron-builder
  • 环境配置:Node.js + Chromium
  • 图片预览:vue-photo-preview
  • 视频组件:vue-video-player


  1. /**
  2. * @Desc   公共及全局组件配置
  3. * @about  Q:282310962  wx:xy190310
  4. */

  5. // 引入公共组件
  6. import winBar from './components/winbar'
  7. import sideBar from './components/sidebar'

  8. // 引入公共样式
  9. import './assets/fonts/iconfont.css'
  10. import './assets/css/reset.css'
  11. import './assets/css/layout.css'

  12. // 引入弹窗wcPop
  13. import wcPop from './assets/js/wcPop/wcPop'
  14. import './assets/js/wcPop/skin/wcPop.css'

  15. // 引入图片预览组件vue-photo-preview
  16. import photoView from 'vue-photo-preview'
  17. import 'vue-photo-preview/dist/skin.css'

  18. // 引入视频播放组件vue-video-player
  19. import videoPlayer from 'vue-video-player'
  20. import 'video.js/dist/video-js.css'

  21. const install = Vue => {
  22.     // 注册组件
  23.     Vue.component('win-bar', winBar)
  24.     Vue.component('side-bar', sideBar)

  25.     // 应用实例
  26.     Vue.use(photoView, {
  27.         // loop: false, //循环
  28.         // fullscreenEl: true, //全屏
  29.         // arrowEl: true, //左右按钮
  30.     })
  31.     Vue.use(videoPlayer)
  32. }

  33. export default install
复制代码
001360截图20200108101448499.png 002360截图20200108101513050.png
009360截图20200108102231769.png
007360截图20200108103303225.png
006360截图20200108103216338.png
011360截图20200108102556698.png
013360截图20200108103747272.png
014360截图20200108103928408.png
018360截图20200108104532767.png
019360截图20200108105155294.png
020360截图20200108105937133.png
024360截图20200108110609181.png
025360截图20200108110820571.png
026360截图20200108111126868.png
029360截图20200108113415376.png
031360截图20200108114130270.png
033360截图20200108114221398.png

Electron 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。
electron 主进程创建窗体
通过 electron 里的 BrowserWindow 对象创建和控制浏览器窗口

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

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

  4. /**
  5. * Set `__static` path to static files in production
  6. * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
  7. */
  8. if (process.env.NODE_ENV !== 'development') {
  9.   global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
  10. }

  11. let mainWin
  12. let tray
  13. let forceQuit = false
  14. let logined = false

  15. /**
  16. * 创建主窗口
  17. */
  18. function createMainWin() {
  19.   mainWin = new BrowserWindow({
  20.     // 背景颜色
  21.     // backgroundColor: '#ebebeb',
  22.     width: Common.WIN_SIZE_MAIN.width,
  23.     height: Common.WIN_SIZE_MAIN.height,
  24.     title: Common.WIN_TITLE,
  25.     useContentSize: true,
  26.     autoHideMenuBar: true,
  27.     // 无边框窗口
  28.     frame: false,
  29.     resizable: true,
  30.     // 窗口创建的时候是否显示. 默认值为true
  31.     show: false,
  32.     webPreferences: {
  33.       // devTools: false,
  34.       webSecurity: false
  35.     }
  36.   })

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

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

  43.   // 判断最小化到系统托盘
  44.   mainWin.on('close', (e) => {
  45.     if(logined && !forceQuit) {
  46.       e.preventDefault()
  47.       mainWin.hide()
  48.     }else {
  49.       mainWin = null
  50.       app.quit()
  51.     }
  52.   })

  53.   initialIPC()
  54. }

  55. app.on('ready', createMainWin)

  56. app.on('activate', () => {
  57.   if(mainWin === null) {
  58.     createMainWin()
  59.   }
  60. })

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

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

  69. ...
复制代码
electron实现托盘图标及闪烁效果
  1. /**
  2. * 托盘图标事件
  3. */
  4. let flashTrayTimer = null
  5. let trayIco1 = `${__static}/icon.ico`
  6. let trayIco2 = `${__static}/empty.ico`
  7. let apptray = {
  8.   // 创建托盘图标
  9.   createTray() {
  10.     tray = new Tray(trayIco1)
  11.     const menu = Menu.buildFromTemplate([
  12.       {
  13.         label: '打开主界面',
  14.         icon: `${__static}/tray-ico1.png`,
  15.         click: () => {
  16.           if(mainWin.isMinimized()) mainWin.restore()
  17.           mainWin.show()
  18.           mainWin.focus()
  19.          
  20.           this.flashTray(false)
  21.         }
  22.       },
  23.       {
  24.         label: '关于',
  25.       },
  26.       {
  27.         label: '退出',
  28.         click: () => {
  29.           if(process.platform !== 'darwin') {
  30.             mainWin.show()
  31.             // 清空登录信息
  32.             mainWin.webContents.send('clearLoggedInfo')
  33.             
  34.             forceQuit = true
  35.             mainWin = null
  36.             app.quit()
  37.           }
  38.         }
  39.       },
  40.     ])
  41.     tray.setContextMenu(menu)
  42.     tray.setToolTip('electron-vchat v1.0.0')

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

  48.       this.flashTray(false)
  49.     })
  50.   },
  51.   // 托盘图标闪烁
  52.   flashTray(bool) {
  53.     let hasIco = false

  54.     if(bool) {
  55.       if(flashTrayTimer) return
  56.       flashTrayTimer = setInterval(() => {
  57.         tray.setImage(hasIco ? trayIco1 : trayIco2)
  58.         hasIco = !hasIco
  59.       }, 500)
  60.     }else {
  61.       if(flashTrayTimer) {
  62.         clearInterval(flashTrayTimer)
  63.         flashTrayTimer = null
  64.       }

  65.       tray.setImage(trayIco1)
  66.     }
  67.   },
  68.   // 销毁托盘图标
  69.   destroyTray() {
  70.     this.flashTray(false)
  71.     tray.destroy()
  72.     tray = null
  73.   }
  74. }
复制代码
◆ electron自定义最大/小化、关闭按钮、无外框窗口
electron中配置frame: false后,窗口将以无边框展示,原先的顶部操作栏就没有了,需要自定义配置。

  1.     methods: {

  2.         // 置顶窗口
  3.         handleFixTop() {
  4.             this.isAlwaysOnTop = !this.isAlwaysOnTop
  5.             currentWin.setAlwaysOnTop(this.isAlwaysOnTop)
  6.         },

  7.         // 最小化
  8.         handleMin() {
  9.             currentWin.minimize()
  10.         },

  11.         // 最大化
  12.         handleMax() {
  13.             if(!currentWin.isMaximizable()) return
  14.             if(currentWin.isMaximized()) {
  15.                 currentWin.unmaximize()
  16.                 this.SET_WINMAXIMIZE(false)
  17.             }else {
  18.                 currentWin.maximize()
  19.                 this.SET_WINMAXIMIZE(true)
  20.             }
  21.         },

  22.     }
  23. }
复制代码
项目中使用的css属性设置-webkit-app-region: drag 进行局部拖动
注意:默认设置-webkit-app-region: drag后,下面的元素不能点击操作,可通过设置需点击元素no-drag即可。


electron图文聊天编辑器光标处插入表情+截图dll
vue electron 中设置 div 可编辑 contenteditable="true" 自定义双向绑定 v-model
好了,运用 electron 开发客户端聊天项目就介绍到这里,后续继续分享实例项目。




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2020-1-22 19:51 , Processed in 0.095609 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表