vue全家桶仿微信聊天|仿微信界面聊天室

6
回复
179
查看
[复制链接]

22

主题

27

帖子

184

安币

程序猿

Rank: 2

发表于 2019-4-5 13:30:37 | 显示全部楼层 |阅读模式

基于vue2.0+vue-router+vuex+webpack2.0+es6等技术栈开发搭建的仿微信聊天室项目,实现了消息 表情(动图)发送,图片、视频预览,打赏、红包等功能。
001360截图20190404102414972.png 002360截图20190404102455835.png
003360截图20190404102522217.png 004360截图20190404102549202.png
006360截图20190404102712306.png 007360截图20190404102726897.png
009360截图20190404102830962.png 010360截图20190404103158010.png
012360截图20190404103301954.png 013360截图20190404103443283.png
014360截图20190404103510337.png 015360截图20190404103635467.png
017360截图20190404103734242.png 018360截图20190404103753065.png
[JavaScript] 查看源文件 复制代码
/*
 *  页面地址路由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


[JavaScript] 查看源文件 复制代码
/*
 *  主页面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'


20180817002157557.jpg
——>>>欢迎一起交流学习  QQ:282310962    微信:xy190310

449

主题

1131

帖子

1965

安币

手工艺人

发表于 2019-4-8 10:19:50 | 显示全部楼层
每次我都积极回帖的,想要安币~

3

主题

9425

帖子

1796

安币

Android大神

Rank: 6Rank: 6

QQ达人

发表于 2019-4-8 10:32:13 | 显示全部楼层
支持,感谢,祝巴士越来越好~

7

主题

9912

帖子

2332

安币

Android大神

Rank: 6Rank: 6

发表于 2019-4-8 10:39:13 | 显示全部楼层
安卓巴士是个不错的网站,我来顶个贴~

0

主题

9200

帖子

2067

安币

Android大神

Rank: 6Rank: 6

发表于 2019-4-8 10:50:14 | 显示全部楼层
不错不错,楼主辛苦了。。。

329

主题

919

帖子

726

安币

手工艺人

发表于 2019-4-8 11:23:37 | 显示全部楼层
安卓巴士是个不错的网站,我来顶个贴~

497

主题

1167

帖子

1041

安币

手工艺人

发表于 2019-4-8 11:51:22 | 显示全部楼层
感谢分享,楼主V5~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /4 下一条

联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )