项目介绍:
使用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
- /**
- * @Desc 公共及全局组件配置
- * @about Q:282310962 wx:xy190310
- */
- // 引入公共组件
- import winBar from './components/winbar'
- import sideBar from './components/sidebar'
- // 引入公共样式
- import './assets/fonts/iconfont.css'
- import './assets/css/reset.css'
- import './assets/css/layout.css'
- // 引入弹窗wcPop
- import wcPop from './assets/js/wcPop/wcPop'
- import './assets/js/wcPop/skin/wcPop.css'
- // 引入图片预览组件vue-photo-preview
- import photoView from 'vue-photo-preview'
- import 'vue-photo-preview/dist/skin.css'
- // 引入视频播放组件vue-video-player
- import videoPlayer from 'vue-video-player'
- import 'video.js/dist/video-js.css'
- const install = Vue => {
- // 注册组件
- Vue.component('win-bar', winBar)
- Vue.component('side-bar', sideBar)
- // 应用实例
- Vue.use(photoView, {
- // loop: false, //循环
- // fullscreenEl: true, //全屏
- // arrowEl: true, //左右按钮
- })
- Vue.use(videoPlayer)
- }
- export default install
复制代码
Electron 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 electron 主进程创建窗体通过 electron 里的 BrowserWindow 对象创建和控制浏览器窗口
- import { BrowserWindow, app, ipcMain, Tray, Menu } from 'electron'
- // 引入主线程公共配置
- import Common from './utils/common'
- /**
- * Set `__static` path to static files in production
- * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
- */
- 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自定义最大/小化、关闭按钮、无外框窗口 electron中配置frame: false后,窗口将以无边框展示,原先的顶部操作栏就没有了,需要自定义配置。
- methods: {
- // 置顶窗口
- 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)
- }
- },
- }
- }
复制代码项目中使用的css属性设置-webkit-app-region: drag 进行局部拖动 注意:默认设置-webkit-app-region: drag后,下面的元素不能点击操作,可通过设置需点击元素no-drag即可。
electron图文聊天编辑器光标处插入表情+截图dll
vue electron 中设置 div 可编辑 contenteditable="true" 自定义双向绑定 v-model 好了,运用 electron 开发客户端聊天项目就介绍到这里,后续继续分享实例项目。
|