请选择 进入手机版 | 继续访问电脑版

默认
发表评论 0
vue-wechat聊天IM项目|仿微信vue聊天室实例

vue2.0版移动聊天IM案例|仿微信界面vue群聊天室|vue高仿微信聊天窗口
最近一直在学习捣鼓vue项目,前段时间也有使用H5开发过html5聊天项目,只是觉得好些功能都没有完美实现,也知道最近vue技术比较火,而且也比较成熟,如是就使用vue技术重新开发了一版,如是就有了这个vue-weChatRoom聊天室实例项目。基于vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop等技术架构开发,新增了消息下拉刷新,实现了消息表情发送,图片、视频预览,打赏、红包等功能。

技术栈
  • MVVM框架:Vue.js 2.0
  • 状态管理:Vuex
  • 页面路由:Vue-router
  • 弹窗插件:wcPop
  • 打包工具:webpack 2.0
  • 环境配置:node.js + cnpm
  • 图片插件:vue-photo-preview

项目效果截图:
001360截图20190404102414972.png 002360截图20190404102455835.png
003360截图20190404102522217.png 004360截图20190404102549202.png
006360截图20190404102712306.png 008360截图20190404102741137.png
010360截图20190404103158010.png 012360截图20190404103301954.png
014360截图20190404103510337.png 015360截图20190404103635467.png
017360截图20190404103734242.png 018360截图20190404103753065.png
vue-router页面地址路由、登录验证拦截:
/*
 *  页面地址路由js
 */ 
import Vue from 'vue'
import _router from 'vue-router'
import store from '../vuex'

Vue.use(_router) //应用路由

const router = new _router({
    routes: [
        // 登录、注册
        {
            path: '/login',
            component: resolve => require(['../views/auth/login'], resolve),
        },
        {
            path: '/register',
            component: resolve => require(['../views/auth/register'], resolve),
        },

        // 首页、通讯录、我
        {
            path: '/',
            component: resolve => require(['../views/index'], resolve),
            meta: { showHeader: true, showTabBar: true, requireAuth: true }
        },
        {
            path: '/contact',
            component: resolve => require(['../views/contact'], resolve),
            meta: { showHeader: true, showTabBar: true, requireAuth: true },
        },
        {
            path: '/contact/uinfo',
            component: resolve => require(['../views/contact/uinfo'], resolve),
        },
        {
            path: '/ucenter',
            component: resolve => require(['../views/ucenter'], resolve),
            meta: { showHeader: true, showTabBar: true, requireAuth: true }
        },
        // 聊天页面
        {
            path: '/chat/group-chat',
            component: resolve => require(['../views/chat/group-chat'], resolve),
            meta: { requireAuth: true }
        },
        {
            path: '/chat/single-chat',
            component: resolve => require(['../views/chat/single-chat'], resolve),
            meta: { requireAuth: true }
        },
        {
            path: '/chat/group-info',
            component: resolve => require(['../views/chat/group-info'], resolve),
            meta: { requireAuth: true }
        }

        // ...
    ]
})

// 注册全局钩子拦截登录状态
const that = this
router.beforeEach((to, from, next) => {
    const token = store.state.token
    // 判断该路由地址是否需要登录权限
    if(to.meta.requireAuth){
        // 通过vuex state获取当前token是否存在
        if(token){
            next()
        }else{
            // console.log('还未登录授权!')
            next()
            wcPop({
                content: '还未登录授权!', style: 'background:#e03b30;color:#fff;', time: 2,
                end: function(){
                    next({ path: '/login' })
                }
            });
        }
    }else{
        next()
    }
})

export default router

主页面app.vue模板:
<template>
  <div class="weChatIM__panel clearfix">
    <div class="we__chatIM-wrapper flexbox flex__direction-column">
      <!-- //顶部 -->
      <header-bar :class="{'topfixed': isTopFixed}"></header-bar>

      <!-- //主页面 -->
      <div class="wcim__container flex1">
        <keep-alive><router-view></router-view></keep-alive>
      </div>

      <!-- //底部tab -->
      <tab-bar></tab-bar>
    </div>
  </div>
</template>

<script>
  import headerBar from './components/header'
  import tabBar from './components/footer'
  export default {
    name: 'app',
    data () {
      return {
        isTopFixed: true
      }
    },
    components: {
      headerBar,
      tabBar
    }
  }
</script>

<style>
  /* 引入公共样式 */
  @import './assets/fonts/iconfont.css';
  @import './assets/css/reset.css';
  @import './assets/css/layout.css';

</style>

主页面main.js引入:
/*
 *  主页面js
 */
import Vue from 'vue'
import App from './App.vue'

// >>>引入js
import $ from 'jquery'
import fontsize from './assets/js/fontsize'

// >>>引入弹窗插件
import wcPop from './assets/js/wcPop/wcPop'
import './assets/js/wcPop/skin/wcPop.css'

// >>>引入饿了么移动端vue组件库
import MintUI, { Loadmore } from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.component(Loadmore.name, Loadmore)
Vue.use(MintUI)

// >>>引入图片预览插件
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(photoPreview, {
  loop: false,
  fullscreenEl: false, //是否全屏
  arrowEl: false, //左右按钮
})

// >>>引入地址路由
import router from './router'
import store from './vuex'



即时通讯网 - 即时通讯开发者社区! 来源: - 即时通讯开发者社区!

推荐方案
打赏楼主 ×
使用微信打赏! 使用支付宝打赏!

返回顶部