nuxt.js仿微信App通訊聊天|vue+nuxt聊天|仿微信介面

專案概述

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

大家如果有其它好的辦法，歡迎一起交流討論。
好了，基於NuxtJs+Vue實現聊天介面例項就分享到這裡。希望大家能喜歡哈！✍
最後分享個Flutter例項專案
Flutter+Dart聊天室例項|flutter跨端仿微信介面聊天室

本作品採用《CC 協議》，轉載必須註明作者和本文連結