收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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

概述

使用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后查看。

侧边栏与个人主页

查看图片

搜素组件的动画效果

查看图片

进入对话框

查看图片

对话框信息

查看图片

页Tab切换

查看图片

更新说明

对更多内容进行详细的注释,修正了左滑删除的一些错误,现在能够对消息进行正常的左滑删除,然后在朋友列表进行对话就能重新生成聊天队列了(可以删除信息后再继续与机器人进行对话了),另外扩大了删除按钮的宽度————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单页面应用功能(接入聊天机器人 ),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

Angular.JS中的指令引用template与指令当做属性详解
一、引用template对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。指令要生效,那么html头里面要htmllang="en"n

vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码如下是组件代码:templatespan:endTime="endTime":callback="

Angular.js去除页面中显示的空行方法示例
一、前提在开始本文之前先设定,从server取下来的内容是一个html格式的内容,那么如下显示:divclass="article-view-contentcol-md-12col-sm-12col-xs-12no-padding-leftno-p

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号