基于Nuxt.js+Vue聊天实例-nuxt仿微信-探探聊天界面_0

1.项目介绍Nuxt.js是目前流行的服务端渲染SSR框架。凭借其更好的SEO、更快的内容到达时间（*首屏渲染速度*）以及基于Vue.js技术开发，更易于使用，赢得了众多技术开发者的青睐。nuxt_chatroom项目是基于nuxt+vue+vuex+vant等技术开发的类微信Tinder界面聊天实例。实现了翻卡片、消息发送/表情gif、图片/视频预览、红包/朋友圈等功能。效果片段tsktsk，效果还不错，下面说说实现过程。2、技术框架使用技术：nuxt.js+vue.js+vuexUI组件库：vant-ui（有赞移动vue.js组件库）字体图标：阿里iconfont图标库弹窗组件：vpopup（基于vue定制弹框）localstorage:cookie-universal-nuxt:^2.1.4对Nuxt.js不熟悉的可以先去官网看看资料。其实只要会Vue，上手就很简单。https://zh.nuxtjs.org/https://github.com/nuxt/nuxt.js三、项目目录结构如果想了解更多关于Nuxt.js的目录结构和使用说明，可以参考链接以下。https://zh.nuxtjs.org/guide/d...4、关于自定义组件项目中的topNavbar、Tabbar、弹窗都是自定义组件实现的。我不会在这里解释太多。有兴趣的可以去看看下面的分享文章。Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏vue自定义弹出框组件|仿android/ios弹窗效果5、仿Tinder|探探卡片翻页遭遇页原型参考社交应用探探卡片滑动效果。整体分为顶部导航、滑动区域、底部标签栏三部分。这里就不多做介绍了，有兴趣的可以看下面的分享文章。vue|Nuxt.js仿卡片式左右拖动|vue仿Tinder6,nuxt默认布局在nuxt项目中，layouts目录下的default.vue页面为默认布局页面。注意：用于显示nuxt项目中的主要内容，而用于vue。nuxt.config.js配置文件是nuxt.js的默认配置文件，可以配置meta、路由信息、css/js和插件引入、webpack等配置。https://zh.nuxtjs.org/guide/configuration/exportdefault{//端口配置（可选）server:{port:3000,host:'192.168.122.100'},/***页面头部元信息配置*/头：{标题：process.env.npm_package_name||'',meta:[{charset:'utf-8'},{name:'viewport',content:'width=device-width,initial-scale=1,user-scalable=no'},{hid:'关键字'，名称：'关键字'，内容：'Vue.js|Nuxt.js|Nuxt仿微信'},{hid:'description',name:'description',content:process.env.npm_package_description||''}],链接：[{rel:'icon',type:'image/x-icon',href:'/favicon.ico'},{rel:'stylesheet',href:'/js/wcPop/skin/wcPop.css'},],script:[{src:'/js/fontSize.js'},{src:'/js/wcPop/wcPop.js'},]},/***全局css配置*/css:['~/assets/css/reset.css','~/assets/css/layout.css','~/assets/fonts/iconfont.css',],/***全局插件列表*/plugins:['~/plugins/vue-global.js',//passthis也可以这样引入本地js（需要设置ssr:false）//{src:'~/assets/js/fontSize.js',ssr:false}],//...}innuxt.config.jsMeta是全局配置的。如果是单页配置，参考如下：7.在Nuxt聊天模块的开头，编辑框的chat模块考虑使用input或者textarea实现，但是文本框只能插入emoj字符(:32:smile:)，不能插入emoj图片表情，不是你想要的效果。如上图：所以使用div的可编辑函数contenteditable来插入图形内容。编辑器经过一系列处理后，支持多行文字输入、emoj插入等功能光标。如下图所示：vue.js项目中如何获取上传视频的第一帧作为封面图？网上很多解决办法都会让截图出现黑屏。后来经过反复调试，终于实现了这个效果。letfile=this.$refs.chooseVideo.files[0]if(!file)returnletsize=Math.floor(file.size/1024)if(size>3*1024){alert('请选择3MB以内的视频')returnfalse}//获取视频URL)}elseif(window.webkitURL!=undefined){videoUrl=window.webkitURL.createObjectURL(file)}let$video=document.createElement('video')$video.src=videoUrl//防止黑屏或透明白screen$video.play()$video.muted=true$video.addEventListener('timeupdate',()=>{if($video.currentTime>.1){$video.pause()}})//捕获视频的第一帧作为封面8canvas.height=$video.videoHeight*.8canvas.getContext('2d').drawImage($video,0,0,canvas.width,canvas.height)letvideoThumb=canvas.toDataURL('image/png')console.log(videoThumb)},16);})有兴趣的可以自己试试如果还有其他的好的方法，欢迎交流讨论！OK，基于Nuxt.js仿微信聊天室项目，分享到这里。希望对大家有所帮助！