欢迎光临
我的个人博客网站

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例


一、项目介绍

nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目。实现了卡片式翻牌滑动、消息发送/emoj表情、图片/视频预览、下拉刷新消息、红包/朋友圈等功能。

预览片段

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

一、技术栈

  • 编码/技术:Vscode + NuxtJs/Vue/Vuex
  • UI组件库:Vant (有赞移动端vue组件库)
  • 字体图标:阿里iconfont图标库
  • 弹窗组件:VPopup(基于vue封装自定义弹框)
  • 本地存储:cookie-universal-nuxt: ^2.1.4

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

◆ 目录结构

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

◆ vue/nuxt自定义导航条+Tabbar标签栏

项目中顶部Navbar / 底部Tabbar均是自定义组件。大家可以去参阅之前的一篇分享文章。

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

 

 

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

https://www.cnblogs.com/xiaoyan2017/p/13791980.html

◆ vue/nuxt自定义弹框组件

原本是想使用vant的弹窗功能,后来考虑再三决定自己造了一个Vue弹框组件VPopup。

vpopup汇合了vant组件库中的Msg信息框、Popup弹出层、Notify通知信息、Dialog对话框、Toast轻提示框、ActionSheet动画面板框等功能。结合多种动画,支持android/ios弹窗类型及长按弹窗。

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

感兴趣的话可以去看下这篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/13776977.html

◆ vue/nuxt仿探探卡牌滑动

翻一翻页面原型参考的是探探/Tinder卡片式滑动功能。页面整体布局分为下面三个部分。

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

这里不作过多介绍,至于具体实现过程,大家可以去看之前的一篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/13801560.html

◆ nuxt页面布局

在nuxt项目中,默认布局是layouts目录下的default.vue页面。vue项目中是通过<router-view />显示主体内容,而在nuxt项目中则是<nuxt />来显示。

<!-- 默认布局 --> <template>   <div class="nuxt__container flexbox flex-col">     <header-bar />     <div class="nuxt__scrollview scrolling flex1"><nuxt /></div>     <tab-bar />   </div> </template>

大家也可以根据需要自定义布局页面,如:layouts/editor.vue,在相应的页面引入模块即可。

<template>   <!-- ... --> </template> <script>     export default {         layout: 'editor',         // ...     } </script>

◆ nuxt.config.js配置

nuxt默认的配置文件,详细的配置参数大家可以自行去官网查看。

https://zh.nuxtjs.org/guide/configuration/

export default {   // 端口配置(可选)   server: {     port: 3000,     host: '192.168.101.69'   },   /*   ** 页面头部meta信息配置   */   head: {     title: process.env.npm_package_name || '',     meta: [       { charset: 'utf-8' },       { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },       { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'},       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }     ],     link: [       { 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',     // 通过这种方式引入本地js也可以(需设置ssr:false)     // {src: '~/assets/js/fontSize.js', ssr: false}   ],   // ... }

大家如果想要页面具备SEO功能,可以在nuxt.config.js中全局配置meta内容。也可以在每个页面单独自定义SEO信息。

<script> export default {     // 用于配置页面的 meta 信息     head() {         return {             title: '这里是标题信息 - 标题信息',             meta: [                 {name:'keywords',hid: 'keywords',content: '关键字1 | 关键字2 | 关键字3'},                 {name:'description',hid:'description',content: '描述1 | 描述2 | 描述3'}             ]         }     },     // 自定义布局模板     layout: 'xxx.vue',     // 中间件验证     middleware: 'auth',     // 异步数据处理     async asyncData({app, params, query, store}) {         let uid = params.uid         let cid = query.cid         return {             uid: uid,             cid: cid,         }     },     // ... } </script>

◆ nuxt聊天模块

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

聊天编辑器部分单独抽离了一个组件chatEditor.vue。使用了div的可编辑功能contenteditable来插入图文内容。

<template>     <div         ref="editor"         class="editor"         contentEditable="true"         v-html="editorText"         @click="handleClick"         @input="handleInput"         @focus="handleFocus"         @blur="handleBlur"         style="user-select:text;-webkit-user-select:text;">     </div> </template>

聊天编辑器支持多行文本输入、光标处插入emoj表情、删除光标处信息等功能。

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

在vue项目中如何获取上传视频的封面?我想很多同学都困扰这个问题吧!

网上也有很多的解决方案,不过会使得截图出现黑屏/白屏情况。后面经过反复测试,终于有了一种实现方法,内测可用。

// 选择视频 handleChooseVideo() {     //...      let file = this.$refs.chooseVideo.files[0]     if(!file) return     let size = Math.floor(file.size / 1024)     if(size > 3*1024) {         alert('请选择3MB以内的视频')         return false     }     // 获取视频地址     let videoUrl     if(window.createObjectURL != undefined) {         videoUrl = window.createObjectURL(file)     } else if (window.URL != undefined) {         videoUrl = window.URL.createObjectURL(file)     } else if (window.webkitURL != undefined) {         videoUrl = window.webkitURL.createObjectURL(file)     }      let $video = document.createElement('video')     $video.src = videoUrl     // 防止移动端封面黑屏或透明白屏     $video.play()     $video.muted = true     $video.addEventListener('timeupdate', () => {         if($video.currentTime > .1) {             $video.pause()         }     })     // 截取视频第一帧作为封面     $video.addEventListener('loadeddata', function() {         setTimeout(() => {             var canvas = document.createElement('canvas')             canvas.width = $video.videoWidth * .8             canvas.height = $video.videoHeight * .8             canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height)             let videoThumb = canvas.toDataURL('image/png')             console.log(videoThumb)         }, 16);     }) },

有兴趣的话也可以去试一试。如果大家有其它好的方法,欢迎留言讨论!

Okey,基于Nuxt.js+Vue开发仿微信聊天实例就分享到这里。希望大家能喜欢哈~~ 💪🙃

最后附上一个uni-app+vue聊天实例项目

https://www.cnblogs.com/xiaoyan2017/p/11835641.html

Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天实例
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏