Need help with vue-weixin?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bailichen
2.6K Stars 809 Forks MIT License 221 Commits 45 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 11,773
flex
vue-rou...
es2015
Webpack
71 commits
# 15
flex
vue-rou...
es2015
Webpack
12 commits

通知

项目vue+vuex版本已更新版本,只接口图片不加载,不影响初学者学习vue。

更新说明

"vue": "^2.5.2",

"vue-router": "^3.0.1",

"vuex": "^3.1.0"

"webpack": "^4.17.1",

前言

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

欢迎各路大神Issues

技术栈

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

项目运行

git clone https://github.com/bailichen/vue-weixin.git

cd vue-weixin

npm install

npm run start (访问本地,运行后访问 http://localhost:10022)

效果演示

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

移动端扫描下方二维码

后台代码在这里

后台代码

说明

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

如有问题请直接在Issues中提出

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

目标功能

  • [x] 微信
  • [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                       // 搜索     
│   ├── 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.