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)
本帖由系统于 1年前 自动加精
讨论数量: 13

这个人真的无孔不入,搞些乱七八糟的代码,拼凑几个页面,到处都能看到,要卖就像layui一样明码标价,搞这些事情真的有点恶心了

1年前 评论

求一下主题色 :joy:

1年前 评论

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

1年前 评论

mark一下,感谢分享

1年前 评论
pangxianfei

不错呢,有开源了。

1年前 评论
damingba 1年前

强大,感谢分享

1年前 评论

请问可以分享源码吗?

1年前 评论

这个人真的无孔不入,搞些乱七八糟的代码,拼凑几个页面,到处都能看到,要卖就像layui一样明码标价,搞这些事情真的有点恶心了

1年前 评论

大佬 开源了吗

1年前 评论

要开源就直接说,要卖系统就标个价格。

1年前 评论

做直播弹幕、聊天室,可以通过websocket来实现。可以试试第三方的websocket框架,我近期在使用的【GoEasy】这个框架,支持vue、微信小程序、uniapp、react等,实时性不错,也比较稳定易用,有弹幕、直播聊天室开发需求的也可以去看看。

1年前 评论

这个人真的无孔不入,搞些乱七八糟的代码,拼凑几个页面,到处都能看到,要卖就像 layui 一样明码标价,搞这些事情真的有点恶心了

7个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
26
粉丝
30
喜欢
79
收藏
44
排名:232
访问:1.9 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
1
vue聊天室
2
vue仿微信
1
vue即时通讯
1
vue聊天IM
1
vue网页版
1
vue仿微信网页端
1
vue聊天pc端
1
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
1
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1