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

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

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

利器1： 微信開發者工具

利器2: VsCode集終端一起，方便我們后面Wepy、Mpvue小程序進階的學習，可謂非常的nice

利器3： Easy Mock 使用這個網站我們可以快速的模擬出我們需要的數據,方便快捷。點這里就可以看到我的數據了

數據接口

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

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

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

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

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

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

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

  
        
            {{navItem.name}}
                
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 let {endLatitude,endLongitude} = app.globalData  //使用ES6的語法去結構數據   
 
 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) //取一位小數點
            app.globalData.play= play1 //同樣存放在全局里，后面訂單結束支付要用上
            this.setData({
                play1:play1,
            })
          },

對于點擊顯示的轉態這里就不詳細描述，本文只針對一些不容易處理的問題。后面司機服務頁面路線規劃也是通過調用api，計算兩點的經緯度去標點，連線。這里也就省略下，詳細的可以參考我的代碼。

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

    //畫底色
    //畫進度條，傳遞一個step參數，用定時器去繪制

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

parseTime: function(time){  // 這里參考了每個小程序項目中自帶的utils下的util.js，大牛寫的就是簡潔明了
  var time = time.toString();
    return time[1]?time:"0"+time;  //自動歸零補零
},
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++;
}

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

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

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

@import "styles/weui.wxss";

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

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

采坑經歷：點擊轉態如何解決呢？一開始我是這樣想的，用一個icon通過改變它的checked事件去呈現不同的轉態。這樣是可以實現的，但是只能點擊一個，不能多選。痛苦啊！！
一上午輾轉反側，較勁腦汁。反復的去看文檔，終于豁然開朗起來，可以用多重循環去判斷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;
     }
   }
 }

以后我們的頁面或多或少可能需要點擊選擇功能，其實原理都差不多，這點你得到了嗎，以后再做這方面的功能時就能用上了。總感覺還有什么沒寫完一樣：好吧！！

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

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

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

 
    
        ★
        ☆
    

{{starMap[star-1]}}

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

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

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

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

let util = {
   request(opt){
       // 生成對象 結構
       let options = Object.assign({},,opt); //es6的賦值
       let {url,data,} = options //es6的結構從options結構出我們需要的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({})去網上請求我們的數據的數據了。
              

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

功能可能沒有一一列舉出來，由于時間有限，只講述了一些我們日常能使用到的功能。想了解更多功能可以點擊這里查看我github，本小程序我也會不斷更新，喜歡的話可以加入我。同樣也希望你能夠留下您寶貴的意見和建議。

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