微信小程序 + Go 开发《共享遛狗》（第五篇）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

---

第五篇(路由重构)

头像绑定跳转函数

<cover-image class="round" src="{{avatarURL?avatarURL:'images/account.png'}}" bindtap="onMyTripsTap"></cover-image>

onMyTripsTap() {
  wx.navigateTo({
    url: "/pages/trip/trip",
  })
}

我的行程页面

<view id="heading" class="padding-bottom-xs">
  <view class="avatar-container margin-top margin-right-xl">
    <view class="text-xl mytrips-heading">我的行程</view>
    <view class="avatar margin-right">
      <button wx:if="{{!avatarURL}}" class="cu-avatar round lg bg-grey margin-xs" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">
        <text class="cuIcon-people"></text>
      </button>
      <image wx:if="{{avatarURL}}" class="cu-avatar round lg bg-grey margin-xs" src="{{avatarURL}}" />
    </view>
    <view class="text-blue" bindtap="onRegisterTap">铲屎官资格认证{{licStatus}}</view>
  </view>
</view>

可想而知，点击《铲屎官资格认证》，去往注册页面。

onGetUserInfo(e: any) {
  const userInfo: WechatMiniprogram.UserInfo = e.detail.userInfo
  if (userInfo) {
    this.setData({
      avatarURL: userInfo.avatarUrl,
    })
    wx.setStorageSync('avatar', this.data.avatarURL)
  }
},
onRegisterTap() {
  wx.navigateTo({
    url: "/pages/resgister/resgister",
  })
}

路由管理

当我们的页面越来越多，路由也就越来越多。难免会有写错的时候，这个时候，我们可以在封装函数，利用 TS 的特性来约束。TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。

utils/routing.ts

export namespace routing {
  // 行程页面
  export interface tripIdOpts {
    tripId: number
  }
  export function sliding(o: tripIdOpts) {
    return `/pages/sliding/sliding?trip_id=${o.tripId}`
  }
  // 开锁页面
  export interface LockOpts {
    dogId: string
  }
  export function lock(o: LockOpts) {
    return `/pages/lock/lock?dogId=${o.dogId}`
  }
  // 注册页面
  export interface RegisterOpts {
    redirect?: string
  }
  export interface RegisterParams {
    redirectURL: string
  }
  export function register(p?: RegisterParams) {
    const page = '/pages/resgister/resgister'

    if (!p) {
      return page
    }
    return `${page}?redirect=${encodeURIComponent(p.redirectURL)}`
  }
  // 我的行程页面
  export function mytrips() {
    return '/pages/trip/trip'
  }
}

index.ts

点击扫码遛狗按钮，携带 dogId，跳转到认证页面。

handleScanTap() {
  wx.scanCode({
    success: (res) => {
      const redirectURL = routing.lock({
        dogId: '6666666666'
      })
      if (res) {
        wx.navigateTo({
          url: routing.register({
            redirectURL: redirectURL,
          })
        })
      }
    }
  })
}

点击开锁按钮，跳转到行程页面。

onStart() {
  wx.getLocation({
    type: 'gcj02',
    success: (loc) => {
      setTimeout(() => {
        wx.redirectTo({
          url: routing.sliding({
            tripId: 1231313
          })
        })
        wx.hideLoading()
      }, 2000);
    },
  })
}

点击《铲屎官认证》，跳转到认证页面。

onRegisterTap() {
  wx.navigateTo({
    url: routing.register(),
  })
}

当需要取出参数的时候

onLoad(options) {
  if(options.redirect) {
    this.redirectURL = decodeURIComponent(options.redirect)
  }
},

直到现在，我们大概是这样的一个流程。

行程列表

利用 scroll-view 组件完成该部分。

<scroll-view scroll-y scroll-with-animation enable-back-to-top style="height:{{tripsHeight}}px">
  <view wx:for="{{mainItems}}" wx:key="id" class="bg-white margin-bottom margin-lr padding-bottom trip main-item" id="{{item.id}}" data-nav-id="{{item.navId}}" data-nav-scroll-id="{{item.navScrollId}}" data-trip-id="{{item.data.id}}" data-trip-in-progress="{{item.data.inProgress}}" bindtap="onMianItemTap">
    <view class='cu-bar solid-bottom padding-right'>
      <view class='action'>
        <text class='cuIcon-title text-green'></text> {{item.data.shortId}}
      </view>
      <view class="{{item.data.inProgress?'text-blue in-progress text-lg text-bold':''}}">{{item.data.status}}
        <text wx:if="{{item.data.inProgress}}" class="cuIcon-right" />
      </view>
    </view>
    <view class="trip-detail padding-right">
      <view class="detail-l">
        <view class="detail-row">
          <view class="field padding-lr">起点</view>
          <view class="value text-black text-bold">{{item.data.start}}</view>
        </view>
        <view wx:if="{{!item.data.inProgress}}" class="detail-row">
          <view class="field padding-lr">终点</view>
          <view class="value text-black text-bold">{{item.data.end}}</view>
        </view>
        <view wx:if="{{!item.data.inProgress}}" class="detail-row">
          <view class="field padding-lr">距离</view>
          <view class="value text-black text-bold">{{item.data.distance}}</view>
        </view>
        <view wx:if="{{!item.data.inProgress}}" class="detail-row">
          <view class="field padding-lr">时间</view>
          <view class="value text-black text-bold">{{item.data.duration}}</view>
        </view>
      </view>
      <view wx:if="{{!item.data.inProgress}}" class="detail-r">
        <view class="fee text-xxl text-price text-bold">{{item.data.fee}}</view>
      </view>
    </view>
  </view>
</scroll-view>

我们需要模拟一些假数据。

// pages/trip/trip.ts
import { routing } from "../../utils/routing"

interface Trip {
  id: number
  shortId: number
  start: string
  end: string
  duration: string
  fee: string
  distance: string
  status: string
}

interface MainItem {
  id: number
  data: Trip
}

Page({
  data: {
    avatarURL: '',
    mainItems: [] as MainItem[],
    tripsHeight: 0,
  },
  onLoad() {
    this.setData({
      avatarURL: wx.getStorageSync('avatar') || ''
    })
    this.populateTrips()
  },

  populateTrips() {
    const trips: MainItem[] = []
    for (let i = 0; i < 100; i++) {
      trips.push({
        id: (1111 + i),
        data: {
          id : (0 + i),
          shortId: (1111 + i),
          start: '仙游县政府',
          end: '兰溪大桥',
          distance: '20公里',
          duration: '1时56分',
          fee: '234',
          status: '已完成'
        }
      })
    }
    this.setData({
      mainItems: trips
    })
  },

  onReady() {
    wx.createSelectorQuery().select('#heading')
      .boundingClientRect(rect => {
        const height = wx.getSystemInfoSync().windowHeight - rect.height
        this.setData({
          tripsHeight: height,
        })
      }).exec()
  },
})