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

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

  •  5
     
  •   aos · 158 天前 · 5530 次点击
    这是一个创建于 158 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    这个项目是利用工作之余写的一个模仿微信 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
    
    
    55 回复  |  直到 2017-06-23 10:20:42 +08:00
        1
    whypool   158 天前
    6666
        2
    vipwpcom   158 天前
    66666
        3
    wjm2038   158 天前 via Android
    66666
        4
    xiahei   158 天前 via Android
    666
        5
    pzzrudlf   158 天前
    666,666
        6
    lxrmido   158 天前
    666666
        7
    wly19960911   158 天前 via Android
    提个建议,点击反馈
        8
    shuangguanQuail   158 天前
    收藏一波
        9
    Zohar   158 天前 via Android
    很棒棒哟!给你一朵小红花~
        10
    wxcszh   158 天前
    666 溜溜溜
        11
    feng1234   158 天前
    6666666
        12
    jiage8866   158 天前 via Android
    6666
        13
    PythoneerDev6   158 天前
    厉害了
        14
    PythoneerDev6   158 天前
    开源了吗?
        15
    kiah   158 天前
    66666666
        16
    crytis   158 天前 via iPhone
    6666666666
        17
    mokeyjay   158 天前 via Android
    666666
        18
    aos   158 天前
    @PythoneerDev6 源码地址在介绍里写了
        19
    lwbjing   158 天前
    666666
        20
    ZzFoo   158 天前
    666666
        21
    lhx2008   158 天前
    看到好多功能都没做,现在感觉微信还是挺复杂的
        22
    aos   158 天前
    @lhx2008 微信的确非常多的细节,目前只是初始版本,慢慢会支持更多功能
        23
    XuweiatTuSDK   158 天前
    666666666
        24
    fuliti   158 天前
    66666666
        25
    badcode   158 天前 via Android
    呀呀呀呀呀呀呀
        26
    onyourroad   158 天前
    6666666666
        27
    lj61785636   158 天前 via iPhone
    6666
        28
    SPACELAN   157 天前
    666666
        29
    ae86   157 天前
    666666
        30
    lrh3321   157 天前
    厉害了
        31
    fudanglp   157 天前
    666666
        32
    mengyaoss77   157 天前
    厉害了 抱拳了老铁
        33
    wenning   157 天前
    6666
        34
    Betacoefficient   157 天前
    好棒啊,灰常的有用啊
        35
    bozong   157 天前 via iPhone
    66666666666666666666
        36
    vcinex   157 天前
    demo 是被那个智障刷挂了吗?我打不开了
        37
    tf141   157 天前
    强无敌
        38
    zonghua   157 天前
    有没有空把每个像素和动画的每一帧都高仿啊,这个好多地方多了空白线 b ( ̄▽ ̄) d
        39
    nVic   157 天前
    现在的微信过于复杂了,应该被换代。。。
        40
    aos   157 天前
    @vcinex 已经加上限制了,可以正常访问了,那家伙太无聊
        41
    wangzhi   157 天前 via Android
    66666
        42
    aaronlam   157 天前
    6,最近也在学习 VUE,希望楼主可以继续完善,赞!
        43
    algery   157 天前
    强!双击一波 666666
        44
    bw2   157 天前
    舅服你
        45
    wending   157 天前
    666 啊,这个页面的布局是你写的?我们公司最近的一个项目就需要这样仿写一个 APP 的前端界面
        46
    outloudvi   157 天前 via Android
    赞!还原度超高!
    不过有点担心会不会有商标权争议什么的……
        47
    gswxy   157 天前
    666
        48
    baixiaowen   157 天前
    对 telegram 感兴趣吗? 我觉得抄一下 telegram 不错
        49
    v2chou   157 天前
    99999999
        50
    aos   157 天前
    @outloudvi 应该不会吧,只是模仿了 ui
        51
    ivanyin   157 天前
    66666666666666666666
        52
    menduo   156 天前
    试了,很漂亮。
        53
    noNOno   156 天前
    666666
        54
    hsy123   156 天前
    66666666666
        55
    bailichen   154 天前
    666666666
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2591 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 40ms · UTC 07:41 · PVG 15:41 · LAX 23:41 · JFK 02:41
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1