electron+vue 仿微信客戶端聊天|electron 仿微信介面|electron 聊天例項

採用 electron+vue+electron-vue+vuex+Node+electron-builder 等技術開發的高仿微信電腦端IM聊天ElectronVchat專案例項。實現了編輯器游標處插入訊息/表情、圖片/視訊預覽、拖拽功能/截圖貼上傳送、朋友圈/紅包/換膚等功能。

• 組合技術：electron + electron-vue + vue
• 狀態管理：Vuex
• 地址路由：Vue-router
• 字型圖示：阿里iconfont字型圖示庫
• 彈窗外掛：wcPop
• 打包工具：electron-builder
• 圖片預覽：vue-photo-preview
• 視訊元件：vue-video-player

electron 是用 HTML,CSS 和 JavaScript 來構建跨平臺桌面應用程式的一個開源庫。electron-vue就是基於vue腳手架vue-cli和electron結合來把你的vue專案轉化為桌面專案

官網：https://electronjs.org/

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

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

electron-vue構建專案後，src目錄下有main、renderer兩個資料夾，分別對應主執行緒和渲染執行緒頁面，主程式入口頁面 src/main/index.js

/**
 * @Desc   主執行緒  Create by andy on 2019/12/26
 * @about   Q：282310962  wx：xy190310
 */

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建立系統托盤圖示+新訊息閃爍

/**
 * 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無邊框效果、自定義頂部欄

在BrowserWindow物件中配置frame:false後，就進入無邊框窗體模式

設定 css -webkit-app-region: drag; 就能實現區域性拖動效果

methods: {
    ...mapMutations(['SET_WINMAXIMIZE']),

    // 置頂視窗
    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)
        }
    },

    // 關閉
    handleQuit() {
        currentWin.close()
    }
}

注意：預設設定-webkit-app-region: drag 後，下面的元素不能點選操作，可通過設定需點選元素 no-drag 即可

思路：在vue頁面設定div可編輯contenteditable="true" 自定義雙向繫結v-model ，獲取當前游標位置並插入表情。

由於之前有過一篇分享專門介紹如何在electron+vue中實現編輯器插入富文字圖文
electron-vue 仿微信圖文編輯器|截圖功能分享

到這裡基於electron+vue開發仿微信pc桌面聊天專案就介紹完了，希望喜歡！！??

Taro聊天室|react+taro仿微信聊天App介面|taro聊天例項

基於vue+uniapp直播專案|uni-app仿抖音/陌陌直播室

本作品採用《CC 協議》，轉載必須註明作者和本文連結