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 版|仿微信界面

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

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

求一下主题色 :joy:

2个月前 评论

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

2个月前 评论

mark一下,感谢分享

1个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!