資訊專欄INFORMATION COLUMN
摘要：仿滴滴出行項目最近，各大社區出現很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發現，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。
Vue2.0 仿滴滴出行項目
最近，各大社區出現很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。
效果預覽在線預覽：demo
項目地址：github
主要技術棧
vue2.0(數據綁定)
vue-router(SPA)
vuex(管理組件狀態，實現組件通信）
es6、html5、css3
組件庫
mint-ui(有一些組件特別好用，方便快速開發)
字體庫
vue-awasome(完美支持font-awasome，此外還可以自定義組件)
css動畫庫
animate.css
高德地圖 API
實現的功能登錄/用戶本地存儲、退出(localStarage本地存儲)
驗證彈窗
定位
地址輸入提示
城市選擇切換
實現出租車下單、呼叫、以及接單(此處處理上利用了假數據)
核心功能組件實現就我目前實現的功能來看，核心組件有定位組件、地址選擇組件、地圖組件和打車下單組件
定位、選址和地圖組件的實現主要是結合了高德地圖的開放api來獲取數據。高德地圖JavaScript API在核心功能之外提供了豐富的控件、服務插件以及工具插件，比如工具條、比例尺、路線規劃、高級信息窗體等等，通過AMap.pluging( )可以將對應的功能加載進來，更加詳細的用法的可以參考開發平臺的api。目前項目中引入了如下三個插件
["AMap.Geolocation", "AMap.Autocomplete","AMap.Geocoder"]
其中打車下單組件目前只是實現了界面，數據方面還未全部實現。樓主將在接下來的版本繼續完善。
問題與思考接下來談下我在寫這個項目當中遇到一些的問題， 給大家分享下。
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上進行更新，歡迎有興趣的小伙伴一起學習，也歡迎各位大牛指出項目的缺點與不足。
最后插播一個小廣告：大四應屆生，求職中，希望各位大佬給個機會。這是我的簡歷
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87048.html
摘要：目前本項目僅部分開源已開源內容漢字轉拼音庫城市列表，索引懸停效果也許是目前最好用的工具類也許是目前最好用的屏幕工具類國際化常用工具類庫成都市詳細使用請參考倉庫說明。成都市存儲實體對象示例。成都市北京市詳細使用請參考倉庫說明。 地圖：采用高德地圖，僅簡單完成了部分功能，基礎地圖，地址檢索，逆地理編碼。 界面：仿...
摘要：架構都是演變出來的，沒有最好的架構，只有最合適的架構最近，滴滴出行平臺產品中心技術負責人李賢輝接受了的采訪，闡述了滴滴的客戶端架構模式與演變過程。李賢輝也是移動開發精英俱樂部中的一員，所以本期重點推薦了這篇文章。 「架構都是演變出來的，沒有最好的架構，只有最合適的架構！」最近，滴滴出行平臺產品中心 iOS 技術負責人李賢輝接受了 infoQ 的采訪，闡述了滴滴的 iOS 客戶端架構模式...
摘要：此前滴滴出行安卓端曾長期受此的影響，每天有一些用戶會因此遇到，經過深度分析，最終找到有效解決方案。方法內盡量減少耗時以及線程同步時間。減少高優先級線程的創建和使用，降低高優先級線程的使用率。出品 | 滴滴技術作者 | 江義旺showImg(https://user-gold-cdn.xitu.io/2019/5/15/16ab95686cf247c1);前言：隨著安卓 APP 規模越來越大，...
摘要：基于仿照今日頭條的移動端項目源碼地址預覽地址前言先占個坑位。項目中還有許多可以完善的地方，不足之處希望小伙伴們可以，我會在這里更新。目前還沒有全面地測試該項目，有問題提問，大家一起學習。 toutiao 基于Vue2.0仿照今日頭條的移動端項目 源碼地址：toutiao_Vue2.0 預覽地址：toutiao_Vue2.0 前言 先占個坑位。 之前打算做個東西熟悉vue的使用，由于...
閱讀 865·2021-11-15 11:37
閱讀 3604·2021-11-11 16:55
閱讀 3270·2021-11-11 11:01
閱讀 998·2019-08-30 15:43
閱讀 2743·2019-08-30 14:12
閱讀 681·2019-08-30 12:58
閱讀 3389·2019-08-29 15:19
閱讀 2023·2019-08-29 13:59
