成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue2.0 仿滴滴出行項(xiàng)目

ShevaKuilin / 3791人閱讀

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

Vue2.0 仿滴滴出行項(xiàng)目

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

效果預(yù)覽 

在線預(yù)覽：demo


項(xiàng)目地址：github

主要技術(shù)棧

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

vue-router(SPA)

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

es6、html5、css3

組件庫

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

字體庫

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

css動(dòng)畫庫

animate.css

高德地圖 API

實(shí)現(xiàn)的功能

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

驗(yàn)證彈窗

定位

地址輸入提示

城市選擇切換

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

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

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

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

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

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

問題與思考

接下來談下我在寫這個(gè)項(xiàng)目當(dāng)中遇到一些的問題， 給大家分享下。

1 驗(yàn)證碼彈窗，輸入呼出手機(jī)軟鍵盤的問題。

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

2 第二個(gè)問題是關(guān)于打車通知司機(jī)進(jìn)度條的動(dòng)畫效果

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

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

一開始我并沒有注意這個(gè)問題，因?yàn)楣俜轿臋n上邊建議將異步的方法操作都放到action里邊，所以我基本上形成了每一次異步請求都提交一個(gè)action的慣性思維， 前幾天在看"滴滴 webapp 5.0 Vue 2.0 重構(gòu)經(jīng)驗(yàn)分享"(有興趣寫滴滴的朋友推薦先看下這篇文章)發(fā)現(xiàn)文中有拿輸入補(bǔ)全suggest組件舉例說明(因?yàn)槲覍懙捻?xiàng)目中也要用到地址搜索補(bǔ)全組件,所以特別看了一下)：請求不會(huì)修改store里的數(shù)據(jù),可以組件內(nèi)部消化。也就是說可以在組件內(nèi)部進(jìn)行請求，不需要提交action。


其實(shí)我對vuex中為什么把異步操作封裝在action，把同步操作放在mutations的原因很好奇，于是，在知乎上搜了一下其中的原因(文中尤雨溪給這個(gè)問題作出了回答)
結(jié)語

此項(xiàng)目我將一直在GitHub上進(jìn)行更新，歡迎有興趣的小伙伴一起學(xué)習(xí)，也歡迎各位大牛指出項(xiàng)目的缺點(diǎn)與不足。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87048.html

相關(guān)文章

  • Flutter 仿滴滴出行App，android系統(tǒng)開發(fā)書籍

    摘要：目前本項(xiàng)目僅部分開源已開源內(nèi)容漢字轉(zhuǎn)拼音庫城市列表，索引懸停效果也許是目前最好用的工具類也許是目前最好用的屏幕工具類國際化常用工具類庫成都市詳細(xì)使用請參考倉庫說明。成都市存儲(chǔ)實(shí)體對象示例。成都市北京市詳細(xì)使用請參考倉庫說明。 地圖：采用高德地圖，僅簡單完成了部分功能，基礎(chǔ)地圖，地址檢索，逆地理編碼。 界面：仿...

    番茄西紅柿 評論0 收藏2637

  • 精華閱讀第 9 期 |滴滴出行 iOS 客戶端架構(gòu)演進(jìn)之路

    摘要：架構(gòu)都是演變出來的，沒有最好的架構(gòu)，只有最合適的架構(gòu)最近，滴滴出行平臺(tái)產(chǎn)品中心技術(shù)負(fù)責(zé)人李賢輝接受了的采訪，闡述了滴滴的客戶端架構(gòu)模式與演變過程。李賢輝也是移動(dòng)開發(fā)精英俱樂部中的一員，所以本期重點(diǎn)推薦了這篇文章。 「架構(gòu)都是演變出來的，沒有最好的架構(gòu)，只有最合適的架構(gòu)！」最近，滴滴出行平臺(tái)產(chǎn)品中心 iOS 技術(shù)負(fù)責(zé)人李賢輝接受了 infoQ 的采訪，闡述了滴滴的 iOS 客戶端架構(gòu)模式...

    Eirunye 評論0 收藏0

  • 江義旺：滴滴出行安卓端 finalize time out 的解決方案

    摘要：此前滴滴出行安卓端曾長期受此的影響，每天有一些用戶會(huì)因此遇到，經(jīng)過深度分析，最終找到有效解決方案。方法內(nèi)盡量減少耗時(shí)以及線程同步時(shí)間。減少高優(yōu)先級線程的創(chuàng)建和使用，降低高優(yōu)先級線程的使用率。出品 | 滴滴技術(shù)作者 | 江義旺showImg(https://user-gold-cdn.xitu.io/2019/5/15/16ab95686cf247c1);前言：隨著安卓 APP 規(guī)模越來越大，...

    Betta 評論0 收藏0

  • Vue2.0仿今日頭條

    摘要：基于仿照今日頭條的移動(dòng)端項(xiàng)目源碼地址預(yù)覽地址前言先占個(gè)坑位。項(xiàng)目中還有許多可以完善的地方，不足之處希望小伙伴們可以，我會(huì)在這里更新。目前還沒有全面地測試該項(xiàng)目，有問題提問，大家一起學(xué)習(xí)。 toutiao 基于Vue2.0仿照今日頭條的移動(dòng)端項(xiàng)目 源碼地址：toutiao_Vue2.0 預(yù)覽地址：toutiao_Vue2.0 前言 先占個(gè)坑位。 之前打算做個(gè)東西熟悉vue的使用，由于...

    pepperwang 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<