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

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

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

    前言

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