这是一个创建于 2714 天前的主题，其中的信息可能已经有所发展或是发生改变。
前言
这个项目是利用工作之余写的一个模仿微信 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
 |
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
luanjia 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 OP @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
看到好多功能都没做，现在感觉微信还是挺复杂的
|
 |
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
Ultraman 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
现在的微信过于复杂了，应该被换代。。。
|
 |
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
|
 |
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
|
 |
56
xiaoyan2017 2019-04-09 23:59:16 +08:00
666，太赞了，很有学习借鉴意义。
https://blog.csdn.net/yanxinyun1990/article/details/89038427 |
Select Language