基于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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
微信小程序 navbar实例详解
May 11 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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多线程类及用法实例
2014/12/03 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python中的django是做什么的
2020/07/31 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
举例讲解Python装饰器
2020/12/24 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
先进人物事迹材料
2014/12/29 职场文书
七年级话题作文之执着
2019/11/19 职场文书