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

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

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

項(xiàng)目地址： https://github.com/jiangqizhe...

側(cè)邊欄與個(gè)人主頁

滑動刪除

對話功能

搜索

整體ui

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

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

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

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

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

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

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

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

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

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

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

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

Flux 架構(gòu)就像眼鏡：您自會知道什么時(shí)候需要它。

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

項(xiàng)目地址： https://github.com/jiangqizhe...