vue+web端仿微信网页版聊天室功能


Posted in Javascript onApril 30, 2019

一、项目介绍

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

二、技术框架

•MVVM框架:Vue2.5.6
•状态管理:Vuex
•页面路由:Vue-router
•iconfont图标:阿里巴巴字体图标库
•自定义滚动条:vue-gemini-scrollbar
•弹窗组件:element-ui(饿了么前端UI库)
•环境配置:node.js + cnpm + webpack
•高德地图:vue-amap
•图片预览:vue-photo-preview

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

vue+web端仿微信网页版聊天室功能

◆ 点击右上角最大化按钮,可以进行全屏切换

vue+web端仿微信网页版聊天室功能

◆ 引入公共及全局组件配置components.js

/*
 引入公共及全局组件配置
*/ 
// 引入侧边栏及联系人
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

◆ 主页面模板

<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文本框实现截图粘贴发送图片:

// 【截图粘贴图片】
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;
    var _tpl = [
     '<li class="me">\
      <div class="content">\
       <p class="author">王梅(Fine)</p>\
       <div class="msg picture"><img class="img__pic" src="'+ _img + '" preview="1" /></div>\
      </div>\
      <a class="avatar" href="/contact/uinfo"><img src="src/assets/img/uimg/u__chat-img11.jpg" /></a>\
     </li>'
    ].join("");
    $("#J__chatMsgList").append(_tpl);
    setTimeout(() => {
     $("#J__geminiScrollbar .gm-scroll-view").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
     $(".fixGeminiscrollHeight").show();
     setTimeout(() => { $(".fixGeminiscrollHeight").hide();}, 300);
    }, 17);
   }
  }
 }
});

◆ 表情处理及视频预览:

// >>> 【表情、动图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);
});
// >>> 【视频预览模块】--------------------------
$("body").on("click", "#J__chatMsgList li .video", function () {
 var _src = $(this).find("img").attr("videoUrl"), _video;
 var videoIdx = wcPop({
  id: 'wc__previewVideo',
  skin: 'fullscreen',
  // content: '<video id="J__videoPreview" width="100%" height="100%" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline preload="auto"></video>',
  content: '<video id="J__videoPreview" width="100%" height="100%" controls="controls" preload="auto"></video>',
  shade: false,
  xclose: true,
  style: 'background: #000;padding-top:48px;',
  anim: 'scaleIn',
  show: function(){
   _video = document.getElementById("J__videoPreview");
   _video.src = _src;
   if (_video.paused) {
    _video.play();
   } else {
    _video.pause();
   }
   // 播放结束
   _video.addEventListener("ended", function(){
    _video.currentTime = 0;
   });
   // 退出全屏
   _video.addEventListener("x5videoexitfullscreen", function(){
    wcPop.close(videoIdx);
   })
  }
 });
});

总结

以上所述是小编给大家介绍的vue+web端仿微信网页版聊天室功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 #Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 #Javascript
详解JS实现系统登录页的登录和验证
Apr 29 #Javascript
实例详解vue中的$root和$parent
Apr 29 #Javascript
微信网页登录逻辑与实现方法
Apr 29 #Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 #Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 #Javascript
You might like
PHP中require和include路径问题详解
2014/12/25 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP goto语句用法实例
2019/08/06 PHP
php获取微信openid方法总结
2019/10/10 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
PyCharm代码格式调整方法
2018/05/23 Python
详解python中@的用法
2019/03/27 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
经管应届生求职信
2013/11/17 职场文书
高校自主招生自荐信
2013/12/09 职场文书
思想品德课教学反思
2014/02/10 职场文书
公证书样本
2014/04/10 职场文书
文案策划求职信
2014/04/14 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis