项目概况

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

通过BrowserWindow创建和控制浏览器窗口，官网有详细介绍，这里略过...

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、设置需要拖动区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

如何实现electron vue中向编辑框contenteditable光标处插入动态表情，类似QQ、微信聊天编辑器？？

• 1、使用input、textarea文本框实现

通过给input或textarea文本框插入[奋斗]、(:17 等表情符标签，展示信息的时候解析标签就行

• 2、运用h5中div可编辑contenteditable="true"实现

/** 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)

        })

    })

},

Olle，以上就是基于electron+vue开发仿微信桌面端聊天实例分享，希望能有些帮助！！💪💪