基于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 相关文章推荐
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python库matplotlib绘制坐标图
2019/10/18 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
详解python polyscope库的安装和例程
2020/11/13 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
大学毕业生求职自荐信
2014/02/20 职场文书
团队会宣传标语
2014/10/09 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
办公室文员岗位职责
2015/02/04 职场文书
企业财务管理制度范本
2015/08/04 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript