基于mpvue的仿滴滴出行小程序

初衷

本人最近一直在研究小程序，一个偶然的机会发现了mpvue框架，刚好本人对vue十分喜爱，就决定入坑了。曾经在掘金看过一个仿旧版滴滴的小程序，感觉挺不错的，但它是基于原生小程序的，所以就决定花了一段时间用mpvue进行重写。下面就开始正餐了。

效果图

更多效果请查看 github.com/QinZhen001/…

目录结构

┣━ api # 存放网络请求相关
┣━ common ●                
          ┣━ constant               //常量
          ┣━ css                    //weui.css
          ┣━ less                   //通用less样式与变量
          ┗━ lib                     //第三方库 qqmap-wx-jssdk.js
┣━ components  ● 抽取出来的组件
               ┣━ addressList.vue            
               ┣━ common-footer.vue                
               ┣━ driver-header.vue           
               ┣━ loading-sprinner.vue        
               ┣━ search-bar.vue              
               ┗━ star.vue               
┣━ pages ● 页面
         ┣━ cars                    //选择车    
         ┣━ cityChoose              //选择城市
         ┣━ destination             //选择目的地
         ┣━ evaluation              //评价    
         ┣━ index                   //主页面
         ┣━ login                   //登录
         ┣━ orderCancel             //订单取消
         ┣━ orderClose              //订单关闭
         ┣━ orderService            //订单服务
         ┣━ orderWhy                //询问原因
         ┣━ starting                //选择出发地点
         ┗━ wait                     //等待
┣━ store ● 存放vuex相关
         ┣━ index.js            
         ┣━ mutation-types.js               
         ┣━ mutations.js           
         ┗━ state.js        
┣━ utils 工具类
┣━ App.vue
┣━ main.js
┗━ static # 静态资源，存放图片复制代码

vuex数据

const state = {
  curNavIndex: 0,   //当前头部导航索引
  phone: '',         //登录号码
  curCity: '',      //当前所在的城市
  startPlace: '出发地', //出发地
  startFormattedPlace: '', //更具人性化的描述的出发地
  startPosition: [],        //包含startLatitude和startLongitude
  destination: '你要去哪儿', //目的地
  endPosition: [],      //包含endLatitude和endLongitude
  driver: {},       //司机信息 包含Cartnumber,cart,id,name,stars
  cost: 0       //花费
}复制代码

功能详情

头部导航自动滑动

为了让头部导航点击时能自动滑出，滑动swiper的同时头部导航跟着滑动，在cars页面选中车时回退到index页面时头部导航自动滑动，我在vuex中维护了一个索引值curNavIndex。根据不同的curNavIndex对scroll-view设置不同的scroll-left值。

那么如何设置准确的scroll-left值呢？

微信小程序无法进行Dom操作，所以无法动态拿到元素宽度。所以我根据头部导航每项的宽度维护了一个数组navOffsetArr

  //两个字宽度+2*margin 也就是 32+10*2 = 52
  const NAV_SMALL_WIDTH = 52;
  //三个字宽度+2*margin 也就是 48+10*2 = 68
  const NAV_BIG_WIDTH = 68;


  this.navOffsetArr = [
        0,
        0,
        NAV_SMALL_WIDTH,
        NAV_SMALL_WIDTH * 2,
        NAV_SMALL_WIDTH * 2 + NAV_BIG_WIDTH,
        NAV_SMALL_WIDTH * 2 + NAV_BIG_WIDTH * 2,
        NAV_SMALL_WIDTH * 3 + NAV_BIG_WIDTH * 2,
        NAV_SMALL_WIDTH * 4 + NAV_BIG_WIDTH * 2
      ]复制代码

获取索引值

 computed: {
      ...mapState([
        'curNavIndex'
      ])
    }复制代码

watch里监听索引值，当curNavIndex改变时，拿到不同的navScrollLeft值

 watch: {
      curNavIndex(newIndex){
        this.navScrollLeft = this.navOffsetArr[newIndex]
      }
    }复制代码

最后将scroll-left与navScrollLeft绑定，从而实现自动滑动

     <scroll-view
        class="nav"
        scroll-x="true"
        scroll-with-animation="true"
        :scroll-left="navScrollLeft">
       
       ......
       ......
       
      </scroll-view>复制代码

首页自动保存位置信息

在进入index首页的时候，就会自动将当前城市，当前经纬度，当前地址存入state中作为出发点信息。这里接入了腾讯地图api,还是比较方便的。

  wx.getLocation({
          type: 'gcj02',
          success: (res) => {
            reverseGeocoder(qqmapsdk, res).then(res => {
              this.saveStartPlace(res.result.address)
              this.saveFormattedStartPlace(res.result.formatted_addresses.recommend)
              this.saveCurCity(res.result.address_component.city)
            })
            this.saveStartPosition([res.latitude, res.longitude])
          }
        })复制代码

mapMutations