类似滴滴打车小程序系统开发的方法

这篇文章主要介绍“类似滴滴打车小程序系统开发的方法”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“类似滴滴打车小程序系统开发的方法”文章能帮助大家解决问题。

功能一：滴滴首页

功能描述：顶部导航的制作，点击相应的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, //得到的经纬度逆地址解析得到我们的位置信息          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不同的数组，填了第一小坑坑。接下来就会去思考，当我们点击搜索的怎么把它加入到我们的历史中呢？点击获取那个值的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,            })          },

关于“类似滴滴打车小程序系统开发的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。