nuxt.js仿微信App通讯聊天|vue+nuxt聊天|仿微信界面

xiaoyan2015 的个人博客 / 117 / 0 / 创建于 3年前 / 更新于 3年前

项目概述

基于vue.js+nuxt.js+vuex+webpack+node+vant等技术开发的仿微信App界面聊天室NuxtChatRoom项目。实现了卡片式拖拽滑动、消息/表情发送、图片/视频预览、红包/朋友圈等功能。

技术选型

实现技术：Vscode / vue.js+nuxt.js+vuex
UI组件库：Vant (有赞移动端vue组件库)
iconfont图标：阿里字体图标库
弹窗组件：VPopup（基于vue封装自定义弹框）
本地存储：cookie-universal-nuxt: ^2.1.4

目录结构

nuxt项目目录结构和vue有些不同。nuxt.js提供了良好的代码分层结构式。具体的目录结构说明可去官网查看文档。
zh.nuxtjs.org/guide/directory-stru...

nuxt自定义组件介绍

项目中顶部Navbar / Tabbar及所有弹窗功能均是自定义组件实现。大家感兴趣的话可以去参阅之前的一篇分享文章。

Nuxt|Vue仿咸鱼Tabbar凸起Tab|vue自定义导航栏
 Vue自定义仿android/ios弹框组件

nuxt仿制探探卡片滑动

如下图：卡片翻动页面参考的是探探/Tinder翻牌功能。采用整屏式设计布局。

至于详细的实现过程，这里就不作介绍了。大家感兴趣的话可以去看看之前的这篇分享文章。
Vue|Nuxt仿探探翻牌拖拽效果

nuxt布局及配置文件

nuxt.js默认布局页面是在layouts目录下的default.vue页面。

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

nuxt配置文件 nuxt.config.js，想要了解详细配置，参考官方文档。
zh.nuxtjs.org/guide/configuration/

export default {
  // 端口配置（可选）
  server: {
    port: 3000,
    //host: '192.168.79.112'
  },
  /*
  ** 页面头部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}
  ],
  // ...
}

.vue单独的页面支持的一些配置参数。

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

聊天记录页面

下拉刷新功能
下拉刷新使用的是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">
    <!-- ... -->

    <!-- 右侧按钮 -->
    <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>

聊天模块实现

开始是使用input或textarea来实现功能。后来发现在文本框中不能插入表情。最后改为使用div的可编辑功能contenteditable来插入图文内容。
其中编辑器模块做成了一个公共组件chatEditor.vue

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