摘要：功能三滴滴費(fèi)用計算古人云細(xì)節(jié)決定成敗，一個良好的微信小程序往往就是一些細(xì)節(jié)打動人心，居然是模仿，雖做不到百分百，至少還是很希望一模一樣。

最近時常感嘆道：時間總是那么的快，轉(zhuǎn)瞬即逝。對于像我這種剛?cè)腴T的小生來講，技術(shù)每天都在更新，框架也層出不窮，有時候還沒弄懂這個知識大牛們又推出了更好的技術(shù)。當(dāng)然學(xué)習(xí)好的技術(shù)也是十分重要的。但是在學(xué)習(xí)之后怎樣才能夠得到自己想要的呢，一個好的建議便是靜下心來寫點(diǎn)自己的東西，哪怕你完成不了也應(yīng)該盡力去寫，老大曾講過要去實踐要去獨(dú)立思考，你才能掌握很多你看似懂了卻又很難處理的知識點(diǎn)。學(xué)習(xí)小程序的我已經(jīng)過去了半個月了，前不久滴滴事件頗為轟動，于是便萌發(fā)了這篇文章，打開滴滴的小程序。界面做了很大的變化，對于比較懷舊的我來說，還是挺喜歡以前的界面，于是決定打算自己手寫一個懷舊版滴滴小程序，接下來我會列舉我所遇到的坑和如何解決的方法，希望能夠幫到同樣在奮斗的你...

工欲善其事必先利其器,對于一個前端來說有一個好的工具能夠讓我們事半功倍。要想做好一個小程序我們首先也應(yīng)該先選擇我們的兵器。

利器1： 微信開發(fā)者工具

利器2: VsCode集終端一起，方便我們后面Wepy、Mpvue小程序進(jìn)階的學(xué)習(xí)，可謂非常的nice

利器3： Easy Mock 使用這個網(wǎng)站我們可以快速的模擬出我們需要的數(shù)據(jù),方便快捷。點(diǎn)這里就可以看到我的數(shù)據(jù)了

數(shù)據(jù)接口

說了一大堆，等于沒說，還是回到正題，先來一波效果圖。
這里有更多的圖片等你

接下來我會對滴滴微信小程序主要功能，以及對應(yīng)的數(shù)據(jù)接口和采用的組件/API技術(shù)，描述的詳細(xì)。讓我們離小程序更近一點(diǎn)，傳遞知識，分享收獲

功能描述：頂部導(dǎo)航的制作，點(diǎn)擊相應(yīng)的nav頁面呈現(xiàn)不同的內(nèi)容，并且點(diǎn)擊時能判斷是向前還是向后自動滑出下一個nav,實現(xiàn)動畫過度效果。輸入起始位置模擬等待的時間。
實現(xiàn)原理：

模擬等待時間加載效果，使用組件化的概念，創(chuàng)建一個template文件夾

在需要用到加載效果的地方就可以直接使用，

 
        
    //通過去設(shè)置isLoading的布爾值來判斷是否需要顯示

頭部導(dǎo)航并且點(diǎn)擊時能判斷滑出方向以及自動滑出，我們可以通過一個scroll-left="{{navScrollLeft}}"這個屬性去設(shè)置，點(diǎn)擊nav我們可以動態(tài)的去改變這個值，從而達(dá)到這種效果。

  
        
            {{navItem.name}}
                
    

怎樣去改變這個navScrollLeft的值呢？一開始想的是去設(shè)置一下nav的導(dǎo)航的left,然后超出則隱藏?？影?，根本就實現(xiàn)不了。無法判斷左滑出還是又滑出，后來又想到設(shè)置一個閾值。累真的難寫。好像放棄啊，還是堅持下吧，于是想到分開來取寫他們的js

switchNav(e){
   var cur = e.currentTarget.dataset.current; 
        var singleNavWidth = this.data.windowWindth/4; //獲取屏幕寬度存放放四個nav，
        this.setData({
            navScrollLeft: (cur - 1) * singleNavWidth, //點(diǎn)擊去減少每一個nav的值
            currentTab: cur,
        })  
 switchTab(e){
        var cur = event.detail.current;
        var singleNavWidth =55; //設(shè)置每一個nav的寬度
        this.setData({
            currentTab: cur,
            navScrollLeft: (cur - 1) * singleNavWidth //同樣動態(tài)的去改變這個值
        });
    },

第一次打理這種頂部導(dǎo)航效果的小程序，而卻還帶一點(diǎn)特效的。以后的你如果碰到了就可以回來借鑒借鑒，避免跟我一樣，在這里浪費(fèi)大量的時間和精力了。我們可是要完成有效時間創(chuàng)建更大價值的程序猿呀...

為了做這個效果，反反復(fù)復(fù)的看了n遍文檔，真的是比較坑爹。微信小程序api對于地圖這方面講的確實不怎么詳細(xì)，可能是我這種對地圖處理天生迷茫的人。這里將詳細(xì)的把我遇到的問題一一列舉出來，希望也能夠幫助到今后的你去處理地圖這種東西少踩點(diǎn)坑吧。

這里使用到了關(guān)鍵詞搜索，逆地址解析，地址解析，切換城市列表，建議以后做這個可以了解下騰訊地圖api,還是比較方便的

var QQMapWX = require("../../libs/qqmap-wx-jssdk.js");//導(dǎo)入需要使用的包，創(chuàng)建一個libs文件夾
var qqmapsdk;
qqmapsdk = new QQMapWX({
  key:"DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6xxxx"http://申請自己的開發(fā)者密鑰
});
qqmapsdk.reverseGeocoder({ //逆地址解析api，可以根據(jù)你的經(jīng)緯度去解析位置地址
  location: {
    latitude: latitude,
    longitude: longitude,
},
  success: function (res) {
   conslog.log(res)
    }
        

第一個坑：如何去獲取經(jīng)緯度呢，移動markes?，天吶這要寫多少，對于大牛們來說可能分分分鐘，對于剛?cè)腴T的小生來說難度還是挺大大。沉思良久，突然發(fā)現(xiàn) this.mapCtx.getCenterLocation,移動地圖事件獲取地圖中心的經(jīng)緯度。那么我們可以去固定一個 controls在地圖中心，去移動地圖來解析他的坐標(biāo)位置,將數(shù)據(jù)綁定在下面顯示出來，于是就實現(xiàn)了。emmm代碼如下

 bindregionchange: function(e){  //移動地圖事件
    var that = this
    this.mapCtx.getCenterLocation({ //getCenterLocation可以獲取地圖中點(diǎn)的經(jīng)緯度
      success: function (res) {
        app.globalData.strLatitude=res.latitude  //存放到全局去，供后面計算價格使用
        app.globalData.strLongitude= res.longitude
      qqmapsdk.reverseGeocoder({
        location: {
          latitude:  res.latitude, //通過移動地圖可以得到相應(yīng)中心點(diǎn)的經(jīng)緯度
          longitude: res.longitude,
      },
      success: function (res) {
        that.setData({
          address: res.result.address, //得到的經(jīng)緯度逆地址解析得到我們的位置信息
          bluraddress: res.result.formatted_addresses.recommend
        })
      },
      });

第二個坑： 目的地調(diào)用api一樣可以實現(xiàn)搜索提示功能，但我需要?dú)v史記錄也存在，并且點(diǎn)擊某一項我需要跳轉(zhuǎn)到首頁顯示出來，沒有歷史的頁面體驗感極差。是否？這里我是這樣實現(xiàn)的

qqmapsdk.getSuggestion({ //調(diào)用api實現(xiàn)關(guān)鍵詞搜索提示
      keyword: value, //傳遞input的值，這里要傳value不是"value",剛開始犯困。提示一下
      region: "南昌", 
      success: function(res){
        let data = res.data
      that.setData({
        address: data, 
        value
      })

通過wx:if去判斷輸入框。下面for不同的數(shù)組，填了第一小坑坑。接下來就會去思考，當(dāng)我們點(diǎn)擊搜索的怎么把它加入到我們的歷史中呢？點(diǎn)擊獲取那個值的id然后push到歷史數(shù)組中去，是不是很nice,實現(xiàn)了滴滴起始位置的選擇，當(dāng)然我們這這是冰山一角，強(qiáng)大的背后還需要去探索。

古人云：細(xì)節(jié)決定成敗，一個良好的微信小程序往往就是一些細(xì)節(jié)打動人心，居然是模仿，雖做不到百分百，至少還是很希望一模一樣。

分析分析，首頁點(diǎn)擊呼叫快車頁面不跳轉(zhuǎn)，但要顯示不同的內(nèi)容。是不是也可以跟上面一樣用wx:if來處理呢？沒錯用一個repeat去承載要顯示的內(nèi)容，這樣就可以不在刷星這個小技巧get到了嗎。

計算價錢一樣用到了騰訊地圖api獲取兩點(diǎn)之間的距離，剛才把起始點(diǎn)都存放在globalData里，這樣的好處是，可以隨時得到里面的數(shù)據(jù)

 let {endLatitude,endLongitude} = app.globalData  //使用ES6的語法去結(jié)構(gòu)數(shù)據(jù)   
 
 qqmapsdk.calculateDistance({
            mode: "driving",
            to:[ {
              latitude: endLatitude,
              longitude:endLongitude
          }],
          success: (res)=> {
            var num1 = 8+1.9*(res.result.elements[0].distance/1000)
            var play1 = num1.toFixed(1) //取一位小數(shù)點(diǎn)
            app.globalData.play= play1 //同樣存放在全局里，后面訂單結(jié)束支付要用上
            this.setData({
                play1:play1,
            })
          },

對于點(diǎn)擊顯示的轉(zhuǎn)態(tài)這里就不詳細(xì)描述，本文只針對一些不容易處理的問題。后面司機(jī)服務(wù)頁面路線規(guī)劃也是通過調(diào)用api，計算兩點(diǎn)的經(jīng)緯度去標(biāo)點(diǎn)，連線。這里也就省略下，詳細(xì)的可以參考我的代碼。

怎樣去做這個頁面呢，或于你以后也需要計時器(不是倒計時)或者進(jìn)度條，可以參考這里。
圓形進(jìn)度條有很多實現(xiàn)的方法，但我覺得canvas還是挺方便的。兩個canvas搞定

    //畫底色
    //畫進(jìn)度條，傳遞一個step參數(shù)，用定時器去繪制

第三坑：繪制canvas沒有問題，文檔也給的十分的詳細(xì)，但是里面那個計時器怎么制作呢？我只需要分秒，而卻又不是倒計時，并且還要跟外面保持一致。前端這么心酸的嗎？啊，硬著頭皮去寫吧。搜索了下資源發(fā)現(xiàn)網(wǎng)上這方面的資料真的少。沒有辦法，bug還是要解決的。你是否也遇到過這樣的問題，或于以后呢！記得回來找我...

parseTime: function(time){  // 這里參考了每個小程序項目中自帶的utils下的util.js，大牛寫的就是簡潔明了
  var time = time.toString();
    return time[1]?time:"0"+time;  //自動歸零補(bǔ)零
},
countInterval: function () {
 var curr = 0;
 this.setData({
     time: this.parseTime(timer.getMinutes())+":"+this.parseTime(timer.getSeconds()), //格式化下時間，取分秒
          });
      timer.setMinutes(curr/60); //秒針60了自動加1
        timer.setSeconds(curr%60); //60后歸零
        curr++;
}

對于同步，那肯定很簡單呀，放在一個定時器里就夠了。點(diǎn)這里查看源碼

有打車就應(yīng)該有取消對吧，一看取消行程頁面就有點(diǎn)端倪。這些樣式需要自己去寫嗎？要學(xué)會說no，這里就以這個為例子，講下我在小程序開始中如何使用weui快速去搭建一個頁面效果。

這里給一些我覺得還行的資料：在小程序中可以直接使用的例子 weui小程序官方文檔，
要注明的一點(diǎn)，引用weui要在相應(yīng)的文件夾里或全局的wxss引用它的css,可能多個頁面都需要用到，這里在全局引用

@import "styles/weui.wxss";

在app.wxss中引用這段代碼就可以開始你的weui之旅了，比較啰嗦的貼了這么長的一段代碼。暗示你要用weui去快速開發(fā)你的小程序了!

   //使用weui可以直接復(fù)制套上去用就好了
           
               
                   
                   {{item.name}}
                    //點(diǎn)擊是顯示紅色的√
                        
                   
                    //不點(diǎn)擊是顯示空圓
                       
                   
               
           
           
               
                   點(diǎn)擊查看更多原因
               
               
           
       

采坑經(jīng)歷：點(diǎn)擊轉(zhuǎn)態(tài)如何解決呢？一開始我是這樣想的，用一個icon通過改變它的checked事件去呈現(xiàn)不同的轉(zhuǎn)態(tài)。這樣是可以實現(xiàn)的，但是只能點(diǎn)擊一個，不能多選。痛苦?。?！
一上午輾轉(zhuǎn)反側(cè)，較勁腦汁。反復(fù)的去看文檔，終于豁然開朗起來，可以用多重循環(huán)去判斷checked。哎，js還是超級重要啊。話不多說

bindReasonChange(e){
 let reasons = this.data.reasons;
 let strVal = e.detail.value;
 for(var i = 0, lenI = reasons.length; i < lenI; ++i){
   reasons[i].checked = false;
   for(var j = 0, lenJ = strVal.length; j < lenJ; ++j){
     if(reasons[i].value==strVal[j]){
       reasons[i].checked =true;
       break;
     }
   }
 }

以后我們的頁面或多或少可能需要點(diǎn)擊選擇功能，其實原理都差不多，這點(diǎn)你得到了嗎，以后再做這方面的功能時就能用上了?？偢杏X還有什么沒寫完一樣：好吧！！

在做點(diǎn)擊加載更多的，我是這樣打理的。wx:for一個數(shù)組然后去截取他的下邊顯示。點(diǎn)擊加載更多時全部for這個數(shù)組。然后在用定時器設(shè)置wx.showLoading()顯示加載更多效果，就有了那種既視感

享受了一下滴滴帶來的快捷與方便，感嘆技術(shù)的改變生活啊。同樣評分也是app得到用戶最終反饋的直接來源，因此我們也不容錯過這么重要的一點(diǎn)，但是打理的細(xì)節(jié)也是十分的坑啊。

如何去寫一個評分呢，點(diǎn)擊小星星去改變它的轉(zhuǎn)態(tài)，還要根據(jù)第幾顆星來判斷前面的也要點(diǎn)亮。真的挺頭痛的，網(wǎng)上不乏小程序評分功能實現(xiàn)，但大多數(shù)都寫的不是復(fù)雜就是很深奧，對于一個小生來講，簡直就是天書呀。就跟老大說的一樣，很多東西都是靠細(xì)節(jié)去成長的，想想覺得很容易實現(xiàn)，不就一個status改變一下圖片嗎？但是打理起來真的見功夫。費(fèi)盡心思去尋找一種簡單粗暴的又可以達(dá)到這種效果的方式。

 
    
        ★
        ☆
    

{{starMap[star-1]}}

不用圖片，用字體去解決這個問題就方便多了，只要改變顏色就達(dá)到了評分效果。而且代碼量非常的少，不知道這樣會不會被打死。

 myStarChoose(e) {
      let star = parseInt(e.target.dataset.star) || 0;
      this.setData({
          star //名字一樣可以省略
      });
  },

把這個放在最后來講，肯定是特別重要的知識點(diǎn)，對于開發(fā)的你來說這個比上面功能的描述更有幫助，或于你已經(jīng)知道并且處理的更好，這里只為了幫助那些跟我一樣入門不久的小生盡量少走點(diǎn)歪路吧。

1、 數(shù)據(jù)請求的封裝是搭建一個良好程序的前提。在小程序中我們無時無刻不需要去請求數(shù)據(jù)。到處充斥做異步請求，讓我們處理起來很頭疼。這一點(diǎn)更需要發(fā)時間去打理的，隨著es6慢慢的普及我們也應(yīng)該把這些好的東西用到我們的代碼中promise,把異步編程同步。推薦廖雪峰老師的文章，把我的封裝的貼出來，大家以后可以直接拷過去使用了

let util = {
   request(opt){
       // 生成對象 結(jié)構(gòu)
       let options = Object.assign({},,opt); //es6的賦值
       let {url,data,} = options //es6的結(jié)構(gòu)從options結(jié)構(gòu)出我們需要的url，data
       return new Promise((resolve,reject)=>{
           wx.request({
               url,
               data,
               success(res){
                   resolve(res.data)
               },
               fail(err){
                   reject(err)
               }
           })
       })
   }
}
export default util  //向外輸出模板，在外面可以直接使用util.request({})去網(wǎng)上請求我們的數(shù)據(jù)的數(shù)據(jù)了。
              

2、還有一些就是包的管理，比如把我們頁面中可能一樣的東西抽出來創(chuàng)建一個template文件夾，把一些一樣的wxss也可以抽出來新建一個styles，在需要使用到的地方就@import就可以了，比如滴滴的按鈕吧，其實都一樣，還有頁面底部的橫條都可以封裝起來，用的時候直接導(dǎo)入就行了。

功能可能沒有一一列舉出來，由于時間有限，只講述了一些我們?nèi)粘Ｄ苁褂玫降墓δ?。想了解更多功能可以點(diǎn)擊這里查看我github，本小程序我也會不斷更新，喜歡的話可以加入我。同樣也希望你能夠留下您寶貴的意見和建議。

作為一個程序猿挺不容易的，做一個前端程序猿更加不容易。技術(shù)日新月異。每天要去攝取更多的技術(shù)來源，心有千言，難于罄書。但我們都是熱于分享的人，能夠把自己遇到的問題以及如何解決的方式寫出來，總是希望這樣可以幫助到更多同樣遇到這類問題的你，我，他。或于這就是社區(qū)的力量，這就是優(yōu)秀程序員的品質(zhì)吧。小程序的學(xué)習(xí)依舊要鉚足勁的去學(xué)習(xí)，后面還有wepy,Mpvue等新技術(shù)在等著我們，我已經(jīng)踏上了那片領(lǐng)地的征程，日后也會發(fā)布遇到的問題、bug和我的作品。希望對你有所幫助，我們的口號是熱于分享，熱于創(chuàng)作。Let"s start a new journey?。?！