NuxtChatIM聊天室 是基于
nuxt.js+vue+vuex+node+vant等技术开发的移动端仿微信App界面模板实例项目。实现了消息/表情发送、图片/视频预览、红包/朋友圈等功能。
技术框架
- 使用技术：nuxt.js+vue.js+vuex
- UI组件库：vant: ^2.10.4
- iconfont图标：阿里字体图标库
- 弹窗组件：vpopup（基于vue封装自定义弹框）
- 本地存储：cookie-universal-nuxt: ^2.1.4
快速了解Nuxt.js
Nuxt.js是一个基于Vue.js 构建的服务端渲染框架。预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。例如异步数据加载、中间件支持、布局支持等。
如果大家想要了解更多详细资料，可以去查看官方文档。
自定义顶部导航+Tabbar组件
项目中顶部导航条/底部tabbar组件及所有的弹框功能都是基于vue自定义组件实现。
鉴于之前有过相关分享文章，这里就不多介绍了哈~
vue自定义导航Topbar+Tabbar组件
vue.js自定义Popup弹出层组件|仿ios弹框
模仿探探|Tinder翻牌拖拽
“翻一翻”页面仿制了类似探探卡片堆叠滑动功能。实现了拖拽滑动及点击下方按钮切换卡牌。
具体的实现过程，这里不作过多介绍，感兴趣的可以去看看下面这篇文章。
vue/nuxt仿探探堆叠卡片拖拽效果
nuxt配置介绍
默认布局模板
<!-- 布局模板 -->
<template>
<div class="nuxt__container flexbox flex-col">
<header-bar />
<div class="nuxt__scrollview scrolling flex1"><nuxt /></div>
<tab-bar />
</div>
</template>
nuxt.config.js配置
export default {
// 端口配置（可选）
server: {
// port: 3003,
// host: '192.168.111.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的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来实现。不过对于插入表情需要做字符转义处理。项目中使用了div的可编辑属性实现，能够插入图文表情。
<!-- //聊天编辑器模板 -->
<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>
好了，基于Nuxt+Vue实现微信聊天界面实例就分享到这里。希望对大家有些帮助！
Flutter聊天室|dart+flutter仿微信App界面|flutter聊天实例
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处！