一、项目简述

基于Vue2.x+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发的仿微信网页web端聊天室，实现了发送消息、表情(动图)，图片、视频预览，右键菜单、截屏、截图可直接粘贴至文本框进行发送。

二、技术框架

• 前端框架：Vue2.5.6

• 状态管理：Vuex

• 页面路由：Vue-router

• iconfont图标：阿里巴巴字体图标库

• 弹窗组件：element-ui（饿了么前端UI库）

• 环境配置：node.js + cnpm + webpack

• 高德地图：vue-amap

• 图片预览：vue-photo-preview

• vue主页面模板 (聊天面板分为侧边栏+内容区+右上角按钮)

<template>

  <div id="app">

    <div class="vChat-wrapper flexbox flex-alignc">

      <div class="vChat-panel" style="background-image: url(src/assets/img/placeholder/vchat__panel-bg01.jpg);">

        <div class="vChat-inner flexbox">

          <!-- //顶部按钮(最大、最小、关闭) -->

          <win-bar></win-bar>

          <!-- //侧边栏 -->

          <side-bar></side-bar>

          <keep-alive>

            <router-view class="flex1 flexbox"></router-view>

          </keep-alive>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {}

  },

  methods: {},

}

</script>

<style>

/* 引入公共样式 */

@import './assets/fonts/iconfont.css';

@import './assets/css/reset.css';

@import './assets/css/layout.css';

</style>

• vue注册组件/引入全局组件|样式

/**

 *  @desc 引入公共及全局组件配置   Q：282310962

 */ 

// 引入侧边栏及联系人

import winBar from './components/winbar'

import sideBar from './components/sidebar'

import recordList from './components/recordList'

import contactList from './components/contact'

// 引入jquery

import $ from 'jquery'

// 引入wcPop弹窗插件

import wcPop from './assets/js/wcPop/wcPop'

import './assets/js/wcPop/skin/wcPop.css'

// 引入饿了么pc端UI库

import elementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

// 引入图片预览插件

import photoPreview from 'vue-photo-preview'

import 'vue-photo-preview/dist/skin.css'

// 引入自定义滚动条插件

import geminiScrollbar from 'vue-gemini-scrollbar'

// 引入加载更多插件

import infiniteLoading from 'vue-infinite-scroll'

// 引入高德地图

import vueAMap from 'vue-amap'

const install = Vue => {

    // 注册组件

    Vue.component('win-bar', winBar)

    Vue.component('side-bar', sideBar)

    Vue.component('record-list', recordList)

    Vue.component('contact-list', contactList)

    // 应用实例

    Vue.use(elementUI)

    Vue.use(photoPreview, {

        loop: false,

        fullscreenEl: true, //是否全屏

        arrowEl: true, //左右按钮

    });

    Vue.use(geminiScrollbar)

    Vue.use(infiniteLoading)

    Vue.use(vueAMap)

    vueAMap.initAMapApiLoader({

        key: "e1dedc6bdd765d46693986ff7ff969f4",

        plugin: [

            "AMap.Autocomplete", //输入提示插件

            "AMap.PlaceSearch", //POI搜索插件

            "AMap.Scale", //右下角缩略图插件 比例尺

            "AMap.OverView", //地图鹰眼插件

            "AMap.ToolBar", //地图工具条

            "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制

            "AMap.PolyEditor", //编辑 折线多，边形

            "AMap.CircleEditor", //圆形编辑器插件

            "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置

        ],

        uiVersion: "1.0"

    });

}

export default install

• vue实现获取截图工具的图片 (通过监听编辑器paste事件获取图片)

document.getElementById('J__wcEditor').addEventListener('paste',function(e){

    var cbd = e.clipboardData;

    var ua = window.navigator.userAgent;

    // 没有数据

    if (!(e.clipboardData && e.clipboardData.items)) {

        return;

    }

    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉

    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&

        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&

        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){

        return;

    }

    for(var i = 0; i < cbd.items.length; i++){

        var item = cbd.items[i];

        console.log(item);

        console.log(item.kind);

        if(item.kind == "file"){

            var blob = item.getAsFile();

            if(blob.size === 0){

                return;

            }

            // 插入图片记录

            var reader = new FileReader();

            reader.readAsDataURL(blob);

            reader.onload = function(){

                var _img = this.result;

                //逻辑部分...

            }

        }

    }

});

• 表情/动图swiper切换处理模块

var emotionSwiper;

function setEmotionSwiper(tmpl) {

    var _tmpl = tmpl ? tmpl : $("#J__emotionFootTab ul li.cur").attr("tmpl");

    $("#J__swiperEmotion .swiper-container").attr("id", _tmpl);

    $("#J__swiperEmotion .swiper-wrapper").html($("." + _tmpl).html());

    emotionSwiper = new Swiper('#' + _tmpl, {

        // loop: true,

        // autoplay: true,

        // 分页器

        pagination: {

            el: '.pagination-emotion', clickable: true,

        },

    });

}

$("body").on("click", "#J__emotionFootTab ul li.swiperTmpl", function () {

    // 先销毁swiper

    emotionSwiper && emotionSwiper.destroy(true, true);

    var _tmpl = $(this).attr("tmpl");

    $(this).addClass("cur").siblings().removeClass("cur");

    setEmotionSwiper(_tmpl);

});

这次的内容就分享到这里，喜欢的话可以点个赞，想要了解更多前端开发实例也可以关注下面公众号。