基于Vue2.0高仿微信App·第一期

牛肉拉面
牛肉拉面 发布于 2017-03-09 10:32:17 浏览:2533 类型:原创 - 教程 分类:类库框架 - Vue2.0实践 二维码: 作者原创 版权保护
一款基于Vue2.0高仿微信App的单页应用

仓库/项目地址:https://github.com/zhaohaodang/vue-WeChat.git

概述

利用Vue2.0模仿微信app,努力做到以假乱真的效果。个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息。
项目的第一期接近尾声,后期会增加 仿3DTouch登陆注册emoji表情内嵌通讯录检索朋友圈图片查看等功能,让它更接近微信App的用户交互体验。

手机预览

首选红色,加载较快 <有效期至2018-03-02>
蓝色为备胎,加载较慢

基于Vue2.0高仿微信App·第一期

测试机为iPhone 6s,在微信内置浏览器以及Safari、Chrome浏览器中运行良好。

若觉得不错想给作者点个赞,可以给项目增加一个 Star ★,项目会被收录在 Your stars 中,方便日后查看。
若想时时关注项目动态,可 Watch ⊙ 此项目,github平台会及时通知你项目的动态,你的邮箱也会收到通知。

桌面预览

首选 加载较快 http://zhaohaodang.com/ <有效期至2018-03-02>
备选 加载较慢 https://vue2-wechat.github.io
桌面端浏览时,建议打开开发者工具 F12,模拟手机预览 Ctrl+Shift+M (Chrome)

图片预览

微信列表的滑动交互

基于Vue2.0高仿微信App·第一期


搜素组件的动画效果

基于Vue2.0高仿微信App·第一期


技术相关

vue-WeChat Wiki 中记录了开发此项目需要的知识储备、开发思路、开发利器等。内容会不断更新,实际上想把它建成个人快速开发的代码库
每个主要的.vue和.js文件都有详细的注释提示,建议将仓库clone到本地,查看源码。

示例1( store.js 注解)

基于Vue2.0高仿微信App·第一期

示例2( App.vue 注解)

基于Vue2.0高仿微信App·第一期


问题反馈

建议移步 Issues,欢迎反馈项目中的不良/错误表现,以及你在开发过程遇到的问题,作者会积极回复。

吐槽

作者是上班族,下班时间搞的这个项目,简直就像是在加班
能用两周时间结束第一期,也是出乎意料,所以会有一些糟糕的使用体验,在所难免
后期会放出适合新手练手的demo仓库,适合在此基础上进行二次开发的项目。

延伸阅读

一些有趣的前端交互
z
给个赞 40 人点赞
收藏 36 人收藏
评论 已有 20 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
feiyu
feiyu2017-03-10 09:40:4010F
厉害,楼主继续做菜吧
举报 支持 (1) 回复 (0)
最新评论
951216388
9512163886 天前20F
这个app的小问题还是挺多的, 有很大改进的空间
举报 支持 (0) 回复 (0)
1628916868l
1628916868l2017-03-15 19:20:2919F
大神,太厉害啊,请受我一拜
,只能写个评论,当做是对您的支持吧,希望写下去,最好多写点注释,
大神,在受我一拜
举报 支持 (0) 回复 (0)
15726816232
157268162322017-03-14 09:44:0918F
大神,我本地下载了你的源码,怎么运行呢,我运行index.html,都是空白啊
举报 支持 (0) 回复 (0)
牛肉拉面
牛肉拉面2017-03-12 09:42:0117F
桌面端浏览时,建议打开开发者工具 F12,模拟手机预览 //@isitone:聊天背景用电脑看是x轴平铺,不知道是不是大神有意设置的,我会设置background-size:100%;
举报 支持 (0) 回复 (0)
isitone
isitone2017-03-11 17:38:3716F
聊天背景用电脑看是x轴平铺,不知道是不是大神有意设置的,我会设置background-size:100%;
举报 支持 (0) 回复 (1)
15018327040
150183270402017-03-10 17:27:5415F
共勉共进 //@牛肉拉面:原来是safari的手势,感谢提出这个bug! //@15018327040:不,沿着屏幕最左边向右滑动可以切换页面,在这种状况下会会先切回到首页,然后又切一次到首页 //@牛肉拉面:你是指 切换 未读/已读 的时候 会触发两次吗? //@15018327040:在iphone下右滑切换的时候会切两次
举报 支持 (0) 回复 (0)
牛肉拉面
牛肉拉面2017-03-10 17:26:5114F
原来是safari的手势,感谢提出这个bug! //@15018327040:不,沿着屏幕最左边向右滑动可以切换页面,在这种状况下会会先切回到首页,然后又切一次到首页 //@牛肉拉面:你是指 切换 未读/已读 的时候 会触发两次吗? //@15018327040:在iphone下右滑切换的时候会切两次
举报 支持 (0) 回复 (1)
15018327040
150183270402017-03-10 17:13:5713F
不,沿着屏幕最左边向右滑动可以切换页面,在这种状况下会会先切回到首页,然后又切一次到首页 //@牛肉拉面:你是指 切换 未读/已读 的时候 会触发两次吗? //@15018327040:在iphone下右滑切换的时候会切两次
举报 支持 (0) 回复 (1)
牛肉拉面
牛肉拉面2017-03-10 14:51:2012F
你是指 切换 未读/已读 的时候 会触发两次吗? //@15018327040:在iphone下右滑切换的时候会切两次
举报 支持 (0) 回复 (1)
fantasy525
fantasy5252017-03-10 10:44:1511F
围观大神,这么叼
举报 支持 (0) 回复 (0)
feiyu
feiyu2017-03-10 09:40:4010F
厉害,楼主继续做菜吧
举报 支持 (1) 回复 (0)
15018327040
150183270402017-03-10 09:40:389F
在iphone下右滑切换的时候会切两次
举报 支持 (0) 回复 (1)
rocky191
rocky1912017-03-10 09:39:238F
大神
举报 支持 (0) 回复 (0)
房糖糖
房糖糖2017-03-09 17:17:257F
围观大神
举报 支持 (0) 回复 (0)
渣渣化酥要花花
渣渣化酥要花花2017-03-09 17:01:396F
围观大神
举报 支持 (0) 回复 (0)
牛肉拉面 牛肉拉面 作者

蜗牛游戏-前端研发工程师

作者最新