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

利用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)

动图预览

微信列表的滑动交互

消息列表滑动

搜素组件的动画效果

https://sinacloud.net/vue-wechat/gif/search-active.gif

技术相关

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

[图片上传失败...(image-3d01a5-1605580271501)]

示例2( App.vue 注解)

[图片上传失败...(image-1c659c-1605580271501)]

吐槽

  • 作者是上班族,下班时间搞这个项目,就像是在加班,能用两周时间结束第一期,也是出乎意料。当然也会有一些糟糕的体验,在所难免!
  • 后期会放出适合新手练手的demo仓库,适合在此基础上进行二次开发的项目。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容