html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面

1、项目简介

Nuxt.js是目前比较热门的服务端渲染SSR框架。凭借其更好的SEO、更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发，更易于上手，获得了很多技术开发者的青睐。

nuxt_chatroom项目是基于nuxt+vue+vuex+vant等技术开发的仿微信|Tinder界面聊天实例。实现了卡片式翻动、消息发送/表情gif、图片/视频预览、红包/朋友圈等功能。

效果片段

啧啧，效果还可以吧，下面就来讲解下实现过程。

2、技术框架使用技术：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

3、项目目录结构

想了解更多Nuxt.js目录结构及使用说明，可以去参看下面链接。

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

4、关于自定义组件

项目中顶部Navbar、Tabbar及弹窗均是自定义组件实现的，这里不作过多讲解，感兴趣的可以去看看下面的分享文章。

Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏

Vue自定义弹框组件|仿android/ios弹窗效果

5、仿Tinder|探探卡牌翻动

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

这里不过多介绍，感兴趣的可以去看下面的这篇分享文章。

Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder

6、nuxt默认布局

nuxt项目中，layouts目录下的default.vue页面为默认的布局页面。

注意：在nuxt项目中是通过来显示主体内容的，而vue中则是使用。

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是全局配置的，如果单独页面配置，参考如下：

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,

}

// ...

}

7、Nuxt聊天模块

一开始考虑聊天模块的编辑框使用input或textarea实现。可是文本框中只能插入emoj字符 (:32 :微笑:)，不能插入emoj图片表情，不是自己想要的效果。

如上图：于是就使用了div的可编辑功能contenteditable来插入图文内容。

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;">

经过一系列处理，编辑器支持多行文本输入、光标处插入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仿微信聊天室项目就分享到这里。希望对大家有些帮助！✍

html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面相关推荐

vue3-tauri-chat：基于tauri聊天实例|tauri仿微信客户端
Vue3.js+Tauri桌面端聊天实例|tauri仿微信/QQ聊天TauriChat. 基于tauri+vite3.x+vue3+element-plus等技术开发客户端仿微信/QQ聊天实战案例.实 ...
flutter图片聊天泡泡_基于 Flutter+Dart 聊天实例 | Flutter 仿微信界面聊天室
1.项目介绍 Flutter是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如阿里闲鱼,美团,腾讯等大公司都有投入相关案例生产使用. flutter_chatroom项 ...
Spring+Netty+Vue 网页版聊天应用，仿微信网页版聊天
1:前言最近在学习网络知识,对于java开发来说,Netty是一个非常重要的框架,无论是为了面试还是日常工作中,如RPC框架Dubbo底层其实是用了Netty, 又或者我们的聊天通信功能,都可能有N ...
基于svelte3+sass仿微信网页版聊天|svelte.js 桌面聊天实例SvelteWebChat
svelte-webchat:基于svelte3+svelteKit仿微信mac网页版聊天实战案例. 采用了最新前端svelte.js框架,基于svelte3+svelteKit+sass+svelt ...
vue+h5仿微信网页版聊天室vueWebChat项目
很早之前就有使用html5技术开发过一个web版仿微信.微博聊天,后来想着用vue技术开发一版,后面由于各种事情,一直没能落定.最近有些空闲就使用vue开发了一个vueWechat聊天室IM项目. 基 ...
php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
js封装毫秒时间戳转换仿微信聊天时间显示格式
js封装毫秒时间戳转换仿微信聊天时间显示格式先把微信的时间显示规则拍上来微信聊天消息时间显示说明 1.当天的消息,以每5分钟为一个跨度的显示时间: 2.消息超过1天.小于1周,显示星期+收发消息的 ...
hapi mysql项目实战路由初始化_用hapi.js mysql和nuxt.js(vue ssr)开发仿简书的博客项目...
前言: 预览: 开始: npm i 把mysql配置好 npm run server or npm run dev 实现功能: 用户: 登录.注册.用户资料修改,详情页面,类似于简书的文章数量.总字数 ...
Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/ ** 具体实现 ** 在 script 标签加载 Hanzi Writer 只需将以下内容放入 ...

html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面

html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面相关推荐

最新文章

热门文章