項目概況

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

技術棧

• 框架技術：electron + electron-vue + vue

• 狀態(tài)管理：Vuex

• 地址路由：Vue-router

• 字體圖標：阿里iconfont字體圖標庫

• 彈窗插件：wcPop

• 打包工具：electron-builder

• 環(huán)境配置：Node.js +?Chromium

• 圖片預覽：vue-photo-preview

• 視頻組件：vue-video-player

如何配置開發(fā)環(huán)境及使用electron-vue，這里不作多介紹，可查閱官網(wǎng)及搜資料

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

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

通過BrowserWindow創(chuàng)建和控制瀏覽器窗口，官網(wǎng)有詳細介紹，這里略過...

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

主模板App.vue

<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>

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

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

• 1、通過mousedown、mousemove等事件處理

• 2、設置需要拖動區(qū)css屬性 -webkit-app-region

.elv__drag{-webkit-app-region: drag; -webkit-user-select:none; -moz-user-select:none; user-select:none;}

.elv__nodrag{-webkit-app-region: no-drag;}

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

詳細介紹可參看：https://www.cnblogs.com/xiaoyan2017/p/12169391.html

如何實現(xiàn)electron vue中向編輯框contenteditable光標處插入動態(tài)表情，類似QQ、微信聊天編輯器？？

• 1、使用input、textarea文本框實現(xiàn)

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

• 2、運用h5中div可編輯contenteditable="true"實現(xiàn)

/**?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實現(xiàn)微信截圖功能

Node中通過的execFile方法執(zhí)行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)

? ? ? ? })

? ? })

},

Olle，以上就是基于electron+vue開發(fā)仿微信桌面端聊天實例分享，希望能有些幫助！！????