利用Vue2.0模仿微信app,努力做到以假乱真的效果。个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息。后期会增加 仿3DTouch、登陆、注册、emoji表情内嵌、朋友圈图片查看等功能,让它更接近微信App的用户交互体验。
仓库地址:https://github.com/zhaohaodang/vue-WeChat.git
桌面预览
首选 较快 http://zhaohaodang.com/vue2-wechat
备选 较慢 https://vue2-wechat.github.io
桌面端浏览时,建议打开开发者工具 F12
,模拟手机预览 Ctrl+Shift+M
(Chrome)
动图预览
微信列表的滑动交互
搜素组件的动画效果
技术相关
- vue-WeChat Wiki 中记录了开发此项目需要的知识储备、开发思路、开发利器等。内容会不断更新,实际上想把它建成个人快速开发的代码库。
- 每个主要的.vue和.js文件都有详细的注释提示,建议将仓库
clone
到本地,查看源码。
示例1( store.js 注解)
[图片上传失败...(image-3d01a5-1605580271501)]
示例2( App.vue 注解)
[图片上传失败...(image-1c659c-1605580271501)]
吐槽
- 作者是上班族,下班时间搞这个项目,就像是在加班,能用两周时间结束第一期,也是出乎意料。当然也会有一些糟糕的体验,在所难免!
- 后期会放出适合新手练手的demo仓库,适合在此基础上进行二次开发的项目。