摘要：使用進行的仿手機的的制作，在上，參考了設計師的作品，作品由個人獨立開發(fā)，源碼中進行了詳細的注釋。關于接入聊天機器人遇到的跨域問題起初，天真的以為官方應該提供了用的接口，然而沒有找到。

使用Vue2進行的仿手機QQ的webapp的制作，在ui上，參考了設計師kaokao的作品，作品由個人獨立開發(fā)，源碼中進行了詳細的注釋。 由于自己也是初學Vue2，所以注釋寫的不夠精簡，請見諒。

目前已實現(xiàn)： 整體數(shù)據的流動，接入聊天機器人，信息左滑刪除，個人信息側邊欄, 搜索好友功能.....

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

側邊欄與個人主頁

滑動刪除

對話功能

搜索

整體ui

一像素
解決方案有好幾種，本來想著用css3縮放解決，后來仔細看了看效果，突然發(fā)現(xiàn)用不到1px邊線，于是不了了之。

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

單位
由于懶，所以使用了 vh，vw，感覺吧，兼容性好像也沒啥大問題。

關于輸如文字時，軟鍵盤彈出，遮擋底部輸入框
使用scrollIntoView()方法，在輸入框獲得焦點時，設置定時器執(zhí)行scrollIntoView(false),輸入框失去焦點時清除定時器，完美解決。

關于聊天時對話內容保持在底部
不知道為啥，scrollTop的值一直是0，斷了我想用js控制內容滾動的想法。于是索性在最下方設置了一錨點，在每次輸入信息或者組件更新時，模擬點擊錨點，這樣就使聊天界面一直保持在最下方了......方法雖然粗暴，但奈何實用，并且暫時未找到scrollTop一直為0的原因（。

關于接入聊天機器人api遇到的跨域問題
起初，天真的以為官方應該提供了jsonp用的接口，然而沒有找到。但是問題總是要解決的，功能也得實現(xiàn)，于是就在webpack的零時Dev中寫了向機器人api的請求，把webapp起的零時服務器做中轉層，然后前端代碼直接請求webapp服務器提供的api，這樣就完美的避開的跨域限制。（項目中用的聊天機器人是圖靈機器人，有需要的自行百度）

關于監(jiān)聽for循環(huán)渲染dom內容是否完成
產生這個需求后，找到了一個方法，nextTick()在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調,然后發(fā)現(xiàn)在遇到的場景中好像，并沒有產生應有的效果，可能是我代碼錯誤，所以為了偷懶，就暫時設置了一個延時一秒執(zhí)行的定時器，后續(xù)會做出修改。

關于左滑刪除
把父級寬度設置為120%然后左右浮動內容，監(jiān)聽touchstart與touchmove事件

關于Vue不能檢測利用索引直接修改的數(shù)組中值的變動
在看教程時對于這部分，沒有太過在意，以至于后面實際寫的時候，不知道哪里出了問題，于是回頭翻萬能的教程，發(fā)現(xiàn)，竟然不能用索引更改數(shù)組中的值，于是恍然大悟....得用splice（）

關于ui的一些吐槽
項目中使用的ui是muse-ui，使用它純粹是因為感覺跟設計稿挺搭，在此之前沒有使用過（之前使用的是餓了嗎的輪子），實際使用時發(fā)現(xiàn)一些小問題，ui的很多接口沒有提供，例如，想在輸入框上設置事件，想要對avatar組件中的圖片設置懶加載等...。以至于想要去修改ui組件，另外muse提供了單組件的加載，但是由于是個人作品。主要做測試用，所以就直接整體引入了。

還有些其他零零碎碎的大小問題，反正這倆天谷歌百度頻率明顯有了增加

主要是對vuex理解了很多，在此之前，只寫過一些簡單的小例子，當時認為，vuex（Flux 架構）好像有種多此一舉的感覺，但是在這個個人項目中，由于數(shù)據量的增加導致了復雜度的幾何度增加，使得Vuex成為了我的必需品，難以想象如果組件間的數(shù)據通信還是使用父子間通信，或者設置一個數(shù)據中心的方法，會是怎么的混亂。

Flux 架構就像眼鏡：您自會知道什么時候需要它。

最后，由于作者只是個新手，所以歡迎交流，寫這篇文章的內容也是希望能夠幫助到一些，正在學習vue中的小伙伴們，另外希望給個Star，作為第一次寫較復雜的個人demo的我來說，還是比較希望得到大家的認可。

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