Vue2.0 仿滴滴出行項目

ShevaKuilin 發(fā)布于2019-08-21 11:44 / 3793人閱讀

摘要：仿滴滴出行項目最近，各大社區(qū)出現(xiàn)很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發(fā)現(xiàn)，輸入的時候居然調(diào)不出軟鍵盤，寫項目的時候沒考慮到設(shè)備問題，簡直是大大的失誤。也就是說可以在組件內(nèi)部進行請求，不需要提交。

Vue2.0 仿滴滴出行項目

最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。

效果預(yù)覽

在線預(yù)覽：demo
項目地址：github

主要技術(shù)棧

vue2.0(數(shù)據(jù)綁定)

vue-router(SPA)

vuex(管理組件狀態(tài)，實現(xiàn)組件通信）

es6、html5、css3

組件庫

mint-ui(有一些組件特別好用，方便快速開發(fā))

字體庫

vue-awasome(完美支持font-awasome，此外還可以自定義組件)

css動畫庫

animate.css

高德地圖 API

實現(xiàn)的功能

登錄/用戶本地存儲、退出(localStarage本地存儲)

驗證彈窗

定位

地址輸入提示

城市選擇切換

實現(xiàn)出租車下單、呼叫、以及接單(此處處理上利用了假數(shù)據(jù))

核心功能組件實現(xiàn)

就我目前實現(xiàn)的功能來看，核心組件有定位組件、地址選擇組件、地圖組件和打車下單組件

定位、選址和地圖組件的實現(xiàn)主要是結(jié)合了高德地圖的開放api來獲取數(shù)據(jù)。高德地圖JavaScript API在核心功能之外提供了豐富的控件、服務(wù)插件以及工具插件，比如工具條、比例尺、路線規(guī)劃、高級信息窗體等等，通過AMap.pluging( )可以將對應(yīng)的功能加載進來，更加詳細的用法的可以參考開發(fā)平臺的api。目前項目中引入了如下三個插件

["AMap.Geolocation", "AMap.Autocomplete","AMap.Geocoder"]

其中打車下單組件目前只是實現(xiàn)了界面，數(shù)據(jù)方面還未全部實現(xiàn)。樓主將在接下來的版本繼續(xù)完善。

問題與思考

接下來談下我在寫這個項目當中遇到一些的問題，給大家分享下。

1 驗證碼彈窗，輸入呼出手機軟鍵盤的問題。

由于我在寫驗證碼彈窗的時候，參考了滴滴本身驗證碼的彈窗結(jié)構(gòu)，用了4個span來作為驗證碼輸入框。然后，我想了一下大概的思路，可以利用vue的數(shù)據(jù)綁定和鍵盤監(jiān)聽事件輕松的搞定驗證碼輸入。可是，后來在手機上發(fā)現(xiàn)，輸入的時候居然調(diào)不出軟鍵盤，寫項目的時候沒考慮到設(shè)備問題，簡直是大大的失誤。接著我往輸入框中添加了一個input標簽，并且設(shè)為不可見，然后觸發(fā)軟鍵盤。原本以為完美解決，可以發(fā)現(xiàn)輸入沒有出現(xiàn)數(shù)字，我仔細一想，vue不是數(shù)據(jù)綁定嗎？怎么沒效果，搗鼓半天數(shù)據(jù)問題，結(jié)果，發(fā)現(xiàn)竟然又是我考慮不周，老想著vue可以數(shù)據(jù)綁定，沒想鍵盤監(jiān)聽在手機上無效，崩潰，再次敗給了自己。突然想起一句話：代碼寫不好不是不會寫，而是缺乏思考。

2 第二個問題是關(guān)于打車通知司機進度條的動畫效果

這個動畫實際上就兩部分，一個是圓環(huán)進度條，第二個是倒計時那個圓形繞著圓環(huán)進度條運動。
關(guān)于實現(xiàn)圓環(huán)進度條我推薦這篇文章純svg實現(xiàn)進度條,文章有個具體的實現(xiàn)方案，相關(guān)的屬性的詳細介紹需要自行百度。關(guān)于繞圓環(huán)運動的寫法和思路百度上介紹了很多種，什么運動計算還把相應(yīng)的js都寫出來，后來仔細想想還是用css的rotate簡單的處理了，不是我不喜歡思考，只是我認為能用簡單代碼實現(xiàn)的功能就不去搞讓人難懂的代碼了。

3 第三個問題是關(guān)于數(shù)據(jù)請求是否都需要提交action

一開始我并沒有注意這個問題，因為官方文檔上邊建議將異步的方法操作都放到action里邊，所以我基本上形成了每一次異步請求都提交一個action的慣性思維， 前幾天在看"滴滴 webapp 5.0 Vue 2.0 重構(gòu)經(jīng)驗分享"(有興趣寫滴滴的朋友推薦先看下這篇文章)發(fā)現(xiàn)文中有拿輸入補全suggest組件舉例說明(因為我寫的項目中也要用到地址搜索補全組件,所以特別看了一下)：請求不會修改store里的數(shù)據(jù),可以組件內(nèi)部消化。也就是說可以在組件內(nèi)部進行請求，不需要提交action。
其實我對vuex中為什么把異步操作封裝在action，把同步操作放在mutations的原因很好奇，于是，在知乎上搜了一下其中的原因(文中尤雨溪給這個問題作出了回答)

結(jié)語

此項目我將一直在GitHub上進行更新，歡迎有興趣的小伙伴一起學習，也歡迎各位大牛指出項目的缺點與不足。

最后插播一個小廣告：大四應(yīng)屆生，求職中，希望各位大佬給個機會。這是我的簡歷