Swiper中文论坛

标题: NuxtJs聊天App实例|nuxt+vue仿微信界面 [打印本页]
作者: xiaoyan2015    时间: 2020-10-17 17:00
标题: NuxtJs聊天App实例|nuxt+vue仿微信界面

项目简介
NuxtChatRoom项目是基于nuxt.js+vue+vant等技术开发的手机端App仿微信界面实例，实现编辑器光标处插入表情，图片/视频预览，长按菜单，红包/朋友圈等功能。



技术栈


















vue/nuxt自定义导航+弹框
顶部导航 / 底部标签栏及弹出框是自定义组件实现。可以去参看这篇分享文章。


Vue|Nuxt自定义导航条/底部TabBar组件|vue仿咸鱼凸起Tab


Vue+Nuxt自定义弹窗|vue.js仿微信/ios弹层组件

vue/nuxt实现探探卡片滑动
“遇见”页面功能参考了探探/陌陌卡片拖拽堆叠效果。



如果对实现过程有兴趣的话，可以去看看这篇文章。

Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

nuxt.config.js配置
  1. export default {
  2.   // 端口配置（可选）
  3.   server: {
  4.     port: 3000,
  5.     host: '192.168.101.69'
  6.   },
  7.   /*
  8.   ** 页面头部meta信息配置
  9.   */
  10.   head: {
  11.     title: process.env.npm_package_name || '',
  12.     meta: [
  13.       { charset: 'utf-8' },
  14.       { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
  15.       { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'},
  16.       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
  17.     ],
  18.     link: [
  19.       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  20.       { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' },
  21.     ],
  22.     script: [
  23.       { src: '/js/fontSize.js' },
  24.       { src: '/js/wcPop/wcPop.js' },
  25.     ]
  26.   },
  27.   /*
  28.   ** 全局css配置
  29.   */
  30.   css: [
  31.     '~/assets/css/reset.css',
  32.     '~/assets/css/layout.css',
  33.     '~/assets/fonts/iconfont.css',
  34.   ],
  35.   /*
  36.   ** 全局插件列表
  37.   */
  38.   plugins: [
  39.     '~/plugins/vue-global.js',
  40.     // 通过这种方式引入本地js也可以（需设置ssr:false）
  41.     // {src: '~/assets/js/fontSize.js', ssr: false}
  42.   ],
  43.   // ...
  44. }
复制代码
meta信息可以在nuxt.config.js中全局配置，也可以在单独的.vue页面配置一些选项。
  1. <script>
  2. export default {
  3.     // 用于配置页面的 meta 信息
  4.     head() {
  5.         return {
  6.             title: '这里是标题信息 - 标题信息',
  7.             meta: [
  8.                 {name:'keywords',hid: 'keywords',content: '关键字1 | 关键字2 | 关键字3'},
  9.                 {name:'description',hid:'description',content: '描述1 | 描述2 | 描述3'}
  10.             ]
  11.         }
  12.     },
  13.     // 自定义布局模板
  14.     layout: 'xxx.vue',
  15.     // 中间件验证
  16.     middleware: 'auth',
  17.     // 异步数据处理
  18.     async asyncData({app, params, query, store}) {
  19.         let uid = params.uid
  20.         let cid = query.cid
  21.         return {
  22.             uid: uid,
  23.             cid: cid,
  24.         }
  25.     },
  26.     // ...
  27. }
  28. </script>
复制代码


聊天模块
一开始是考虑使用textarea实现编辑框功能，后来考虑到文本框不能插入表情图原因，于是就使用了div的可编辑属性来实现。



  1. <template>
  2.     <div
  3.         ref="editor"
  4.         class="editor"
  5.         contentEditable="true"
  6.         v-html="editorText"
  7.         @click="handleClick"
  8.         @input="handleInput"
  9.         @focus="handleFocus"
  10.         @blur="handleBlur"
  11.         style="user-select:text;-webkit-user-select:text;">
  12.     </div>
  13. </template>
复制代码
好了，运用Nuxt.js开发聊天室实例项目就介绍到这里。希望对大家有些帮助！！
Flutter聊天室|dart+flutter仿微信App界面|flutter聊天实例







欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2