Vue2.0 仿滴滴出行項目

Vue2.0 仿滴滴出行項目

最近，各大社區出現不少小夥伴的vue項目，趁着這股熱潮我也用vue擼了一個滴滴出行的項目。

效果預覽

在線預覽：demo

項目地址：github

• 主要技術棧

  • vue2.0(數據綁定)

  • vue-router(SPA)

  • vuex(管理組件狀態，實現組件通訊）

  • es六、html五、css3

• 組件庫

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

• 字體庫

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

• css動畫庫

animate.css

• 高德地圖 API

實現的功能

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

• 驗證彈窗

• 定位

• 地址輸入提示

• 城市選擇切換

• 實現出租車下單、呼叫、以及接單(此到處理上利用了假數據)

核心功能組件實現

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

• 定位、選址和地圖組件的實現主要是結合了高德地圖的開放api來獲取數據。高德地圖JavaScript API在覈心功能以外提供了豐富的控件、服務插件以及工具插件，好比工具條、比例尺、路線規劃、高級信息窗體等等，經過AMap.pluging( )能夠將對應的功能加載進來，更加詳細的用法的能夠參考開發平臺的api。目前項目中引入了以下三個插件

  <code>['AMap.Geolocation', 'AMap.Autocomplete','AMap.Geocoder']</code>

• 其中打車下單組件目前只是實現了界面，數據方面還未所有實現。樓主將在接下來的版本繼續完善。

問題與思考

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

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

因爲我在寫驗證碼彈窗的時候，參考了滴滴自己驗證碼的彈窗結構，用了4個span來做爲驗證碼輸入框。而後，我想了一下大概的思路，能夠利用vue的數據綁定和鍵盤監聽事件輕鬆的搞定驗證碼輸入。但是，後來在手機上發現，輸入的時候竟然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。接着我往輸入框中添加了一個input標籤，而且設爲不可見，而後觸發軟鍵盤。本來覺得完美解決，能夠發現輸入沒有出現數字，我仔細一想，vue不是數據綁定嗎？怎麼沒效果，搗鼓半天數據問題，結果，發現居然又是我考慮不周，老想着vue能夠數據綁定，沒想鍵盤監聽在手機上無效，崩潰，再次敗給了本身。忽然想起一句話：代碼寫很差不是不會寫，而是缺少思考。

2 第二個問題是關於打車通知司機進度條的動畫效果

這個動畫實際上就兩部分，一個是圓環進度條，第二個是倒計時那個圓形繞着圓環進度條運動。
關於實現圓環進度條我推薦這篇文章純svg實現進度條,文章有個具體的實現方案，相關的屬性的詳細介紹須要自行百度。關於繞圓環運動的寫法和思路百度上介紹了不少種，什麼運動計算還把相應的js都寫出來，後來仔細想一想仍是用css的rotate簡單的處理了，不是我不喜歡思考，只是我認爲能用簡單代碼實現的功能就不去搞讓人難懂的代碼了。

3 第三個問題是關於數據請求是否都須要提交action

一開始我並無注意這個問題，由於官方文檔上邊建議將異步的方法操做都放到action裏邊，因此我基本上造成了每一次異步請求都提交一個action的慣性思惟， 前幾天在看"滴滴 webapp 5.0 Vue 2.0 重構經驗分享"(有興趣寫滴滴的朋友推薦先看下這篇文章)發現文中有拿輸入補全suggest組件舉例說明(由於我寫的項目中也要用到地址搜索補全組件,因此特別看了一下)：請求不會修改store裏的數據,能夠組件內部消化。也就是說能夠在組件內部進行請求，不須要提交action。

其實我對vuex中爲何把異步操做封裝在action，把同步操做放在mutations的緣由很好奇，因而，在知乎上搜了一下其中的緣由(文中尤雨溪給這個問題做出了回答)

結語

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

最後插播一個小廣告：大四應屆生，求職中，但願各位大佬給個機會。這是個人簡歷