基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈

xiaoyan2015 2020/10/18 8:03:43

项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例。实现了消息发送、图片/视频预览、下拉刷新/长按弹窗、朋友圈等功能。技术架构 运用技术:nuxt.js+vue.js+vuex UI组件库:vant (有赞移动端vue.js组件库) 字体图标:阿里i…

项目说明

> [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例。实现了消息发送、图片/视频预览、下拉刷新/长按弹窗、朋友圈等功能。

图片描述

技术架构

  • 运用技术:nuxt.js+vue.js+vuex
  • UI组件库:vant (有赞移动端vue.js组件库)
  • 字体图标:阿里iconfont图标库
  • 弹窗组件:vpopup(基于vue自定义弹框)
  • 本地存储:cookie-universal-nuxt: ^2.1.4

img

初步了解Nuxt.js

Nuxt.js 是一个基于 Vue.js 架构开发的服务端SSR渲染通用应用框架。让你的项目网站轻松实现SEO功能。
img
img
大家可以去官网查看更详细的资料。
https://zh.nuxtjs.org/
https://github.com/nuxt/nuxt.js

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

自定义组件介绍

项目中页面大致布局都分为顶部、主体内容、底部,其中顶部导航Navbar、底部Tab及弹窗都是自定义组件实现功能。
img
img
img
由于之前有过相关分享文章,这里不多介绍了。
vue自定义导航栏/标签栏Tabbar组件
vue自定义Popup组件|仿ios弹出框

模仿探探/陌陌卡片滑动

项目中“遇见”页面模仿了探探卡片拖拽滑动切换功能。拖拽四周会出现不同的斜切视角。
img
大家如果对实现过程感兴趣的话,可以去看看下面这篇文章。
Vue/Nuxt仿探探/Tinder卡片式滑动堆叠效果

nuxt.config.js配置

Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置。更详细配置信息可以去查看官网文档。
https://zh.nuxtjs.org/guide/directory-structure

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}  
  ],  
  // ...  
}

大家可以在nuxt.config.js中配置全局meta信息,也可以单独在相应页面配置。


聊天模块

刚开始是使用textarea实现。不过textarea中不能插入图片,对于emoj表情需要做转义处理。于是就改为使用了div的可编辑属性来实现插入图文表情。
img

<div class="editor">
    </div>

大家如果有其它好的方法实现编辑器功能,欢迎留言讨论!
图片描述

好了,基于Nuxt实现IM聊天功能就介绍到这里。希望大家能喜欢~~

最后附上一个Flutter实例项目
Flutter+Dart聊天室|flutter仿微信界面|flutter跨端聊天实例

图片描述

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈]http://www.zyiz.net/tech/detail-148117.html

上一篇:用一个例子理解JS函数的底层处理机制

下一篇:nodejs使用Sequelize框架操作数据库

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程