关于nuxt.js:基于NuxtjsVue聊天实例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 弹窗成果

遇见页面原型参考了社交 App 探探的卡片滑动成果。整体分为 顶部导航、滑动区、底部标签栏 等三个局部。

这里不过多介绍，感兴趣的能够去看上面的这篇分享文章。
Vue|Nuxt.js 仿探探卡片式左右拖拽 |vue 仿 Tinder

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>

一开始思考聊天模块的编辑框应用 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 聊天实例

关于nuxt.js:基于NuxtjsVue聊天实例nuxt仿微信探探聊天界面

1、我的项目简介

2、技术框架

3、我的项目目录构造

4、对于自定义组件

5、仿 Tinder| 探探卡牌翻动

6、nuxt 默认布局

7、Nuxt 聊天模块