基於Nuxt.js+Vue聊天實例|nuxt仿微信/探探聊天界面

一、項目簡介

Nuxt.js是目前比較熱門的服務端渲染SSR框架。憑藉其更好的SEO、更快的內容到達時間(*首屏渲染速度快*) 加之基於Vue.js技術開發，更易於上手，得到了不少技術開發者的青睞。
nuxt_chatroom項目是基於nuxt+vue+vuex+vant等技術開發的仿微信|Tinder界面聊天實例。實現了卡片式翻動、消息發送/表情gif、圖片/視頻預覽、紅包/朋友圈等功能。

效果片斷

嘖嘖，效果還能夠吧，下面就來說解下實現過程。

二、技術框架

• 使用技術：nuxt.js+vue.js+vuex
• UI組件庫：vant-ui (有贊移動端vue.js組件庫)
• 字體圖標：阿里iconfont圖標庫
• 彈窗組件：vpopup（基於vue自定義彈框）
• 本地存儲：cookie-universal-nuxt: ^2.1.4

你們若是對Nuxt.js不熟悉的話，能夠先去官網看看資料。其實只要你會vue，上手就很是簡單的。

https://zh.nuxtjs.org/
https://github.com/nuxt/nuxt.js

三、項目目錄結構

想了解更多Nuxt.js目錄結構及使用說明，能夠去參看下面連接。
https://zh.nuxtjs.org/guide/d...

四、關於自定義組件

項目中 頂部Navbar、Tabbar及彈窗 均是自定義組件實現的，這裏不做過多講解，感興趣的能夠去看看下面的分享文章。



Nuxt/Vue仿鹹魚Tabbar凸起效果|vue自定義導航欄
Vue自定義彈框組件|仿android/ios彈窗效果

五、仿Tinder|探探卡牌翻動

碰見頁面原型參考了社交App探探的卡片滑動效果。總體分爲 頂部導航、滑動區、底部標籤欄 等三個部分。

這裏不過多介紹，感興趣的能夠去看下面的這篇分享文章。
Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder

六、nuxt默認佈局

nuxt項目中，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 />來顯示主體內容的，而vue中則是使用<router-view />。

nuxt.config.js配置文件
nuxt.js的默認配置文件，能夠配置 meta、路由信息、css/js及插件引入、webpack等配置。
https://zh.nuxtjs.org/guide/configuration/

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

nuxt.config.js中的meta是全局配置的，若是單獨頁面配置，參考以下：

<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聊天模塊

一開始考慮聊天模塊的編輯框使用input或textarea實現。但是文本框中只能插入emoj字符 (:32 :微笑:)，不能插入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>

通過一系列處理，編輯器支持多行文本輸入、光標處插入emoj表情等功能。

以下圖：在vue.js項目中如何獲取上傳視頻的第一幀做爲封面圖？

網上的不少的解決方案，會使截圖出現黑屏狀況。後來通過反覆調試，終於實現了這個效果。

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);
})

你們有興趣的話，能夠本身去弄一弄試試哈。若是有其它好的方法，歡迎交流討論！

OK，基於Nuxt.js仿微信聊天室項目就分享到這裏。但願對你們有些幫助！✍💪

最後附上個Flutter項目實例
flutter+dart聊天室|flutter仿微信App聊天界面|flutter聊天實例