基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )


Posted in Javascript onMarch 30, 2017

概述

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

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

项目已实现功能

  • 对话功能——想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话。
  • 左滑删除——左滑删除相关消息。
  • 搜索页面——点击右上角搜索按钮,能够进入搜索页面,输入对应的单词或者数字,动态查找好友。
  • 项目中数据流动由vuex进行控制

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

计划中或者即将实现的功能

  • 注册,登陆功能
  • 添加,删除好友,好友列表分组展示
  • 拨号界面,多人聊天、qq群
  • 空间,好友说说,点赞、图片分享
  • 个人设置,切换主题

注:以上内容都是经过考虑,能够较完美的实现的内容,部分功能已经在制作中,由于本项目是个长期的项目,所以对于后续进度感兴趣的朋友也可以关注下,并且如果有想到什么好主意,欢迎告诉我。

桌面及移动端测试

  • 桌面测试: npm run dev 后,打开***开发者工具*** F12,模拟手机预览 Ctrl+Shift+M (Chrome)
  • 移动端测试: npm run dev 后,在cmd命令行中输入ipconfig(win)获取到局域网内ip地址后,生成二维码,然后进行测试(建议微信扫二维码)

动图预览

gif图好像被压缩的太多了,感兴趣的可以clone后查看。

侧边栏与个人主页

基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

搜素组件的动画效果

基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

进入对话框

基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

对话框信息

基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

页Tab切换

基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

更新说明

  • 对更多内容进行详细的注释,修正了左滑删除的一些错误,现在能够对消息进行正常的左滑删除,然后在朋友列表进行对话就能重新生成聊天队列了(可以删除信息后再继续与机器人进行对话了),另外扩大了删除按钮的宽度————3.28

问题反馈

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

感谢

感谢您的来访 ,如果对于您有帮助 ,麻烦您使劲的给个Star吧 ! ^_^

其他说明

  • 由于是抱着边写边学的心态,所以可能会出现些不严谨的地方,或者明显的错误,关于这点,看到请反馈给我,十分感谢。
  • 从零到目前的进度,虽然功能简单,但还是花费了不少时间,把项目上传是希望能够对一些同样正在学习Vue的小伙伴有一些帮助。
  • 由于是第一次独立的写较为完整的Vue项目,所以希望大家给个Star! Q.o,并且欢迎讨论。
  • 此项目会在我Vue的使用过程中不断被完善优化,并且用于测试添加一些新的有趣的功能。

技术栈

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

目录结构

.
├── README.md          
├── build              // 构建服务和webpack配置,转发聊天机器人以及ajax获取用户数据相关内容
├── config             // 项目不同环境的配置
├── dist               // 项目build目录
├── index.html         // 项目入口文件
├── package.json       // 项目配置文件
├── mockdata.json      // 项目模拟数据
├── src
│   ├── common         // 公用的css样式
│   ├── components     // 各种组件
│   ├── router         // 存放路由的文件夹
│   ├── vuex          // 存放Vuex的相关
│   ├── App.Vue        // 模板文件入口
│   └── main.js        // Webpack 预编译入口
├── static             // css js 和图片资源
│  

Build Setup

一个正在制作中的基于vue2全家桶(vue2+vue-router+vuex)的仿QQ项目,移动端webapp,持续更新中·

# 安装
npm install
# 运行(端口8888)
npm run dev
# 发布
npm run build

以上所述是小编给大家介绍的基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 ),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
layui实现动态和静态分页
Apr 28 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
RequireJS用法简单示例
Aug 20 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
基于jquery实现二级联动效果
Mar 30 #jQuery
javascript中的面向对象
Mar 30 #Javascript
详解JavaScript对象的深浅复制
Mar 30 #Javascript
js实现不提示直接关闭网页窗口
Mar 30 #Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
JavaScript实现弹出广告功能
Mar 30 #Javascript
JavaScript如何一次性展示几万条数据
Mar 30 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python中list循环语句用法实例
2014/11/10 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
大学生军训自我评价分享
2013/11/09 职场文书
业务助理岗位职责
2013/11/18 职场文书
女方回门宴答谢词
2014/01/14 职场文书
消防安全宣传标语
2014/06/07 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
如何写好活动总结
2019/06/21 职场文书
教你用python控制安卓手机
2021/05/13 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python