使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释。 由于自己也是初学Vue2,所以注释写的不够精简,请见谅。

项目地址 https://github.com/jiangqizheng/vue-MiniQQ

  • 项目已实现功能

    • 对话功能——想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话。

    • 左滑删除——左滑删除相关消息。

    • 搜索页面——点击右上角搜索按钮,能够进入搜索页面,输入对应的单词或者数字,动态查找好友。

    • 项目中数据流动由vuex进行控制

      注:对于那句Flux 架构就像眼镜:您自会知道什么时候需要它。感觉好像懂了点什么。

  • 动态图预览

  侧边栏及个人主页

  

  滑动删除

  

  与机器人进行对话

  

  搜索界面

  

  tab键切换页面,整体ui

  

  技术栈

    •   vue-cli
    •   vue2
    •   vue-router
    •   vuex
    •   axios
    •   stylus
    •   webpack2
    •   muse-ui

  

  其他说明

    •   由于是抱着边写边学的心态,所以可能会出现些不严谨的地方,或者明显的错误,关于这点,看到请反馈给我,十分感谢。

    •   从零到目前的进度,虽然功能简单,但还是花费了不少时间,把项目上传是希望能够对一些同样正在学习Vue的小伙伴有一些帮助。

    •   由于是第一次独立的写较为完整的Vue项目,所以希望大家给个Star! Q.o,并且欢迎讨论。

      最后,项目地址 https://github.com/jiangqizheng/vue-MiniQQ

      欢迎交流,希望能对vue学习中的小伙伴有一定的借鉴意义,由于是作者第一次写较复杂的个人项目,所以代码有不完善的地方请谅解,目前项目正在更新中,可以持续关注进度哦。

vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)的更多相关文章

  1. [vue插件]基于vue2.x的电商图片放大镜插件

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...

  2. 高仿手机QQ音乐之——Android带进度条的开关

    最新版的手机QQ音乐体验确实不错,发现首页播放按钮能够显示歌曲当前进度条.认为挺有新意.效果例如以下: 自己琢磨了下.能够用自己定义组件来实现,试着做了一下.效果例如以下: 整理了下思路.大概设计流程 ...

  3. iOS浏览器不能打开手机QQ客服与指定用户聊天界面

    这个问题是我在公司需求的时候遇到的,QQ推广工具网站获取的链接在苹果自带浏览器没法打开到聊天界面,是因为safair在打开到app store的时候把参数给丢了,app store再打开到QQ的时候就 ...

  4. 基于vue2.0实现仿百度前端分页效果(二)

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...

  5. 基于vue2.0实现仿百度前端分页效果(一)

    前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...

  6. 一款基于vue2.0的分页组件---写在页面内

    通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...

  7. Android之高仿手机QQ聊天

    源代码下载 转载请注明出处,谢谢! 最终版已上传.优化下拉刷新.增加来消息声音提示.主界面改成ViewPager,实现左右滑动.新增群组.最近会话显示条数,开始上班了,不再修改了.谢谢! 国庆这几天, ...

  8. 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    源码地址: https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch ...

  9. Android:仿手机QQ朋友动态ListView

    1.介绍: 使用此博客XListView模仿Android版本QQ朋友动态ListView效果.效果如下面的截图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

随机推荐

  1. static的加载先后顺序

    1.静态变量的声明和赋值是分开的,静态变量会先被声明,赋值操做被放在了静态代码块中. 2.静态变量的赋值和静态代码块的执行顺序和代码的先后书写顺序相关. 3.静态代码块优先执行,其次构造方法,最后普通 ...

  2. JVM内存

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ,   VM Stack( ...

  3. C++用new创建对象和不用new创建对象的区别解析

    在C++用new创建对象和不用new创建对象是有区别的,不知你是否清楚的了解它们到底有什么样的区别呢?下面小编就用示例来告诉大家吧,需要的朋友可以过来参考下   我们都知道C++中有三种创建对象的方法 ...

  4. JAVA设计模式:模板设计模式

    1.模板设计模式,是为了体现继承的作用.它主要的作用就是在类中定义一些公共的方法和标准,而其具体的实现则叫给其子类来根据子类具体的行为来实现:因为模板设计模式中必经还有一些自己的方法不是抽象的方法,只 ...

  5. iOS上传代码到Github平台

    对于开发人员来说,很多时候想把自己好的代码 demo放到一个公共平台,与大家交流,Github就是一个不错的平台,下面给大家说说Github的具体使用方法. 第一步.申请Github账号.https: ...

  6. P1137 旅行计划-----洛谷

    用了STL,其他的没什么,赤裸裸的拓扑排序 下面给出代码 #include<cstdio> #include<iostream> #include<vector> ...

  7. SQLHELPER 帮助类

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  8. AR入门系列-02-Vuforia在Unity3d编辑器的使用

    到unity3d的官网下载 地址:https://store.unity.com/?_ga=1.1496562.231401799.1487590551 个人版功能齐全免费,个人开发者基本够用,本案例 ...

  9. 《深入理解Java虚拟机》学习笔记之工具

    善于利用工具,不仅可以加快我们分析数据,还可以快速定位和解决问题.现在我们就来看看虚拟机性能监控和故障处理工具. 在JDK的bin目录可以看到sun免费送给了我们很多小工具,这些工具虽然小巧但功能强大 ...

  10. 自定义cell设置现价,原价(加横线)

    原价,现价分别是连个label.这两个label不能直接限制死他们的宽度,因为他们的宽度不确定,而由于lable的特殊性,不设置它的宽度约束时,宽度取决于文字的内容,所以两个lable的约束设置好一些 ...