V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
aos
V2EX  ›  程序员

Vue2 全家桶仿 微信 App 项目,支持多人在线聊天和机器人聊天

  •  5
     
  •   aos · 2017-06-19 09:56:47 +08:00 · 21114 次点击
    这是一个创建于 2715 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    这个项目是利用工作之余写的一个模仿微信 app 的单页面应用,整个项目包含 27 个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个项目主要目的是练习和熟悉 vue 和 vuex 的配合使用,利用 socket.io 实现实时聊天。

    技术栈

    vue2+vue-router+webpack+vuex+sass+svg 构图+es6/7
    
    

    源码地址

    源码地址:https://github.com/bailichen/vue-weixin

    项目运行

    git clone https://github.com/bailichen/vue-weixin.git
    
    cd vue-weixin
    
    npm install
    
    npm run dev (访问本地,运行后访问 http://localhost:8882)
    
    

    效果演示

    项目演示请点击这里 (请用 chrome 手机模式预览)

    移动端扫描下方二维码

    说明

    本项目主要用于熟悉 vue2+vuex 的用法

    如有问题请直接在 Issues 中提出,或加 qq:812571880

    如果觉得对您学习 vue 有点点帮助,请右上角 star 一下吧 ^_^

    目标功能

    • [x] 微信
    • [x] 通讯录
    • [x] 发现
    • [x] 我
    • [x] 设置
    • [x] 新消息提醒
    • [x] 勿扰模式
    • [x] 聊天
    • [x] widows 微信已登录
    • [x] 搜索页
    • [x] 对话页
    • [x] 对话功能
    • [x] 单人机器人智能对话页
    • [x] 群聊
    • [x] 朋友圈
    • [x] 朋友圈点赞、评论
    • [x] 个人中心
    • [x] 详细资料
    • [x] 更多
    • [x] 个人相册
    • [x] 更多
    • [x] 收藏
    • [x] 我的钱包
    • [x] 购物
    • [x] 设置
    • [x] 登录

    页面部分截图

    单人聊天

    群聊

    朋友圈

    项目布局

    
    ├── README.md                                    // webpack 配置文件
    ├── build                                        // 项目打包路径
    ├── config                                       // 上线项目文件,放在服务器即可正常访问
    │   └── index.js
    ├── favicon.ico
    ├── index.html
    ├── package.json
    ├── printscreen
    ├── src                                          // 源码目录
    │   ├── App.vue                                  // 页面入口文件
    │   ├── components                               // 公共组件
    │   │   ├── findandMe
    │   │   │   └── findandMe.vue                    // 发现和我共同的模块的列表
    │   │   ├── footer
    │   │   │   └── foot.vue                         // 底部微信导航
    │   │   └── header
    │   │       └── head.vue                         // 头部公共组件
    │   ├── config                                   // 基本配置
    │   │   ├── env.js                               // 环境切换配置
    │   │   ├── fetch.js                             // 获取数据
    │   │   ├── iscroll.js 
    │   │   ├── mUtils.js                            // 工具
    │   │   ├── rem.js                               // px 转换 rem
    │   │   ├── swiper.min.js                        // 轮播图控件
    │   │   └── uploadPreview.js                     // 上传图片控件
    │   ├── frames
    │   │   ├── addressbook
    │   │   │   ├── addressbook.vue                  // 通讯录
    │   │   │   └── details
    │   │   │       ├── details.vue                  // 详细资料
    │   │   │       └── more
    │   │   │           └── more.vue                 // 更多
    │   │   ├── computer
    │   │   │   └── computer.vue                     // pc 端登录
    │   │   ├── conversation
    │   │   │   ├── chatmessage
    │   │   │   │   ├── chatmessage.vue              // 单人聊天信息
    │   │   │   │   └── groupchatmessage.vue         // 群聊聊天信息
    │   │   │   ├── groupchat.vue                    // 群聊
    │   │   │   └── singlechat.vue                   // 单人对话
    │   │   ├── dialogue
    │   │   │   └── dialogue.vue                     // 微信首页(对话列表页)
    │   │   ├── find
    │   │   │   ├── find.vue                         // 发现
    │   │   │   ├── friendcircle
    │   │   │   │   └── friendcircle.vue             // 朋友圈
    │   │   │   └── miniapps
    │   │   │       └── miniapps.vue                 // 小程序子页面
    │   │   ├── me
    │   │   │   ├── cardbag
    │   │   │   │   └── cardbag.vue                  // 卡包
    │   │   │   ├── collect
    │   │   │   │   └── collect.vue                  // 我的收藏
    │   │   │   ├── me.vue
    │   │   │   ├── personaldetails
    │   │   │   │   └── personaldetails.vue          // 个人信息
    │   │   │   ├── photoalbum
    │   │   │   │   └── photoalbum.vue               // 我的相册
    │   │   │   ├── settings
    │   │   │   │   ├── detailset
    │   │   │   │   │   ├── aboutwc.vue              // 关于微信
    │   │   │   │   │   ├── chat.vue                 // 聊天
    │   │   │   │   │   ├── currency.vue             // 通用
    │   │   │   │   │   ├── disturbance.vue          // 勿扰模式
    │   │   │   │   │   ├── help.vue                 // 帮助与反馈
    │   │   │   │   │   ├── login.vue                // 登录
    │   │   │   │   │   ├── newmessage.vue           // 新消息提醒
    │   │   │   │   │   └── privacy.vue              // 隐私
    │   │   │   │   └── settings.vue                 // 设置
    │   │   │   └── wallet
    │   │   │       └── wallet.vue                   // 我的钱包
    │   │   ├── search
    │   │   │   └── search.vue                       // 搜索
    │   │   └── transfer
    │   │       └── transfer.vue
    │   ├── images
    │   ├── main.js                                  // 程序入口文件,加载各种公共组件
    │   ├── router
    │   │   └── router.js                           // 所有页面路由控制中心
    │   ├── service
    │   │   ├── data
    │   │   │   ├── album.js                        // 个人相册
    │   │   │   ├── burse.js                        // 钱包数据
    │   │   │   ├── chatmore.js
    │   │   │   ├── collect.js                     // 我的收藏
    │   │   │   ├── contacts.js                    // 联系人列表数据
    │   │   │   ├── dialoglist.js                  // 对话列表
    │   │   │   ├── friendcircle.js                // 朋友圈数据
    │   │   │   ├── groupchat.js                   // 群聊数据
    │   │   │   ├── login.js                       // 个人用户信息
    │   │   │   ├── search.js                      // 搜索的分类
    │   │   │   └── userword.js
    │   │   └── getData.js                         // 数据交互统一调配
    │   ├── style
    │   │   ├── public.scss                        // 公共样式
    │   │   └── swiper.min.css
    │   └── vuex                                   // vuex 的状态管理
    │       ├── action.js                          // 配置根 actions
    │       ├── index.js                           // 引用 vuex,创建 store
    │       ├── mutation-types.js                  // 定义常量 muations 名
    │       └── mutation.js                        // 配置根 mutations
    └── tree.md
    
    36 directories, 133 files
    
    
    56 条回复    2019-04-09 23:59:16 +08:00
    whypool
        1
    whypool  
       2017-06-19 10:08:51 +08:00
    6666
    vipwpcom
        2
    vipwpcom  
       2017-06-19 10:12:03 +08:00
    66666
    wjm2038
        3
    wjm2038  
       2017-06-19 10:42:56 +08:00 via Android
    66666
    xiahei
        4
    xiahei  
       2017-06-19 10:43:27 +08:00 via Android
    666
    pzzrudlf
        5
    pzzrudlf  
       2017-06-19 11:02:18 +08:00
    666,666
    lxrmido
        6
    lxrmido  
       2017-06-19 11:30:08 +08:00
    666666
    wly19960911
        7
    wly19960911  
       2017-06-19 11:36:58 +08:00 via Android
    提个建议,点击反馈
    shuangguanQuail
        8
    shuangguanQuail  
       2017-06-19 11:48:55 +08:00
    收藏一波
    Zohar
        9
    Zohar  
       2017-06-19 11:56:34 +08:00 via Android
    很棒棒哟!给你一朵小红花~
    wxcszh
        10
    wxcszh  
       2017-06-19 11:56:40 +08:00
    666 溜溜溜
    feng1234
        11
    feng1234  
       2017-06-19 11:57:41 +08:00
    6666666
    luanjia
        12
    luanjia  
       2017-06-19 12:01:34 +08:00 via Android
    6666
    PythoneerDev6
        13
    PythoneerDev6  
       2017-06-19 12:02:49 +08:00
    厉害了
    PythoneerDev6
        14
    PythoneerDev6  
       2017-06-19 12:03:27 +08:00
    开源了吗?
    kiah
        15
    kiah  
       2017-06-19 12:03:34 +08:00
    66666666
    crytis
        16
    crytis  
       2017-06-19 12:06:30 +08:00 via iPhone
    6666666666
    mokeyjay
        17
    mokeyjay  
       2017-06-19 12:06:48 +08:00 via Android
    666666
    aos
        18
    aos  
    OP
       2017-06-19 12:34:18 +08:00
    @PythoneerDev6 源码地址在介绍里写了
    lwbjing
        19
    lwbjing  
       2017-06-19 12:35:25 +08:00
    666666
    ZzFoo
        20
    ZzFoo  
       2017-06-19 12:59:46 +08:00
    666666
    lhx2008
        21
    lhx2008  
       2017-06-19 13:03:41 +08:00
    看到好多功能都没做,现在感觉微信还是挺复杂的
    aos
        22
    aos  
    OP
       2017-06-19 13:57:22 +08:00
    @lhx2008 微信的确非常多的细节,目前只是初始版本,慢慢会支持更多功能
    XuweiatTuSDK
        23
    XuweiatTuSDK  
       2017-06-19 14:04:04 +08:00
    666666666
    fuliti
        24
    fuliti  
       2017-06-19 14:04:33 +08:00
    66666666
    badcode
        25
    badcode  
       2017-06-19 14:09:21 +08:00 via Android
    呀呀呀呀呀呀呀
    onyourroad
        26
    onyourroad  
       2017-06-19 15:23:41 +08:00
    6666666666
    lj61785636
        27
    lj61785636  
       2017-06-19 15:36:55 +08:00 via iPhone
    6666
    SPACELAN
        28
    SPACELAN  
       2017-06-19 16:03:37 +08:00
    666666
    ae86
        29
    ae86  
       2017-06-19 16:41:24 +08:00
    666666
    lrh3321
        30
    lrh3321  
       2017-06-19 17:37:34 +08:00
    厉害了
    fudanglp
        31
    fudanglp  
       2017-06-19 18:14:18 +08:00
    666666
    mengyaoss77
        32
    mengyaoss77  
       2017-06-19 18:26:39 +08:00
    厉害了 抱拳了老铁
    wenning
        33
    wenning  
       2017-06-19 19:49:36 +08:00
    6666
    Betacoefficient
        34
    Betacoefficient  
       2017-06-19 19:57:59 +08:00
    好棒啊,灰常的有用啊
    bozong
        35
    bozong  
       2017-06-19 20:12:25 +08:00 via iPhone
    66666666666666666666
    Ultraman
        36
    Ultraman  
       2017-06-19 20:22:43 +08:00
    demo 是被那个智障刷挂了吗?我打不开了
    tf141
        37
    tf141  
       2017-06-19 20:41:13 +08:00
    强无敌
    zonghua
        38
    zonghua  
       2017-06-19 20:44:17 +08:00
    有没有空把每个像素和动画的每一帧都高仿啊,这个好多地方多了空白线 b ( ̄▽ ̄) d
    nVic
        39
    nVic  
       2017-06-19 21:02:35 +08:00
    现在的微信过于复杂了,应该被换代。。。
    aos
        40
    aos  
    OP
       2017-06-19 22:02:03 +08:00
    @vcinex 已经加上限制了,可以正常访问了,那家伙太无聊
    wangzhi
        41
    wangzhi  
       2017-06-19 22:15:58 +08:00 via Android
    66666
    aaronlam
        42
    aaronlam  
       2017-06-19 22:27:19 +08:00
    6,最近也在学习 VUE,希望楼主可以继续完善,赞!
    algery
        43
    algery  
       2017-06-19 22:48:22 +08:00
    强!双击一波 666666
    bw2
        44
    bw2  
       2017-06-19 22:52:32 +08:00
    舅服你
    wending
        45
    wending  
       2017-06-19 23:12:33 +08:00
    666 啊,这个页面的布局是你写的?我们公司最近的一个项目就需要这样仿写一个 APP 的前端界面
    outloudvi
        46
    outloudvi  
       2017-06-19 23:21:21 +08:00 via Android
    赞!还原度超高!
    不过有点担心会不会有商标权争议什么的……
    gswxy
        47
    gswxy  
       2017-06-20 07:45:18 +08:00
    666
    baixiaowen
        48
    baixiaowen  
       2017-06-20 07:51:59 +08:00
    对 telegram 感兴趣吗? 我觉得抄一下 telegram 不错
    v2chou
        49
    v2chou  
       2017-06-20 09:02:06 +08:00
    99999999
    aos
        50
    aos  
    OP
       2017-06-20 09:05:26 +08:00
    @outloudvi 应该不会吧,只是模仿了 ui
    ivanyin
        51
    ivanyin  
       2017-06-20 10:05:00 +08:00
    66666666666666666666
    menduo
        52
    menduo  
       2017-06-20 16:47:49 +08:00
    试了,很漂亮。
    noNOno
        53
    noNOno  
       2017-06-20 17:28:26 +08:00
    666666
    hsy123
        54
    hsy123  
       2017-06-21 15:01:57 +08:00
    66666666666
    bailichen
        55
    bailichen  
       2017-06-23 10:20:42 +08:00
    666666666
    xiaoyan2017
        56
    xiaoyan2017  
       2019-04-09 23:59:16 +08:00
    666,太赞了,很有学习借鉴意义。
    https://blog.csdn.net/yanxinyun1990/article/details/89038427
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   941 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 22:23 · PVG 06:23 · LAX 14:23 · JFK 17:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.