基於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...