一款基于Vue2.0高仿微信App的单页应用

Advertisement

概述

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

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

http://git.oschina.net/liuyuantao/vue2-WeChat

手机预览

首选红色,加载较快 <基于阿里云虚拟机 有效期至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的单页应用

进入对话框

一款基于Vue2.0高仿微信App的单页应用

对话框信息

一款基于Vue2.0高仿微信App的单页应用

首页Tab切换

一款基于Vue2.0高仿微信App的单页应用

技术相关

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

示例1( store.js 注解)

一款基于Vue2.0高仿微信App的单页应用

示例2( App.vue 注解)

一款基于Vue2.0高仿微信App的单页应用

问题反馈

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

吐槽

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

Similar Posts:

  • 【高仿微信系列】01、打造自己的微信项目

    本文为个人原创,欢迎转载,但请务必在明显位置注明出处! GitHub地址:https://github.com/motianhuo/wechat 首先,微信毫无疑问已经变成全国最大的社交软件,微信已经成为人们生活中不可或缺的一部分.你是不是睡觉之前做的最后一件事是浏览一下朋友圈,早上醒来第一件事也是刷微信,甚至朋友之间已经不再交换电话号码而只保留微信号了,微信对于人们来说已经不仅仅是一种通讯工具,更成为了一种生活方式. 还记得春节,微信红包的火爆,时不时的盯着微信,生怕漏掉一个红包,还通过摇一摇

  • 【高仿微信系列】03、微信录制小视频

    本文为个人原创,欢迎转载,但请务必在明显位置注明出处! GitHub地址:https://github.com/motianhuo/wechat 微信从6.0版本开始推出小视频功能,随着4G网络的出现,视频将会是一个趋势,他能表达出文字所不能表现的东西,增加了微信的黏性.还记得微信小视频这个功能一推出,如同病毒一样席卷朋友圈. 作为爱美的我们,怎么能把我们的窘态暴露给朋友圈的小伙伴呢,必须正能量!美好的!必须美化! So,录制小视频后,加各种滤镜,炫酷MV主题,妈妈再也不担心我的猪窝了- "小视

  • 高仿微信定位

    闲来无聊,今天雨寒分享出以前做过的基于高德地图的高仿微信的代码.废话不多说先上图 1.首先在高德地图api平台注册账号和权限 sha1值和自己的包名 1.1在自己的清单文件配置自己的key 值 <meta-data android:name="com.amap.api.v2.apikey" android:value="请输入您的用户Key"/> 1.2 在自己的清单文件配置自己的 权限 //地图包.搜索包需要的基础权限 <uses-permiss

  • Android ActionBar应用实战,高仿微信主界面的设计

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

  • 是男人就下100层【第一层】——高仿微信界面(3)

    上一篇<是男人就下100层[第一层]--高仿微信界面(2)>中实现了注册登录界面,这一篇来看看具体的登录界面实现,先来看看界面效果. 登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&

  • 是男人就下100层【第一层】——高仿微信界面(2)

    接着上一篇<是男人就下100层[第一层]--高仿微信界面(1)>,本打算实现上一篇文章中的第二个界面,这一篇先来实现一下登陆界面吧,接下来我们来开始登录界面的制作. 界面布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android

  • Android高仿微信图片选择上传工具

    源码托管地址:https://github.com/SleepyzzZ/photo-selector 话不多说,先上效果图(高仿微信图片选择器): 图片选择界面: 图片预览界面: 批量上传图片: 实现的功能介绍: 1.图片异步加载,使用Glide开源库实现加载; 2.图片的预览界面,支持左右滑动,双击放大浏览; 3.图片批量上传,使用OkHttp来实现与Servlet服务器的通信; 使用方法(Android Studio): 新建工程,File->New->Import Module导入pho

  • ActionBar---ActionBar应用实战,高仿微信主界面的设计

    转载自:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Android

  • Android之Action Bar高仿微信主界面设计

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

  • 聊天气泡框模块源码 (高仿微信、QQ聊天的气泡聊天框)

    模块名称:聊天气泡框 (易语言模块)模块作者:邓学彬(泪闯天涯)模块说明:高仿微信.QQ聊天的气泡聊天框模块发布:模块+模块源码+调用例程实现方法:基于列表框(ListBox)控件,自己计算每个项目位置,自绘项目内容.注意事项:列表框创建时需要加入LBS_OWNERDRAWVARIABLE样式,才能设置各个项目不同高度,并且触发自绘消息(WM_DRAWITEM) 源码下载 CSDN下载:http://download.csdn.net/detail/cometnet/9635799 易语言论坛下