最近時(shí)常感嘆道：時(shí)間總是那么的快，轉(zhuǎn)瞬即逝。對于像我這種剛?cè)腴T的小生來講，技術(shù)每天都在更新，框架也層出不窮，有時(shí)候還沒弄懂這個知識大牛們又推出了更好的技術(shù)。當(dāng)然學(xué)習(xí)好的技術(shù)也是十分重要的。但是在學(xué)習(xí)之后怎樣才能夠得到自己想要的呢，一個好的建議便是靜下心來寫點(diǎn)自己的東西，哪怕你完成不了也應(yīng)該盡力去寫，老大曾講過要去實(shí)踐要去獨(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ù)接口

效果圖

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

功能實(shí)現(xiàn)詳解

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

功能一：滴滴首頁

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

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

<template name="sprinner">
    <block wx:if="{{isLoading}}">
       <view class="spinner">
           <view class="bounce1"></view>
           <view class="bounce2"></view>
           <view class="bounce3"></view>
       </view>
    </block>
</template> 

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

 <import  src="/templates/sprinner.wxml" />
        <template is="sprinner" data='{{isLoading}}'>
        </template>
    //通過去設(shè)置isLoading的布爾值來判斷是否需要顯示

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

  <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
        <block wx:for="{{navData}}" wx:for-index="id"  wx:for-item="navItem" wx:key="index">
            <view class="nav-item {{currentTab == id ?'active':''}}"  data-name="{{navItem.name}}" data-current="{{id}}" bindtap="switchNav">{{navItem.name}}</view>
        </block>        
    </scroll-view>

怎樣去改變這個navScrollLeft的值呢？一開始想的是去設(shè)置一下nav的導(dǎo)航的left,然后超出則隱藏?？影?，根本就實(shí)現(xiàn)不了。無法判斷左滑出還是又滑出，后來又想到設(shè)置一個閾值。累真的難寫。好像放棄啊，還是堅(jiān)持下吧，于是想到分開來取寫他們的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)大量的時(shí)間和精力了。我們可是要完成有效時(shí)間創(chuàng)建更大價(jià)值的程序猿呀...

功能二: 起始位置的選擇

為了做這個效果，反反復(fù)復(fù)的看了n遍文檔，真的是比較坑爹。微信小程序api對于地圖這方面講的確實(shí)不怎么詳細(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'//申請自己的開發(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ù)綁定在下面顯示出來，于是就實(shí)現(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  //存放到全局去，供后面計(jì)算價(jià)格使用
        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一樣可以實(shí)現(xiàn)搜索提示功能，但我需要?dú)v史記錄也存在，并且點(diǎn)擊某一項(xiàng)我需要跳轉(zhuǎn)到首頁顯示出來，沒有歷史的頁面體驗(yàn)感極差。是否？這里我是這樣實(shí)現(xiàn)的

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

 <view wx:if="{{!value==''}}" class="destination" wx:for="{{address}}" data-destination="{{item.title}}" data-end="{{item.address}}" bindtap="toIndex" wx:key="{{item.id}}">
 
<view wx:if="{{value==''}}" class="destination" wx:for="{{ entity}}" data-destination="{{item.title}}" data-end="{{item.address}}" bindtap="toIndex" wx:key="{{item.id}}">

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

功能三: 滴滴費(fèi)用計(jì)算

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

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

<repeat wx:if="{{callCart}}">
<repeat wx:else>

計(jì)算價(jià)錢一樣用到了騰訊地圖api獲取兩點(diǎn)之間的距離，剛才把起始點(diǎn)都存放在globalData里，這樣的好處是，可以隨時(shí)得到里面的數(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，計(jì)算兩點(diǎn)的經(jīng)緯度去標(biāo)點(diǎn)，連線。這里也就省略下，詳細(xì)的可以參考我的代碼。