类似滴滴打车小程序系统开发案例这篇文章将针对滴滴微信小程序主要功效，，，，以及对应的数据接口和接纳的组件/API手艺，，，，形貌的详细。。。。。

功效一：滴滴首页

功效形貌：顶部导航的制作，，，，点击响应的nav页面泛起差别的内容，，，，并且点击时能判断是向前照旧向后自动滑出下一个nav,实现动画太过效果。。。。。输入起始位置模拟期待的时间。。。。。
实现原理：

• 模拟期待时间加载效果，，，，使用组件化的看法，，，，建设一个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>
    //通已往设置isLoading的布尔值来判断是否需要显示

• 头部导航并且点击时能判断滑出偏向以及自动滑出，，，，我们可以通过一个scroll-left="{{navScrollLeft}}"这个属性去设置，，，，点击nav我们可以动态的去改变这个值，，，，从而抵达这种效果。。。。。

  <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的值呢？？？一最先想的是去设置一下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'//申请自己的开发者密钥
});
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, //获得的经纬度逆地点剖析获得pp电子位置信息
          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
      })

 <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差别的数组，，，，填了第一小坑坑。。。。。接下来就会去思索，，，，当我们点击搜索的怎么把它加入到pp电子历史中呢？？？点击获取谁人值的id然后push到历史数组中去，，，，是不是很nice,实现了滴滴起始位置的选择，，，，虽然我们这这是冰山一角，，，，强盛的背后还需要去探索。。。。。

功效三: 滴滴用度盘算

昔人云：细节决议成败，，，，一个优异的微信小程序往往就是一些细节感感人心，，，，居然是模拟，，，，虽做不到百分百，，，，至少照旧很希望一模一样。。。。。

剖析剖析，，，，首页点击呼叫快车页面不跳转，，，，但要显示差别的内容。。。。。是不是也可以跟上面一样用wx:if来处理呢？？？没错用一个repeat去承载要显示的内容，，，，这样就可以不在刷星这个小技巧get到了吗。。。。。

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

盘算价钱一样用到了腾讯地图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,
            })
          },