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

xiaoyan2015

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



技术实现：

• 框架技术：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. // 引入公共组件
   
7. import winBar from './components/winbar'
   
8. import sideBar from './components/sidebar'
   
9. 
   
10. // 引入公共样式
    
11. import './assets/fonts/iconfont.css'
    
12. import './assets/css/reset.css'
    
13. import './assets/css/layout.css'
    
14. 
    
15. // 引入弹窗wcPop
    
16. import wcPop from './assets/js/wcPop/wcPop'
    
17. import './assets/js/wcPop/skin/wcPop.css'
    
18. 
    
19. // 引入图片预览组件vue-photo-preview
    
20. import photoView from 'vue-photo-preview'
    
21. import 'vue-photo-preview/dist/skin.css'
    
22. 
    
23. // 引入视频播放组件vue-video-player
    
24. import videoPlayer from 'vue-video-player'
    
25. import 'video.js/dist/video-js.css'
    
26. 
    
27. const install = Vue => {
    
28.     // 注册组件
    
29.     Vue.component('win-bar', winBar)
    
30.     Vue.component('side-bar', sideBar)
    
31. 
    
32.     // 应用实例
    
33.     Vue.use(photoView, {
    
34.         // loop: false, //循环
    
35.         // fullscreenEl: true, //全屏
    
36.         // arrowEl: true, //左右按钮
    
37.     })
    
38.     Vue.use(videoPlayer)
    
39. }
    
40. 
    
41. export default install

复制代码

Electron 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。

https://electronjs.org/

https://electron.org.cn/vue/index.html

https://github.com/SimulatedGREG/electron-vue

electron 主进程创建窗体

通过 electron 里的 BrowserWindow 对象创建和控制浏览器窗口

1. import { BrowserWindow, app, ipcMain, Tray, Menu } from 'electron'
   
2. 
   
3. // 引入主线程公共配置
   
4. import Common from './utils/common'
   
5. 
   
6. /**
   
7. * Set `__static` path to static files in production
   
8. * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
   
9. */
   
10. if (process.env.NODE_ENV !== 'development') {
    
11.   global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    
12. }
    
13. 
    
14. let mainWin
    
15. let tray
    
16. let forceQuit = false
    
17. let logined = false
    
18. 
    
19. /**
    
20. * 创建主窗口
    
21. */
    
22. function createMainWin() {
    
23.   mainWin = new BrowserWindow({
    
24.     // 背景颜色
    
25.     // backgroundColor: '#ebebeb',
    
26.     width: Common.WIN_SIZE_MAIN.width,
    
27.     height: Common.WIN_SIZE_MAIN.height,
    
28.     title: Common.WIN_TITLE,
    
29.     useContentSize: true,
    
30.     autoHideMenuBar: true,
    
31.     // 无边框窗口
    
32.     frame: false,
    
33.     resizable: true,
    
34.     // 窗口创建的时候是否显示. 默认值为true
    
35.     show: false,
    
36.     webPreferences: {
    
37.       // devTools: false,
    
38.       webSecurity: false
    
39.     }
    
40.   })
    
41. 
    
42.   mainWin.setMenu(null)
    
43.   mainWin.loadURL(Common.WIN_LOAD_URL())
    
44. 
    
45.   mainWin.once('ready-to-show', () => {
    
46.     mainWin.show()
    
47.     mainWin.focus()
    
48.   })
    
49. 
    
50.   // 判断最小化到系统托盘
    
51.   mainWin.on('close', (e) => {
    
52.     if(logined && !forceQuit) {
    
53.       e.preventDefault()
    
54.       mainWin.hide()
    
55.     }else {
    
56.       mainWin = null
    
57.       app.quit()
    
58.     }
    
59.   })
    
60. 
    
61.   initialIPC()
    
62. }
    
63. 
    
64. app.on('ready', createMainWin)
    
65. 
    
66. app.on('activate', () => {
    
67.   if(mainWin === null) {
    
68.     createMainWin()
    
69.   }
    
70. })
    
71. 
    
72. app.on('before-quit', () => {
    
73.   forceQuit = true
    
74. })
    
75. 
    
76. app.on('window-all-closed', () => {
    
77.   if(process.platform !== 'darwin') {
    
78.     app.quit()
    
79.   }
    
80. })
    
81. 
    
82. ...

复制代码

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.     // 托盘点击事件
    
45.     tray.on('click', () => {
    
46.       if(mainWin.isMinimized()) mainWin.restore()
    
47.       mainWin.show()
    
48.       mainWin.focus()
    
49. 
    
50.       this.flashTray(false)
    
51.     })
    
52.   },
    
53.   // 托盘图标闪烁
    
54.   flashTray(bool) {
    
55.     let hasIco = false
    
56. 
    
57.     if(bool) {
    
58.       if(flashTrayTimer) return
    
59.       flashTrayTimer = setInterval(() => {
    
60.         tray.setImage(hasIco ? trayIco1 : trayIco2)
    
61.         hasIco = !hasIco
    
62.       }, 500)
    
63.     }else {
    
64.       if(flashTrayTimer) {
    
65.         clearInterval(flashTrayTimer)
    
66.         flashTrayTimer = null
    
67.       }
    
68. 
    
69.       tray.setImage(trayIco1)
    
70.     }
    
71.   },
    
72.   // 销毁托盘图标
    
73.   destroyTray() {
    
74.     this.flashTray(false)
    
75.     tray.destroy()
    
76.     tray = null
    
77.   }
    
78. }

复制代码

◆ electron自定义最大/小化、关闭按钮、无外框窗口

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

1.     methods: {
   
2. 
   
3.         // 置顶窗口
   
4.         handleFixTop() {
   
5.             this.isAlwaysOnTop = !this.isAlwaysOnTop
   
6.             currentWin.setAlwaysOnTop(this.isAlwaysOnTop)
   
7.         },
   
8. 
   
9.         // 最小化
   
10.         handleMin() {
    
11.             currentWin.minimize()
    
12.         },
    
13. 
    
14.         // 最大化
    
15.         handleMax() {
    
16.             if(!currentWin.isMaximizable()) return
    
17.             if(currentWin.isMaximized()) {
    
18.                 currentWin.unmaximize()
    
19.                 this.SET_WINMAXIMIZE(false)
    
20.             }else {
    
21.                 currentWin.maximize()
    
22.                 this.SET_WINMAXIMIZE(true)
    
23.             }
    
24.         },
    
25. 
    
26.     }
    
27. }

复制代码

项目中使用的css属性设置-webkit-app-region: drag 进行局部拖动

注意：默认设置-webkit-app-region: drag后，下面的元素不能点击操作，可通过设置需点击元素no-drag即可。


electron图文聊天编辑器光标处插入表情+截图dll

vue electron 中设置 div 可编辑 contenteditable="true" 自定义双向绑定 v-model

electron-vue 仿微信聊天编辑器|表情|截图功能分享

好了，运用 electron 开发客户端聊天项目就介绍到这里，后续继续分享实例项目。

最后附上：taro+react 多端聊天室|taro 仿微信界面

wytongcxf

神仙66666

gcy777

人傻了啊。2222222

gcy777

厉害，66666666666666666666666666666666666666