electron聊天室|vue+electron-vue仿微信客戶端|electron桌面聊天

来源:https://www.cnblogs.com/xiaoyan2017/archive/2020/01/09/12169391.html
-Advertisement-
Play Games

一、項目概況 基於Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技術仿製微信電腦端界面聊天室實例，實現消息發送/動態表情，圖片/視頻預覽，拖拽圖片/粘貼截圖發送，朋友圈/紅包/換膚等功能。 二、效果圖 三、 ...


一、項目概況

基於Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技術仿製微信電腦端界面聊天室實例，實現消息發送/動態表情，圖片/視頻預覽，拖拽圖片/粘貼截圖發送，朋友圈/紅包/換膚等功能。

二、效果圖

三、技術棧

  • 框架技術：electron + electron-vue + vue
  • 狀態管理：Vuex
  • 地址路由：Vue-router
  • 字體圖標：阿裡iconfont字體圖標庫
  • 彈窗插件：wcPop
  • 打包工具：electron-builder
  • 環境配置：Node.js + Chromium
  • 圖片預覽：vue-photo-preview
  • 視頻組件：vue-video-player

 

如何配置開發環境及使用electron-vue，這裡不作多介紹，可查閱官網及搜資料

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

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

註意：由於electron-vue作者長時間未更新，裡面electron版本v2.0.4太舊，如遇問題，可升級到最新版本

◆ Electron主進程index.js

通過BrowserWindow創建和控制瀏覽器視窗，官網有詳細介紹，這裡略過...

https://electronjs.org/docs/api/browser-window

...

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()
    apptray.createTray()
}

app.on('ready', createMainWin)

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

...

如上圖：創建托盤圖標及閃爍效果

/**
 * 托盤圖標事件
 */
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(flash) {
    let hasIco = false

    if(flash) {
      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
  }
}

◆ 渲染進程主頁面main.js及app.vue

/**
 * @Desc   主入口main.js
 * @about  Q：282310962  wx：xy190310
 */

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

// 引入組件配置
import $components from './components'
Vue.use($components)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios


/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')
<template>
  <div id="app">
    <div class="elv-container" :style="$store.state.winSkin && {'background-image': 'url('+$store.state.winSkin+')'}">
      <div class="elv-wrapper flexbox">
        <!-- //側邊欄 -->
        <side-bar v-if="!$route.meta.hideSideBar" />

        <!-- //主佈局 -->
        <div class="elv-mainbx flex1 flexbox flex-col">
          <!-- ...頂部按鈕 -->
          <win-bar />
          
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

至於狀態管理及路由配置基本和vue裡面使用一樣，這裡也略過...

◆ electron自定義最大/小化、關閉按鈕、無邊框視窗拖動

配置BrowserWindow裡面frame:false就會是無邊框視窗，這時就可以自定義最大/小，關閉按鈕，那麼問題來了，無邊框視窗如何進行拖動尼？

  • 1、通過mousedown、mousemove等事件處理
  • 2、設置需要拖動區css屬性 -webkit-app-region
.elv__drag{-webkit-app-region: drag; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.elv__nodrag{-webkit-app-region: no-drag;}

註意：預設設置-webkit-app-region: drag後，下麵的元素不能點擊操作，可通過設置需點擊元素no-drag即可。

import { app, remote, ipcRenderer } from 'electron'
import { mapState, mapMutations } from 'vuex'

let currentWin = remote.getCurrentWindow()

export default {
    props: {
        title: String,
    },
    data () {
        return {// 是否置頂
            isAlwaysOnTop: false,
            // 視窗是否可以最小化
            isMinimizable: true,
            // 視窗是否可以最大化
            isMaximizable: true,
        }
    },
    computed: {
        ...mapState(['isWinMaxed'])
    },
    mounted() {if(!currentWin.isMinimizable()) {
            this.isMinimizable = false
        }
        if(!currentWin.isMaximizable()) {
            this.isMaximizable = false
        }
        if(this.isWinMaxed && currentWin.isMaximizable()) {
            currentWin.maximize()
        }

        // 監聽是否最大化
        currentWin.on('maximize', () => {
            this.SET_WINMAXIMIZE(true)
        })
        currentWin.on('unmaximize', () => {
            this.SET_WINMAXIMIZE(false)
        })
    },
    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()
        }
    }
}

◆ 聊天編輯器游標處插入表情、div可編輯contenteditable="true"雙向綁定

如何實現electron vue中向編輯框contenteditable游標處插入動態表情，類似QQ、微信聊天編輯器？？

  • 1、使用input、textarea文本框實現

通過給input或textarea文本框插入[奮鬥]、(:17 等表情符標簽，展示信息的時候解析標簽就行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col col-sm-12">
                    <button class="btn btn-success" data-emoj="[笑臉]">[笑臉]</button>
                    <button class="btn btn-success" data-emoj="[奮鬥]">[奮鬥]</button>
                    <button class="btn btn-success" data-emoj="[:17]">[:17]</button>
                </div>
                <div class="col col-sm-12">
                    <textarea class="form-control" id="content" rows="10"></textarea>
                </div>
            </div>
        </div>
     
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            (function ($) {
                $.fn.extend({
                    insertEmojAtCaret: function (myValue) {
                        var $t = $(this)[0];
                        if (document.selection) {
                            this.focus();
                            sel = document.selection.createRange();
                            sel.text = myValue;
                            this.focus();
                        } else if ($t.selectionStart || $t.selectionStart == '0') {
                            var startPos = $t.selectionStart;
                            var endPos = $t.selectionEnd;
                            var scrollTop = $t.scrollTop;
                            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                            this.focus();
                            $t.selectionStart = startPos + myValue.length;
                            $t.selectionEnd = startPos + myValue.length;
                            $t.scrollTop = scrollTop;
                        } else {
                            this.value += myValue;
                            this.focus();
                        }
                    }
                });
            })(jQuery);
                 
            $("button").on("click", function() {
                $("#content").insertEmojAtCaret($(this).attr("data-emoj"));
            });
        </script>
    </body>
</html>
  • 2、運用h5中div可編輯contenteditable="true"實現

在vue頁面設置contenteditable="true" 實現富文本文本框效果，由於div不能綁定v-model，只能使用vue提供的自定義組件v-model功能。

https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

思路：新建一個chatInputEdit.vue組件，通過監聽數據變化返回父組件數據

1)：調用chatInputEdit.vue組件，並給其綁定v-model

<template>
    ...
    <chatInputEdit ref="chatInput" v-model="editorText" />
</template>

...

export default {
    data () {
        return {
            editorText: '',
            
            ...
        }
    },
    ...
}

2)：v-model中傳入的值在子組件prop中獲取並監聽value變化

export default {
    props: {
        value: { type: String, default: '' }
    },
    data () {
        return {
            editorText: this.value,
            ...
        }
    },
    watch: {
        value() {
            ...
        }
    },
}

3)：監聽獲取到的值賦值給子組件中的v-html參數，就打通雙向綁定鏈路了

/**
 * contenteditable游標處插入內容
 */
insertHtmlAtCaret(html) {
    let sel, range;
    if(!this.$refs.editor.childNodes.length) {
        this.$refs.editor.focus()
    }
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();

        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            let el = document.createElement("div");
            el.appendChild(html)
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

◆ electron+vue實現微信截圖功能

Node中通過的execFile方法執行exe文件，exe調用同級目錄下的微信截圖dll，調出截圖工具

handleCaptureScreen() {
    return new Promise((resolve) => {
        const { execFile } = require('child_process')
        var screenWin = execFile('./static/PrintScr.exe')
        screenWin.on('exit', function(code) {
            let pngs = require('electron').clipboard.readImage().toPNG()
            let imgData = new Buffer.from(pngs, 'base64')
            let imgs = 'data:image/png;base64,' + btoa(new Uint8Array(imgData).reduce((data, byte) => data + String.fromCharCode(byte), ''))
            resolve(imgs)
        })
    })
},

Okay。以上就是基於electron+vue開發仿微信客戶端聊天實例分享，希望能有些幫助！！

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類