nuxt+vue仿微信聊天界面|nuxt.js聊天室
原创
项目简介
NuxtChatRoom项目是基于 Nuxt.js+Vue.js+Vuex+Node+Vant 等技术开发的移动端IM聊天实例。基本上实现了类似探探卡片式滑动、消息发送 /表情、图片 /视频预览、红包 /朋友圈等功能。
如上图：消息页面运行效果。emmm，感觉还可以吧。
技术实现
- 编码/技术：vscode | nuxt.js+vue.js+vuex
- UI 组件库：vant (有赞 vue 组件库)
- 字体图标：阿里 iconfont 图标库
- 弹窗组件：vpopup （基于 vue 自定义弹框）
- 本地存储：cookie-universal-nuxt: ^2.1.4
nuxt.js简单介绍
nuxtjs是一个基于vue.js构建的服务端渲染框架。让你的网页也拥有SEO能力。只要是会vue，上手及非常简单了。
github上star高达30K+，说明还是很受开发者欢迎的一个SSR框架。
https://github.com/nuxt/nuxt.js
大家如果想要更详细的了解，可以去官网查阅文档。
项目结构
目录结构如下：Nuxt.js构建的项目，拥有良好的代码分层结构。
https://zh.nuxtjs.org/guide/directory-structure/
自定义组件实现
项目中顶部导航栏、底部标签栏及所有弹窗功能均是自定义组件实现。由于之前有过相关分享文章，这里不叙述了。
https://cloud.tencent.com/developer/article/1711783
https://cloud.tencent.com/developer/article/1709438
nuxt仿制探探卡片滑动
如下图：实现的类似探探卡片左右拖拽滑动功能。页面整体分为 导航条+滑动区+底部Tab 三块。
这里不详细介绍了，感兴趣的可以去看看这篇文章。
https://cloud.tencent.com/developer/article/1713888
聊天消息记录模块
- 消息下拉刷新
下拉刷新功能使用的是vant组件库中的van-pull-refresh组件实现。
<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
<!-- 下拉提示 -->
<template #pulling>
<i class="iconfont icon-down"></i> 下拉即可刷新...
</template>
<!-- 释放提示 -->
<template #loosing>
<i class="iconfont icon-up"></i> 释放立即刷新...
</template>
<!-- ... -->
</van-pull-refresh>- 向左滑动菜单
<van-swipe-cell v-for="(item,index) in recordList" :key="index">
<div class="item nuxt-cell nuxt-cell--clickable">
<!-- ... -->
</div>
<!-- 右侧按钮 -->
<template #right>
<div class="swipe__cell-btns flexbox">
<div class="nuxt__btn nuxt__btn-primary nuxt__btn--square" @click="handleTopMost">置顶</div>
<div class="nuxt__btn nuxt__btn-primary nuxt__btn--square" @click="handleDelete">删除</div>
</div>
</template>
</van-swipe-cell>nuxt配置SEO功能
其实很多开发者使用nuxt框架，很大一部分原因就是看中SEO功能。
我们可以在nuxt.config.js中全局配置meta信息，也可以单独在相应的页面进行配置。配置好keywords和description后，相应的页面就具备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>聊天编辑框模块
项目中聊天编辑框使用的是自定义组件实现。
一开始是使用input或textarea文本框实现，后来发现emoj表情图不能插入到编辑框中，最后就使用了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>大家如果有其它更优的解决方法，欢迎留言讨论。
基于nuxt.js+vue开发仿制微信界面聊天室项目就分享到这里。希望对大家有些帮助哈！🙃 💪
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。