一、項目簡述
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標簽欄
項目中頂部headerBar / 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); }) },
感興趣的話也可以去試一試。如果大家有其它好的方法，歡迎留言討論！
好了，基於Nuxt.js+Vue開發仿微信界面聊天實例就分享到這里。希望對大家有所幫助哈~~ 💪🙃
最后附上一個uniapp+vue聊天實例項目
https://www.cnblogs.com/xiaoyan2017/p/11835641.html
