Mpvue based on the imitation of didi travel small program

The original

rendering

┣ ━ API# Store network request related┣━ common ● ┣━ constant // constant ┣━ CSS //weui. CSS ┣━ less // universal less style and variable L ━ lib // third-party library qqmap- wX-jssdk. js chain ━ Components ● The extracted component ┣━ addressList. Vue ┣━ common-footer. Vue ┣━ driver-header. Vue ┣━ Loading-sprinner Star. vue ┣━ pages ● page ┣━ Cars // select car ┣━ cityChoose // select city ┣━ Destination // select destination port ━ evaluation // evaluate port ━ index // home page page ( Login // login to ┣━ orderCancel // order cancellation ┣━ orderClose // order closure ┣━ orderService // orderService ┣━ orderWhy // ask the cause of failure ━ starting // select the starting place of the l ━waitJs ┣━ mutation-types. Js ┣━ mutations. Js L ━ state ┗ ━ static# static resource, store imagesCopy the code

Vuex data

const state = {
  curNavIndex: 0.// Current header navigation index
  phone: ' '.// Login number
  curCity: ' '.// Current city
  startPlace: 'Point of departure'./ / origin
  startFormattedPlace: ' '.// A more humane description of the point of departure
  startPosition: [],        // contains startLatitude and startLongitude
  destination: 'Where are you going?'./ / destination
  endPosition: [],      // Contains endLatitude and endLongitude
  driver: {},       / / driver information contains Cartnumber, cart, id, name, stars
  cost: 0       / / cost
}Copy the code

In order to make the head navigation automatically slide out when it is clicked, the head navigation automatically slides when swiper is swiped, and the head navigation automatically slides when the car is selected on the CARS page and the car is returned to the Index page. I maintain an index value curNavIndex in VUEX. The scroll left value of the scroll-view varies according to the curNavIndex.

So how do YOU set the exact scroll left value?

Wechat applet cannot conduct Dom manipulation, so it cannot dynamically get the element width. So I maintain an array navOffsetArr based on the width of each item in the header navigation

  Margin = 32+10*2 = 52
  const NAV_SMALL_WIDTH = 52;
  // 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
      ]Copy the code

Get index value

computed: { ... mapState(['curNavIndex'])}Copy the code

Watch listens for index values and gets different navScrollLeft values when curNavIndex changes

 watch: {
      curNavIndex(newIndex){
        this.navScrollLeft = this.navOffsetArr[newIndex]
      }
    }Copy the code

Finally, the scrollleft and navScrollLeft are bound to achieve automatic sliding

<scroll-view class="nav" scroll-x="true" scroll-with-animation="true" :scroll-left="navScrollLeft"> ...... . </scroll-view>Copy the code

The home page automatically saves location information

  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])
          }
        })Copy the code

methods: { ... mapMutations({saveCurNavIndex: 'SET_CUR_NAV_INDEX'.saveStartPlace: 'SET_START_PLACE'.saveFormattedStartPlace: 'SET_FORMATTED_START_PLACE'.saveCurCity: 'SET_CUR_CITY'.saveStartPosition: 'SET_START_POSITION'.saveCost: 'SET_COST'})}Copy the code

function reverseGeocoder(qqmapsdk, {latitude, longitude}) {
  return new Promise((resolve, reject) = > {
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude,
      },
      success: (res) = > resolve(res),
      fail: (res) = > reject(res)
    })
  })
}Copy the code

There are some pits when using the Map component in MPvue, which will be covered later.

Map a map

 <map class="map-didi"
         id="map-didi"
         :latitude="latitude"
         :longitude="longitude"
         :markers="markers"
         @regionchange="regionChange"
         @begin="begin"
         @end="end"
         show-location
    >
    ...
</map>Copy the code

When initializing the map, move the center of the map to startPosition, or if startPosition does not exist, move the center of the map to the coordinates of the current position obtained by wx.getLocation()

 initLocation(){
        if (this.startPosition.length) {
          this.latitude = this.startPosition[0]
          this.longitude = this.startPosition[1]}else {
          wx.getLocation({
            type: "gcj02".success: (res) = > {
              this.longitude = res.longitude
              this.latitude = res.latitude
            }
          })
        }
      }Copy the code

It uses random data to simulate nearby cars, which are then added to this.markers, which are dynamically set according to the curNavIndex, to show different car ICONS when selecting different services

   this.markers = []
        const carNum = getRandomNum(3.8)
        for (let i = 1; i <= carNum; i++) {
          // Define a car object
          let car = {
            id: 0.iconPath: "/static/img/car/cart1.png".latitude: 0.longitude: 0.width: 35.height: 15
          }

          / / random value
          const lon_dis = (Math.ceil(Math.random() * 99)) * 0.00012;
          const lat_dis = (Math.ceil(Math.random() * 99)) * 0.00012;

          car.id = 2 + i
          car.latitude = this.latitude + lat_dis
          car.longitude = this.longitude + lon_dis
          car.iconPath = `/static/img/car/cartThe ${this.curNavIndex + 1}.png`
          this.markers.push(car)
        }Copy the code

The red location icon in the center of the map and the text of pickup time are realized by wrapping the cover image with the cover view

<cover-view class=" center-center "> <cover-view class="text-center"> Fastest {{minutes}} min pick up </cover-view> <cover-image class="inverted-triangle" src="/static/img/triangle-down.png"></cover-image> <cover-image class="img-center" src="/static/img/marker2.png"></cover-image> </cover-view>Copy the code

Inverted triangle is an inverted triangle image, and since cover-View cannot implement complex CSS styles, the inverted triangle effect at the bottom can only be achieved with images.

We do not recommend using controls in map. The official statement also states that controls will soon be obsolete. Please use cover-view

Choose a destination

computed: { ... mapState(['curCity'])}Copy the code

 qqmapsdk.getSuggestion({
          keyword: value,
          region: this.curCity,
          success: (res) = > {
            this.addresses = res.data
          }
        })Copy the code

choosePlace(item){
        //item.address Specifies the specific address
        //item.title Short semantic address
        console.log(item)
        qqmapsdk.geocoder({
          address: item.address,
          success: (res) = > {
            this.saveEndPosition([res.result.location.lat, res.result.location.lng])
            this.saveDestination(item.title)
            this.goBack()
          },
          fail: (err) = > {
            console.log(err)
          }
        })
      }Copy the code

methods: { ... mapMutations({saveDestination: 'SET_DESTINATION'.saveEndPosition: 'SET_END_POSITION'})}Copy the code

 qqmapsdk.getCityList({
        success: (res) = > {
          const result = res.result[1]
          let temp_citys = {} // Use temp_citys to avoid frequent changes to data
          for (let i = 0; i < result.length; i++) {
            let key = result[i].pinyin[0].charAt(0).toLocaleUpperCase()
            if(! temp_citys[key]) { temp_citys[key] = [] } temp_citys[key].push(result[i].fullname) }this.cityList = temp_citys
        }
      })Copy the code

Some other pages will not mention, interested partners can go to see the source code

Some benefits of using MPVue

You can use Vuex

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

constdebug = process.env.NODE_ENV ! = ='production'

export default new Vuex.Store({
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})Copy the code

When using vuex, import store in the corresponding page’s main.js and assign store to vue.prototype. $store

Such as:

import Vue from 'vue'
import App from './wait.vue'
import store from '.. /.. /store/index'

Vue.prototype.$store = store

const app = new Vue(App)
app.$mount(a)Copy the code

Componentized development

Mpvue componentized development is more convenient, and it is also convenient to transplant components to other projects. The complete Vue development experience improves code reuse.

For example, here’s the search-bar:

<template>
  <div class="search-bar">
    <div class="text-location" @click.stop="chooseCity">{{curCity}}</div>
    <input type="text"
           v-model="search"
           class="input-location"
           placeholder="Where do you get on?"
           placeholder-style="color:#cccccc">
    <div class="cancel-location" @click.stop="cancel"> Cancel </div> </div> </template> <scripttype="text/ecmascript-6">
  import {debounce} from '.. /utils/index'

  export default{
    props: {
      curCity: {
        type: String,
        default: '暂无'}},data() {return {
        search: ' '
      }
    },
    methods: {
      cancel(){
        this.$emit('cancel')},clear(){
        this.search = ' '
      },
      chooseCity(){
        this.$emit('chooseCity')
      }
    },
    watch: {
      search(newVal){
        debounce(() => {
          this.$emit('search', newVal)
        }, 500)()
      }
    }
  }
</script>Copy the code

Here the debounce() function is introduced for throttling processing

You can use Async/await

Native applets already support Promises, but async/await is not yet supported. Using the MPvue framework we can encapsulate some asynchronous functions and avoid callback hell.

For example, network request

export function request(url, method = 'GET', data, header = {}) {
  return new Promise((resolve, reject) = > {
    wx.showLoading({title: 'In the middle of... '})
    wx.request({
      url: baseUrl + url,
      method,
      data,
      header: {'Content-Type': 'json'},
      success: function (res) {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          showToast('Unknown error occurred! ')
          reject(res.data)
        }
      },
      fail: function () {
        showToast('Failed to get data! ')},complete:function () {
        wx.hideLoading()
      }
    })
  })
}
Copy the code

async getInitData(){
    const res = await request('/comments')... }Copy the code

Some pits using MPvue

<! <template> <ul v-for= <template> <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>Copy the code

regionchange

<map 
    @regionchange="functionName"
    @end="functionName" 
    @begin="functionName">
<map>
Copy the code

Solution: Use dirty check optimization every time data is updated

Github.com/Meituan-Dia…

But personally feel this direct change source code way or more monster, so found another way

    <map class="map-didi"
         id="map-didi"
         @regionchange="regionChange"
         @begin="begin"
         @end="end" >
    </map>Copy the code

let touchTimeStamp = 0

      regionChange(){ 
      
      },
      begin({timeStamp}){
        touchTimeStamp = timeStamp
      },
      end({timeStamp}){
// Add time judgment
        if (timeStamp - touchTimeStamp > 50) {
          this.mapCtx.getCenterLocation({
            success: (res) = > {
              reverseGeocoder(qqmapsdk, res).then(res= > {
                this.saveStartPlace(res.result.address)
                this.saveFormattedStartPlace(res.result.formatted_addresses.recommend)
              })
              const lon_distance = res.longitude - this.longitude
              const lat_distance = res.latitude - this.latitude
              // Update the current position coordinates
              this.longitude = res.longitude
              this.latitude = res.latitude
              // Determine how far the screen moves, if it exceeds the threshold
              if (Math.abs(lon_distance) >= 0.0022 || Math.abs(lat_distance) >= 0.0022) {
                // Refresh nearby cars
                this.updateCars()
                // Refresh the wait time
                this.minutes = getRandomNum(3.12}}})}}Copy the code

In order to prevent map from constantly triggering begin and end events and causing frequent data updates, a double judgment is made here. When the triggering time of end event minus the triggering time of Start event exceeds a set time, and when the center point moves beyond a threshold, we will update data. This is essentially a throttling process.

Some pit of applets

Cover – the pit of the view

Add a cover-view with a width of 1px to simulate a unilateral border

<cover-view class="footer-bar"> <cover-view class="text" @click.stop="cancel"> Cancel order </cover-view> <cover-view Class ="right-border"></cover-view> <cover-view class="text" @click.stop="endTrip"> endTrip </cover-view> <cover-view Class =" border"></cover-view> </cover-view> </cover-view>Copy the code

.footer-bar {
        padding: 0 12px;
        display: flex;
        align-items: center;
        height: 44px;
        color: rgba(0.0.0.7);
        background: #fff;
        font-size: 0;
        .text {
          flex: 1 1 auto;
          display: inline-block;
          height: 22px;
          line-height: 22px;
          text-align: center;
          font-size: 18px;
        }
        .right-border {
          flex: 0 0 1px;
          height: 22px;
          width: 1px;
          background-color: #d9d9d9; }}Copy the code

The map component has the highest level. How do I create a shadow effect on the Map component?

The implementation is similar, using a cover-image to add an image that can be overlaid on the map component to simulate shadows

See this article for details: juejin.cn/post/684490…

The project address

Welcome friends to exchange and study together, if you like the project, please give a little star

conclusion

There is no rush for success in the long way of learning. Technology changes rapidly, and mastery of the unchanging core is king. It feels good to keep polishing your work, and then refine it if you have a chance.

In addition, I am a junior now, and I plan to find an internship after the summer vacation. Is there anyone in Guangzhou willing to accept me?

link