小程序总结（五）-定位功能

今天在做一个定位功能，需要用户授权。
如果用户没有授权定位，就显示授权询问页面（这其实是调用wx.openSetting()）这个接口。
如果用户允许了授权定位，就调用wx.getLocation()接口获取经纬度，最后根据获取的这个经纬度，把数据传递给后台，获取当前城市和周边城市数据，再用户点击位置按钮时，跳转至城市显示页面。

具体代码如下:

//wxml
<view class='search-place' bindtap="openAuthLocation">
    <view class='place'>{{cityName}}</view>
    <image class='triangle' src='/images/down-triangle.png'></image>
 </view>

//js
//因为是一个组件，所以使用created钩子函数
created: function() {
    //获取地理位置的经纬度
    this.getLocation()
},

打开的询问页面是这样的

positoin.png

methods: {
      getLocation: function () {
          wx.getLocation({
              type: 'wgs84', //表示使用GPS定位
              success: (res) => {
                  console.log("定位成功 = ", res)
                  this.setData({
                      latitude: res.latitude,
                      longitude: res.longitude
                  })
                  调用后台接口获取数据
                  this.getHomieData()
              },
              //表示用户没有开启授权
              fail: (res) => {
                  this.setData({
                      errMsg: res.errMsg
                  })
                  console.log(this.data)
                  wx.showToast({
                      title: '已取消定位服务,点击地址，可授权开启定位服务',
                      icon: 'none'
                  })
              }
          })
      },
    openAuthLocation: function () {
        console.log("openAuthLocation = ", this.data)
        if (!this.data.cityName) {
              //打开授权页面
              wx.openSetting({
                  success: (res) => {
                      let data = res.authSetting
                      if (data['scope.userLocation']) {
                          this.getLocation()
                      }
                  }
              })
        } else {
            //跳转至城市显示页面
            wx.navigateTo({
                url: '/entries/posPlace/posPlace',
            })
        }
    },
      getHomieData: function() {
          wx.request({
              url: '。。。。',
              method: 'POST',
              data: {
                  city: this.data.cityName,
                  lng: this.data.longitude,
                  lat: this.data.latitude
              },
              success: (res) => {
                  this.setData({
                      cityName: res.data.location.city_name
                  })
                  wx.setStorageSync('positionInfo', res)
              }
          })
      }
  }

城市显示页面如下

city.png

当我点击下面周边城市的时候，回回到显示当前城市的页面，一开始我使用wx.navigateBack({url: ''})，虽然可以返回去，但数据没有更新。
那我就想，用wx.navigateTo({url: ''})传参的形式，然后更新数据，发现这里根本就跳转不到上一页（具体原因不明，有知道的还请指教）。
接着，我搜文档，又试试wx.redirectTo(),这个跟wx.navigateTo({url: ''})是一样的效果，页跳不回上一页。
最后，使用wx.reLaunch()，页面返回去了，数据也更新了。