基于Vue2实现的仿手机QQapp（支持对话功能，滑动删除....）—— 聊聊开发过程当中踩到的一些坑与解决方案，以及我的感悟

使用Vue2进行的仿手机QQ的webapp的制做，在ui上，参考了设计师kaokao的做品，做品由我的独立开发，源码中进行了详细的注释。 因为本身也是初学Vue2，因此注释写的不够精简，请见谅。

目前已实现： 总体数据的流动，接入聊天机器人，信息左滑删除，我的信息侧边栏, 搜索好友功能.....

项目地址： https://github.com/jiangqizhe...

动态图预览

侧边栏与我的主页

滑动删除

对话功能

搜索

总体ui

---

以上是项目介绍，后面就进入正题，聊聊开发过程当中踩到的一些坑，解决方案，以及我的感悟

关于踩到的坑与解决方案

一像素
解决方案有好几种，原本想着用css3缩放解决，后来仔细看了看效果，忽然发现用不到1px边线，因而不了了之。

布局,兼容性
主要采用flex布局，参考阮一峰老师的Flex 布局教程。

单位
因为懒，因此使用了 vh，vw，感受吧，兼容性好像也没啥大问题。

关于输如文字时，软键盘弹出，遮挡底部输入框
使用scrollIntoView()方法，在输入框得到焦点时，设置定时器执行scrollIntoView(false),输入框失去焦点时清除定时器，完美解决。

关于聊天时对话内容保持在底部
不知道为啥，scrollTop的值一直是0，断了我想用js控制内容滚动的想法。因而索性在最下方设置了一锚点，在每次输入信息或者组件更新时，模拟点击锚点，这样就使聊天界面一直保持在最下方了......方法虽然粗暴，但奈何实用，而且暂时未找到scrollTop一直为0的缘由（。

关于接入聊天机器人api遇到的跨域问题
起初，天真的觉得官方应该提供了jsonp用的接口，然而没有找到。可是问题老是要解决的，功能也得实现，因而就在webpack的零时Dev中写了向机器人api的请求，把webapp起的零时服务器作中转层，而后前端代码直接请求webapp服务器提供的api，这样就完美的避开的跨域限制。（项目中用的聊天机器人是图灵机器人，有须要的自行百度）

关于监听for循环渲染dom内容是否完成
产生这个需求后，找到了一个方法，nextTick()在下次 DOM 更新循环结束以后执行延迟回调,而后发如今遇到的场景中好像，并无产生应有的效果，多是我代码错误，因此为了偷懒，就暂时设置了一个延时一秒执行的定时器，后续会作出修改。

关于左滑删除
把父级宽度设置为120%而后左右浮动内容，监听touchstart与touchmove事件

关于Vue不能检测利用索引直接修改的数组中值的变更
在看教程时对于这部分，没有太过在乎，以致于后面实际写的时候，不知道哪里出了问题，因而回头翻万能的教程，发现，居然不能用索引更改数组中的值，因而恍然大悟....得用splice（）

关于ui的一些吐槽
项目中使用的ui是muse-ui，使用它纯粹是由于感受跟设计稿挺搭，在此以前没有使用过（以前使用的是饿了吗的轮子），实际使用时发现一些小问题，ui的不少接口没有提供，例如，想在输入框上设置事件，想要对avatar组件中的图片设置懒加载等...。以致于想要去修改ui组件，另外muse提供了单组件的加载，可是因为是我的做品。主要作测试用，因此就直接总体引入了。

还有些其余零零碎碎的大小问题，反正这俩天谷歌百度频率明显有了增长

我的感悟

主要是对vuex理解了不少，在此以前，只写过一些简单的小例子，当时认为，vuex（Flux 架构）好像有种画蛇添足的感受，可是在这个我的项目中，因为数据量的增长致使了复杂度的几何度增长，使得Vuex成为了个人必需品，不可思议若是组件间的数据通讯仍是使用父子间通讯，或者设置一个数据中心的方法，会是怎么的混乱。

Flux 架构就像眼镜：您自会知道何时须要它。

最后，因为做者只是个新手，因此欢迎交流，写这篇文章的内容也是但愿可以帮助到一些，正在学习vue中的小伙伴们，另外但愿给个Star，做为第一次写较复杂的我的demo的我来讲，仍是比较但愿获得你们的承认。

项目地址： https://github.com/jiangqizhe...