Nuxt聊天室|vue+nuxt仿微信/探探App界面|nuxt.js聊天實體-有解無憂

一、專案介紹

nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技術構建開發的仿微信|探探App界面社交聊天室專案，實作了卡片式翻牌滑動、訊息發送/emoj表情、圖片/視頻預覽、下拉重繪訊息、紅包/朋友圈等功能，

預覽片段

一、技術堆疊

編碼/技術：Vscode + NuxtJs/Vue/Vuex
UI組件庫：Vant (有贊移動端vue組件庫)
字體圖示：阿里iconfont圖示庫
彈窗組件：VPopup（基于vue封裝自定義彈框）
本地存盤：cookie-universal-nuxt: ^2.1.4

◆ 目錄結構

◆ vue/nuxt自定義導航條+Tabbar標簽欄

專案中頂部Navbar / 底部Tabbar均是自定義組件，大家可以去參閱之前的一篇分享文章，

https://www.cnblogs.com/xiaoyan2017/p/13791980.html

◆ vue/nuxt自定義彈框組件

原本是想使用vant的彈窗功能，后來考慮再三決定自己造了一個Vue彈框組件VPopup，

vpopup匯合了vant組件庫中的Msg資訊框、Popup彈出層、Notify通知資訊、Dialog對話框、Toast輕提示框、ActionSheet影片面板框等功能，結合多種影片，支持android/ios彈窗型別及長按彈窗，

感興趣的話可以去看下這篇分享文章，

https://www.cnblogs.com/xiaoyan2017/p/13776977.html

◆ vue/nuxt仿探探卡牌滑動

翻一翻頁面原型參考的是探探/Tinder卡片式滑動功能，頁面整體布局分為下面三個部分，

這里不作過多介紹，至于具體實作程序，大家可以去看之前的一篇分享文章，

https://www.cnblogs.com/xiaoyan2017/p/13801560.html

◆ nuxt頁面布局

在nuxt專案中，默認布局是layouts目錄下的default.vue頁面，vue專案中是通過<router-view />顯示主體內容，而在nuxt專案中則是<nuxt />來顯示，

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

大家也可以根據需要自定義布局頁面，如：layouts/editor.vue，在相應的頁面引入模塊即可，

<template>
  <!-- ... -->
</template>
<script>
    export default {
        layout: 'editor',
        // ...
    }
</script>

◆ nuxt.config.js配置

nuxt默認的組態檔，詳細的配置引數大家可以自行去官網查看，

https://zh.nuxtjs.org/guide/configuration/

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

大家如果想要頁面具備SEO功能，可以在nuxt.config.js中全域配置meta內容，也可以在每個頁面單獨自定義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>

◆ nuxt聊天模塊

聊天編輯器部分單獨抽離了一個組件chatEditor.vue，使用了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專案中如何獲取上傳視頻的封面？我想很多同學都困擾這個問題吧！

網上也有很多的解決方案，不過會使得截圖出現黑屏/白屏情況，后面經過反復測驗，終于有了一種實作方法，內測可用，

// 選擇視頻
handleChooseVideo() {
    //...

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

有興趣的話也可以去試一試，如果大家有其它好的方法，歡迎留言討論！

Okey，基于Nuxt.js+Vue開發仿微信聊天實體就分享到這里，希望大家能喜歡哈~~ ????

最后附上一個uni-app+vue聊天實體專案

https://www.cnblogs.com/xiaoyan2017/p/11835641.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/172588.html

標籤：HTML5

上一篇：四款 5G 版 iPhone 12 齊發，支持北斗系統，你準備好了嗎？

下一篇：ES6、Vue指令、計算屬性、系結Class和Style、條件渲染、串列渲染、表單輸入系結(雙向資料系結)