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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
js Math 对象的方法
Sep 01 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
Node.js实现数据推送
Apr 14 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
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
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
关于php中一些字符串总结
2016/05/05 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
微信小程序 教程之WXML
2016/10/18 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
详解a++和++a的区别
2017/08/30 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python复制与引用用法分析
2015/04/08 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python3 flask实现文件上传功能
2020/03/20 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python numpy数组中的复制知识解析
2020/02/03 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
创联软件面试题笔试题
2012/10/07 面试题
预备党员公开承诺书
2014/05/28 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
工作表现证明
2015/06/15 职场文书
学校运动会简讯
2015/07/20 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers