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

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

第四篇(遛狗行程页面)

为 button 添加点击事件

<button style="width:80%" class="bg-grey lg" bindtap="onStart">开始啦</button>

模拟开始遛狗

onStart() {
  wx.showLoading({
    title: '准备开始',
    mask: true,
  })

  setTimeout(() => {
    wx.redirectTo({
      url: "/pages/sliding/sliding"
    })
    wx.hideLoading()
  }, 2000);
}

结束页面

<!--pages/sliding/sliding.wxml-->
<view class="container">
  <view class="pannel padding-bottom-lg">
    <view class="payment margin-top">
      <view class="time">
        <text class="cuIcon-timefill"></text>
        <text class="time-driven">{{elapsed}}</text>
      </view>
      <view class="fee margin-top-sm">
        <text>给临时铲屎官的辛苦费：{{fee}}元</text>
      </view>
    </view>
    <button style="width:100%" class="cu-btn bg-red margin-tb-sm lg" bindtap="onEndTripTap">交还毛孩子</button>
  </view>
  <map id="map" latitude="{{location.latitude}}" longitude="{{location.longitude}}" show-location scale="{{scale}}" />
</view>

data: {
  location: {
    latitude: 29,
    longitude: 126,
  },
  scale: 5,
  elapsed: '00:00:00',
  fee: '0.00',
},

记录定位

wx.startLocationUpdate(Object object)，开启小程序进入前台时接收位置消息。

wx.onLocationChange(function callback)，监听实时地理位置变化事件。

app.json

"requiredPrivateInfos": [
  "startLocationUpdate",
  "onLocationChange"
],

接下来，我们需要去小程序的管理后台申请。

tip：这个不仅需要申请，而且你所注册的小程序服务类目，必须和地图有强关系，否则，没有权限。

setupLocationUpdator() {
  wx.startLocationUpdate({
    fail: (err) => {
      console.log(err)
    }
  })
  wx.onLocationChange(loc => {
    this.setData({
      location: {
        latitude: loc.latitude,
        longitude: loc.longitude
      }
    })
  })
}

onLoad() {
  this.setupLocationUpdator()
}

onUnload() {
  wx.stopLocationUpdate()
}

最开始添加地理位置信息

当我们点击开始按钮的时候，需要获取地理位置信息，发送给服务器。因此，之前写的逻辑应该都是在成功获取地理位置信息之后的回调中。

onStart() {
  wx.getLocation({
    type: 'gcj02',
    success: (loc) => {
      // 开锁之后，要发送地址位置
      console.log('开锁之后，要发送地址位置，头像之类的信息', loc)
      wx.showLoading({
        title: '准备开始',
        mask: true,
      })
      setTimeout(() => {
        wx.redirectTo({
          url: "/pages/sliding/sliding"
        })
        wx.hideLoading()
      }, 2000);
    },
    fail: () => {
      wx.showToast({
        icon: 'none',
        title: '请前往设置页授权位置信息',
      })
    }
  })
}

计算时间

当开始遛狗了，需要计算时间。这里我们使用 setInterval。onload 调用 setupTimer 函数。

setupTimer() {
  let secSinceLastUpdate = 0
  setInterval(() => {
    secSinceLastUpdate++
    this.setData({
      elapsed: durationStr(secSinceLastUpdate),
    })
  }, 1000)
}

这里格式化时间我们不引入库，自己写一个简单的。

export function padString(n: number) {
  return n < 10 ? '0' + n.toFixed(0) : n.toFixed(0)
}

export function formatDuration(sec: number) {
  const h = Math.floor(sec / 3600)
  sec -= 3600 * h
  const m = Math.floor(sec / 60)
  sec -= 60 * m
  const s = Math.floor(sec)
  return {
    hh: padString(h),
    mm: padString(m),
    ss: padString(s),
  }
}

export function durationStr(sec: number) {
  const dur = formatDuration(sec)
  return `${dur.hh}:${dur.mm}:${dur.ss}`
}

临时铲屎官的口粮

export function formatFee(cents: number) {
  return (cents / 100).toFixed(2)
}

const PRICE = 0.5

setupTimer() {
  let secSinceLastUpdate = 0
  let cents = 0
  this.timer = setInterval(() => {
    secSinceLastUpdate++
    cents += PRICE
    this.setData({
      elapsed: durationStr(secSinceLastUpdate),
      fee: formatFee(cents)
    })
  }, 1000)
}

onUnload() {
   // ...
  if (this.timer) {
    clearInterval(this.timer)
  }
}

直到现在，我们来梳理一下流程