vue 高仿微信即时 IM 聊天|仿微信 vue+h5 版|仿微信界面

vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面

1、项目介绍:
运用vue全家桶技术(vue+vue-cli+vuex+vue-router+webpack+node...)实现的高仿微信app聊天系统vue-wechat聊天室,实现了下拉刷新、消息表情发送、大图预览、视频播放、自定义长按菜单。。。
2、技术实现:

  • MVVM框架:Vue.js 2.0
  • 状态管理:Vuex
  • 页面路由:Vue-router
  • 弹窗插件:wcPop
  • 打包工具:webpack 2.0
  • 环境配置:node.js + cnpm
  • 图片插件:vue-photo-preview
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    vue高仿微信即时IM聊天|仿微信vue+h5版|仿微信界面
    <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>
/*主页面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'
// 注册全局钩子拦截登录状态
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
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: window.sessionStorage.getItem('user'),
        token: window.sessionStorage.getItem('token')
    },
    mutations: {
        // 将token存储到sessionStorage
        SET_TOKEN (state, data){
            state.token = data;
            window.sessionStorage.setItem('token', data);
        },
        // 获取用户名
        SET_USER (state, data){
            state.user = data;
            window.sessionStorage.setItem('user', data);
        },
        // 退出
        LOGOUT (state){
            state.user = null;
            state.token = null;
            window.sessionStorage.removeItem('user');
            window.sessionStorage.removeItem('token');
        }
    },
    getters:{}
})

vue 高仿微信即时 IM 聊天|仿微信 vue+h5 版|仿微信界面

本作品采用《CC 协议》,转载必须注明作者和本文链接

本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)

本帖由系统于 5个月前 自动加精
讨论数量: 8

求一下主题色 :joy:

5个月前 评论

加你QQ了。好想没有人通过

5个月前 评论

mark一下,感谢分享

4个月前 评论

感谢分享

4个月前 评论
pangxianfei

不错呢,有开源了。

1个月前 评论
damingba 1个月前

强大,感谢分享

1个月前 评论

请问可以分享源码吗?

1个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
文章
12
粉丝
15
喜欢
28
收藏
15
排名:249
访问:1.7 万
私信
所有博文