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://nuxtjs.org/

https://zh.nuxtjs.org/

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组件实现。

代码语言：typescript复制

<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>

• 向左滑动菜单

代码语言：javascript复制

<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检索功能了。

代码语言：javascript复制

<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来实现插入图文内容。

代码语言：javascript复制

<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开发仿制微信界面聊天室项目就分享到这里。希望对大家有些帮助哈！